/* Blocks - the generic layout vocabulary content-file pages are built from
 * (inc/blocks.php). Values via var(--token) only.
 *
 * Layout values arrive per element as custom properties (--pad, --gap, --w,
 * ...). They are registered as non-inheriting so a box's width or padding never
 * leaks into the blocks inside it. Icon and image sizes (--isize, --iw, ...)
 * do inherit: they are set on a block and read by its own children. Mobile values (--pad-m, ...) take over at
 * the mobile breakpoint and fall back to the desktop value.
 */

@property --w { syntax: "*"; inherits: false; }
@property --w-m { syntax: "*"; inherits: false; }
@property --pad { syntax: "*"; inherits: false; }
@property --pad-m { syntax: "*"; inherits: false; }
@property --gap { syntax: "*"; inherits: false; }
@property --gap-m { syntax: "*"; inherits: false; }
@property --mar { syntax: "*"; inherits: false; }
@property --mar-m { syntax: "*"; inherits: false; }
@property --radius { syntax: "*"; inherits: false; }
@property --radius-m { syntax: "*"; inherits: false; }
@property --minh { syntax: "*"; inherits: false; }
@property --minh-m { syntax: "*"; inherits: false; }
@property --maxw { syntax: "*"; inherits: false; }
@property --bg { syntax: "*"; inherits: false; }
@property --bg-m { syntax: "*"; inherits: false; }
@property --bgpos { syntax: "*"; inherits: false; }
@property --h { syntax: "*"; inherits: false; }

/* ---------- Sections and boxes ---------- */

.blocks-section {
	min-height: var(--minh, auto);
	background-image: var(--bg, none);
	background-position: var(--bgpos, center);
	background-size: cover;
	background-repeat: no-repeat;
}

.blocks-section > .wrap {
	min-height: inherit;
}

.box {
	display: flex;
	flex-direction: column;
	gap: var(--gap, 0);
	width: var(--w, auto);
	max-width: var(--maxw, none);
	min-height: var(--minh, auto);
	margin: var(--mar, 0);
	padding: var(--pad, 0);
	border-radius: var(--radius, 0);
	background-image: var(--bg, none);
	background-position: var(--bgpos, center);
	background-size: cover;
	background-repeat: no-repeat;
}

/* The section's content column: the live site's 1400 boxed container. .box
   would otherwise lift the cap (max-width: none) and let content run edge to
   edge on wide screens. */
.wrap.box {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	margin-block: 0;
}

a.box {
	color: inherit;
	font-weight: inherit;
}

.l-dir-row {
	flex-direction: row;
}

.l-dir-row > * {
	flex: 0 1 auto;
	min-width: 0;
}

.l-wrapr-wrap {
	flex-wrap: wrap;
	align-content: flex-start;
}

.l-alignc-center {
	align-content: center;
}

.l-justify-center { justify-content: center; }
.l-justify-end { justify-content: flex-end; }
.l-justify-between { justify-content: space-between; }
.l-justify-around { justify-content: space-around; }
.l-justify-evenly { justify-content: space-evenly; }
.l-align-start { align-items: flex-start; }
.l-align-center { align-items: center; }
.l-align-end { align-items: flex-end; }
.l-align-baseline { align-items: baseline; }

.l-self-center {
	align-self: center;
	margin-inline: auto;
}

.l-self-end {
	align-self: flex-end;
	margin-left: auto;
}

/* A row of cards that share an eye line: the row is a grid and each card a
   subgrid over the row's tracks, so title, divider, label, list and button
   sit level with the same part of every card beside it, whatever its copy.
   Content sets 'eyeline' => columns on the row box; a card spans one track
   per part (five for the service card). */
.l-eyeline {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

.l-eyeline > .box {
	grid-row: span var(--parts, 5);
	width: auto;
}

/* Only a card with every part joins the shared tracks; anything else in the
   row (a CTA tile, say) spans the row's height and keeps its own layout. */
.l-eyeline > .box:has(> :nth-child(5):last-child) {
	display: grid;
	grid-template-rows: subgrid;
}

.l-eyeline > .box > * {
	min-width: 0;
}

.l-eyeline > .box > .sgp-button {
	justify-self: start;
}

.l-grow {
	flex-grow: 1;
}

/* Elementor heroes are rows that wrap with their lines centred vertically. */
.blocks-section > .wrap.l-dir-row.l-wrapr-wrap {
	align-content: center;
}

/* Elementor "auto" width: shrink to the content. */
.l-fit {
	width: fit-content;
	align-self: flex-start;
}

/* Surfaces. Text colour follows the surface unless a block sets its own. */
.bg-white { background-color: var(--color-white); color: var(--color-navy); }
.bg-grey { background-color: var(--color-grey); color: var(--color-navy); }
.bg-grey-mid { background-color: var(--color-grey-mid); color: var(--color-navy); }
.bg-grey-soft { background-color: var(--color-grey-soft); color: var(--color-navy); }
.bg-navy { background-color: var(--color-navy); color: var(--color-white); }
.bg-raised { background-color: var(--color-navy-raised); color: var(--color-white); }
.bg-slate { background-color: var(--color-slate); color: var(--color-white); }
.bg-nav-btn { background-color: var(--color-nav-btn); color: var(--color-white); }
.bg-blue { background-color: var(--color-blue); color: var(--color-white); }
.bg-red { background-color: var(--color-red); color: var(--color-white); }

/* Glass panel: the site's one glass surface, for panels over art. Light glass
   (white 11%) with a white 33% rim, frosting what sits behind it. A content
   box takes it with 'bg' => 'glass'; the rim is part of the surface, so glass
   boxes set no 'bd'. */
.bg-glass {
	border: var(--border-1) solid var(--color-white-33);
	background-color: var(--color-white-11);
	color: var(--color-white);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
}


.tc-white { color: var(--color-white); }
.tc-navy { color: var(--color-navy); }
.tc-blue { color: var(--color-blue); }
.tc-red { color: var(--color-red); }

.ta-center { text-align: center; }
.ta-end { text-align: right; }

/* ---------- Text ---------- */

.b-heading {
	padding: var(--pad, 0);
	border-radius: var(--radius, 0);
	width: var(--w, auto);
	max-width: var(--maxw, none);
	margin: var(--mar, 0);
}

.b-heading a {
	color: inherit;
	font-weight: inherit;
}

.b-text {
	padding: var(--pad, 0);
	border-radius: var(--radius, 0);
	width: var(--w, auto);
	max-width: var(--maxw, none);
	margin: var(--mar, 0);
}

/* The kit gives every paragraph an 8 bottom margin, the last one included. */
.b-text p,
.b-text p:last-child {
	margin: 0 0 var(--space-8);
}

.b-text ul,
.b-text ol {
	margin: 0;
	padding-left: var(--space-40);
}

.b-text a,
.rich a {
	overflow-wrap: anywhere;
}

/* ---------- Buttons (SGP Button, components.css) ---------- */

.b-button {
	margin: var(--mar, 0);
}

/* ---------- Lists ---------- */

.b-list {
	padding: var(--pad, 0);
	border-radius: var(--radius, 0);
	display: flex;
	flex-direction: column;
	gap: var(--gap, 0);
	width: var(--w, auto);
	margin: var(--mar, 0);
	list-style: none;
}

.b-list--inline {
	flex-flow: row wrap;
}

.b-list li,
.b-list li > a {
	display: flex;
	align-items: flex-start;
	gap: var(--igap, 0);
}

.b-list li > a {
	color: inherit;
	font-weight: inherit;
}

.b-list__icon {
	width: var(--isize, var(--icon-19));
	height: 1lh;
}

/* Glyph bullets sit in the text's first line box, centred on it. */
.b-list .b-list__icon.sgp-icon {
	height: auto;
	line-height: inherit;
}

.b-list__icon svg {
	width: var(--isize, var(--icon-19));
	height: var(--isize, var(--icon-19));
}

/* ---------- Divider ---------- */

.b-rule {
	width: var(--w, auto);
	margin: var(--mar, 0);
	padding: var(--pad, 0);
}

.b-rule span {
	display: block;
	width: var(--rw, 100%);
	border-top: var(--border-1) solid var(--color-white);
}

.b-rule--thick span {
	border-top-width: var(--border-2);
}

.b-rule--dark span { border-top-color: var(--color-navy); }
.b-rule--red span { border-top-color: var(--color-red); }
.b-rule--grey span { border-top-color: var(--color-grey-mid); }

/* ---------- Images ---------- */

.b-image {
	padding: var(--pad, 0);
	width: var(--w, auto);
	max-width: var(--maxw, none);
	margin: var(--mar, 0);
}

.b-image img {
	width: var(--iw, 100%);
	max-width: 100%;
	height: auto;
	border-radius: var(--ir, 0);
}

.b-image.ta-center img {
	margin-inline: auto;
}

.b-image.ta-end img {
	margin-left: auto;
}

/* ---------- Icon box ---------- */

.b-iconbox {
	padding: var(--pad, 0);
	border-radius: var(--radius, 0);
	display: flex;
	gap: var(--igap, 0);
	width: var(--w, auto);
	max-width: var(--maxw, none);
	margin: var(--mar, 0);
}

.b-iconbox--top {
	flex-direction: column;
}

.b-iconbox--left {
	flex-direction: row;
	align-items: flex-start;
}

.b-iconbox--right {
	flex-direction: row-reverse;
	align-items: flex-start;
}

.b-iconbox.ta-center {
	align-items: center;
}

.b-iconbox__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--isize, auto);
	height: var(--isize, auto);
	line-height: var(--lh-1);
}

.b-iconbox__icon--bg {
	box-sizing: content-box;
	padding: var(--ipad, 0);
	border-radius: var(--sgp-radius-full);
}

.b-iconbox__icon a,
.b-iconbox__icon .icon,
.b-iconbox__icon img,
.b-iconbox__icon svg {
	width: 100%;
	height: 100%;
}

.b-iconbox__icon img {
	object-fit: contain;
}

.b-iconbox__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.b-iconbox__title {
	margin: var(--mar, 0);
}

.b-iconbox__title a {
	color: inherit;
	font-weight: inherit;
}

.b-iconbox__text {
	margin: 0;
}

/* ---------- Accordion ----------
   Material expansion panel: divider between panels, the header row is the
   hit target with the Oxford state layer, expand_more rotates when open and
   the panel grows open (where ::details-content is supported). */

.b-accordion {
	display: flex;
	flex-direction: column;
	width: var(--w, auto);
	margin: var(--mar, 0);
	interpolate-size: allow-keywords;
}

.b-accordion__item {
	border-bottom: var(--border-1) solid var(--sgp-color-divider);
}

.b-accordion__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size var(--sgp-dur-medium) var(--sgp-ease), content-visibility var(--sgp-dur-medium) allow-discrete;
}

.b-accordion__item[open]::details-content {
	block-size: auto;
}

.b-accordion__title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sgp-space-16);
	min-height: var(--sgp-control-height);
	padding: var(--sgp-space-16);
	cursor: pointer;
	list-style: none;
}

.b-accordion__title::-webkit-details-marker {
	display: none;
}

.b-accordion__title::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--sgp-state-layer);
	opacity: 0;
	transition: opacity var(--sgp-dur-short) var(--sgp-ease);
	pointer-events: none;
}

.b-accordion__title:hover::before {
	opacity: var(--sgp-state-hover);
}

.b-accordion__title:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: calc(-1 * var(--sgp-focus-ring-width));
}

.b-accordion__title:focus-visible::before {
	opacity: var(--sgp-state-focus);
}

.b-accordion__num {
	margin-right: var(--space-16);
	font-weight: var(--sgp-weight-bold);
}

.b-accordion__icon {
	flex: none;
	transition: transform var(--sgp-dur-medium) var(--sgp-ease);
}

.b-accordion__item[open] .b-accordion__icon {
	transform: rotate(180deg);
}

.b-accordion__body {
	padding: 0 var(--sgp-space-16) var(--sgp-space-16);
}

.on-dark .b-accordion__item {
	border-bottom-color: var(--color-white-33);
}

.on-dark .b-accordion__title::before {
	background-color: var(--sgp-state-layer-on-dark);
}

.on-dark .b-accordion__title:focus-visible {
	outline-color: var(--sgp-color-on-color);
}

/* ---------- Tabs ---------- */

.b-tabs {
	display: flex;
	width: var(--w, auto);
	margin: var(--mar, 0);
}

.b-tabs--h {
	flex-direction: column;
	gap: var(--space-32);
}

.b-tabs--v {
	flex-direction: row;
	gap: var(--space-32);
}

.b-tabs__list {
	display: flex;
}

.b-tabs--v .b-tabs__list {
	flex: 0 0 50%;
	flex-direction: column;
}

.b-tabs__tab {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: var(--space-8);
	justify-content: center;
	padding: var(--space-16) var(--space-32);
	border: 0;
	border-bottom: var(--border-2) solid var(--color-grey);
	background-color: var(--color-white);
	color: var(--color-navy);
	font: var(--sgp-weight-semibold) var(--sgp-text-14) var(--sgp-font);
	text-align: center;
	cursor: pointer;
}

/* Live site: the tabs share the bar's full width, and hover previews the
   selected look. */
.b-tabs--h .b-tabs__tab {
	flex: 1 1 auto;
	font-size: var(--sgp-text-16);
	transition: background-color var(--sgp-dur-short) var(--sgp-ease), border-color var(--sgp-dur-short) var(--sgp-ease);
}

.b-tabs__tab[aria-selected="true"],
.b-tabs--h .b-tabs__tab:hover {
	border-bottom: var(--border-2) solid var(--color-red);
	background-color: var(--color-grey);
}

.b-tabs__tab:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: calc(-1 * var(--sgp-focus-ring-width));
}

.b-tabs--v .b-tabs__tab {
	flex: 0 0 auto;
	min-height: var(--size-120);
	border-bottom: 0;
	border-left: var(--border-2) solid var(--color-grey-mid);
	background-color: var(--color-white);
	text-align: left;
}

.b-tabs--v .b-tabs__tab[aria-selected="true"] {
	border-left-color: var(--color-red);
	background-color: var(--color-white);
}

.b-tabs__title {
	font-weight: var(--sgp-weight-semibold);
}

.b-tabs--v .b-tabs__title {
	font: var(--sgp-weight-semibold) var(--sgp-text-16) var(--sgp-font);
}

.b-tabs__desc {
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
}

.b-tabs__panels {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.b-tabs__panel {
	flex: 1;
}

.b-tabs__panel {
	display: flex;
	gap: var(--space-48);
	height: 100%;
}

.b-tabs__panel[hidden] {
	display: none;
}

.b-tabs__text {
	flex: 1;
	font: var(--sgp-weight-regular) var(--sgp-text-22) var(--sgp-font);
}

.b-tabs__text h4 {
	margin-bottom: var(--space-20);
	font: var(--sgp-weight-medium) var(--sgp-text-24) var(--sgp-font);
}

.b-tabs--v .b-tabs__title {
	font: var(--sgp-weight-semibold) var(--sgp-text-20) var(--sgp-font);
}

.b-tabs--v .b-tabs__desc {
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
}

.b-tabs__mtab {
	display: none;
}

.b-tabs__tile {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: var(--size-400, var(--panel-min));
	border-radius: var(--sgp-radius-section);
	background-image: var(--bg, none);
	background-position: center;
	background-size: cover;
	color: var(--color-white);
}

.b-tabs__tile .icon {
	width: var(--size-124, var(--icon-60));
	height: var(--size-124, var(--icon-60));
}

@media (max-width: 767px) {
	.b-tabs__list {
		display: none;
	}

	.b-tabs__mtab {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		width: 100%;
		padding: var(--space-15) var(--space-35);
		border: 0;
		border-bottom: var(--border-2) solid var(--color-grey);
		background-color: var(--color-white);
		color: var(--color-navy);
		font: var(--sgp-weight-semibold) var(--sgp-text-14) var(--sgp-font);
		text-align: center;
		cursor: pointer;
	}

	.b-tabs__mtab[aria-expanded="true"] {
		border-bottom-color: var(--color-red);
		background-color: var(--color-grey);
	}

	.b-tabs--v .b-tabs__mtab {
		justify-content: center;
		min-height: var(--size-125);
		border-bottom: 0;
		border-left: var(--border-2) solid var(--color-grey-mid);
		background-color: var(--color-white);
		text-align: left;
	}

	.b-tabs--v .b-tabs__mtab[aria-expanded="true"] {
		margin-bottom: var(--space-25);
		border-left-color: var(--color-red);
	}

	.b-tabs--v .b-tabs__panel {
		display: none;
	}

	/* Live keeps the hidden tile's 35 gap under the steps. */
	.b-tabs--v {
		padding-bottom: var(--space-35);
	}

	.b-tabs__text h4 {
		margin-bottom: var(--space-45);
		font: var(--sgp-weight-regular) var(--sgp-text-24) var(--sgp-font);
	}

	.b-tabs--h .b-tabs__panel:not([hidden]) {
		margin-block: var(--space-35);
	}

	.b-tabs__panel {
		flex-direction: column;
		gap: var(--space-35);
	}

	.b-tabs__tile {
		flex: none;
		min-height: var(--size-250);
	}
}

/* ---------- Gallery ---------- */

.b-gallery {
	position: relative;
	width: var(--w, auto);
	margin: var(--mar, 0);
}

/* The live image carousels: slide with rounded corners, arrows over its lower
   corners, dots over its foot, and a 30 band below. */
.b-gallery__stage {
	position: relative;
	padding-bottom: var(--space-32);
}

/* The track is the slide window: one rounded frame, no gap between slides,
   so a slide in motion is clipped by the frame's corners, not cut square. */
.b-gallery__track {
	gap: 0;
	margin-top: 0;
	border-radius: var(--sgp-radius-object);
}

.b-gallery__track li {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.b-gallery__track img {
	display: block;
	width: 100%;
}

.b-gallery__arrow {
	position: absolute;
	/* 50 above the slide's foot (the stage's 32 band sits below it). */
	bottom: calc(var(--space-32) + var(--space-50));
	--sgp-circle-size: var(--icon-60);
}

.b-gallery__arrow--prev {
	left: var(--space-50);
}

.b-gallery__arrow--next {
	right: var(--space-50);
}

.b-gallery__dots {
	position: absolute;
	right: 0;
	bottom: calc(var(--space-32) + var(--space-35));
	left: 0;
	display: flex;
	justify-content: center;
	gap: var(--space-12);
	/* Decorative and full width: it must not take the arrows' clicks. */
	pointer-events: none;
}

.b-gallery__dots span {
	width: var(--space-6);
	height: var(--space-6);
	border-radius: var(--sgp-radius-full);
	/* Over photos: solid Light Gray disappears on pale slides. */
	background-color: var(--sgp-color-outline);
}

.b-gallery__dots span.is-active {
	background-color: var(--sgp-color-ink);
}

/* The box behind a carousel stretches to the card beside it. On live that box
   matched the slide images' grey and hid the gap under a shorter slide; the
   library's Light Gray shows it, so the arrows looked to drift from carousel
   to carousel. Tablet widths: the box shrinks to its slide. Wide screens: the
   slide fills the box (about 10% crop at most), so slide and card end level. */
@media (min-width: 768px) {
	.box:has(> .b-gallery) {
		align-self: flex-start;
	}
}

@media (min-width: 1400px) {
	.box:has(> .b-gallery) {
		align-self: stretch;
	}

	.b-gallery,
	.b-gallery__stage,
	.b-gallery__track {
		display: flex;
		flex: 1;
	}

	.b-gallery,
	.b-gallery__stage {
		flex-direction: column;
	}

	.b-gallery__track img {
		height: 100%;
		object-fit: cover;
	}
}

/* Phones, as live: smaller arrows and the dots move into a band below the
   slide, so nothing covers the image. */
@media (max-width: 767px) {
	.b-gallery__stage {
		padding-bottom: calc(var(--space-48) + var(--space-12));
	}

	.b-gallery__arrow {
		bottom: 0;
		--sgp-circle-size: var(--space-48);
	}

	.b-gallery__arrow--prev {
		left: 0;
	}

	.b-gallery__arrow--next {
		right: 0;
	}

	.b-gallery__dots {
		bottom: calc(var(--space-24) - var(--space-6) / 2);
	}
}

/* ---------- Icons, social, spacer ---------- */

.b-icon {
	display: flex;
	width: var(--w, var(--isize, auto));
	margin: var(--mar, 0);
	/* Elementor sets the glyph inline in a line box, which leaves 8 under it. */
	padding-bottom: var(--space-8);
}

.b-icon.ta-center {
	justify-content: center;
}

.b-icon.ta-end {
	justify-content: flex-end;
}

.b-icon__glyph {
	width: var(--isize, auto);
	height: var(--isize, auto);
}

.b-social {
	display: flex;
	gap: var(--space-8);
	justify-content: flex-start;
	width: var(--w, auto);
	margin: var(--mar, 0);
	padding: 0;
	list-style: none;
}

.b-social.tc-white a {
	color: var(--color-white);
}

.b-social.ta-end {
	justify-content: flex-end;
}

.b-social a {
	display: flex;
	width: var(--isize, var(--icon-30));
	height: var(--isize, var(--icon-30));
	color: var(--color-blue);
}

.b-social .icon {
	width: 100%;
	height: 100%;
}

.b-spacer {
	height: var(--h);
}

.b-form {
	width: var(--w, auto);
	margin: var(--mar, 0);
}

/* ---------- Visibility ---------- */

@media (min-width: 768px) {
	.hide-desktop {
		display: none !important;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.hide-mobile {
		display: none !important;
	}

	.box {
		gap: var(--gap-m, var(--gap, 0));
		width: var(--w-m, var(--w, auto));
		min-height: var(--minh-m, var(--minh, auto));
		margin: var(--mar-m, var(--mar, 0));
		padding: var(--pad-m, var(--pad, 0));
		border-radius: var(--radius-m, var(--radius, 0));
		background-image: var(--bg-m, var(--bg, none));
	}

	.wrap.box {
		width: 100%;
		margin-inline: auto;
	}

	.blocks-section {
		min-height: var(--minh-m, var(--minh, auto));
		background-image: var(--bg-m, var(--bg, none));
	}

	.l-dir-m-column { flex-direction: column; }
	.l-eyeline { grid-template-columns: minmax(0, 1fr); }
	.l-eyeline > .box { width: auto; }
	.l-dir-m-row { flex-direction: row; }
	.l-justify-m-start { justify-content: flex-start; }
	.l-justify-m-center { justify-content: center; }
	.l-justify-m-between { justify-content: space-between; }
	.l-align-m-start { align-items: flex-start; }
	.l-align-m-center { align-items: center; }
	.l-align-m-stretch { align-items: stretch; }

	.b-heading,
	.b-text,
	.b-list,
	.b-rule,
	.b-image,
	.b-iconbox,
	.b-accordion,
	.b-tabs,
	.b-gallery,
	.b-social,
	.b-form {
		width: var(--w-m, var(--w, auto));
		margin: var(--mar-m, var(--mar, 0));
	}

	.b-rule,
	.b-heading,
	.b-text,
	.b-list,
	.b-image,
	.b-iconbox {
		padding: var(--pad-m, var(--pad, 0));
	}

	.b-button {
		margin: var(--mar-m, var(--mar, 0));
	}

	.b-list {
		gap: var(--gap-m, var(--gap, 0));
	}

	.b-image img {
		width: var(--iw-m, var(--iw, 100%));
	}

	.m-b-iconbox--top { flex-direction: column; }
	.m-b-iconbox--left { flex-direction: row; }

	.b-iconbox,
	.b-list li,
	.b-list li > a {
		gap: var(--igap-m, var(--igap, 0));
	}

	.l-dir-m-column-reverse { flex-direction: column-reverse; }

	.b-icon {
		width: var(--w-m, var(--w, var(--isize-m, var(--isize, auto))));
	}

	.b-icon__glyph,
	.b-social a {
		width: var(--isize-m, var(--isize, auto));
		height: var(--isize-m, var(--isize, auto));
	}

	.b-icon.m-ta-start,
	.b-social.m-ta-start {
		justify-content: flex-start;
	}

	.b-image.m-ta-start img {
		margin-inline: 0;
	}

	.b-image.m-ta-center img {
		margin-inline: auto;
	}
	.l-order-m-0 { order: 0; }
	.l-order-m-1 { order: 1; }
	.l-order-m-2 { order: 2; }
	.l-order-m-3 { order: 3; }
	.l-order-m--1 { order: -1; }

	.m-ta-center { text-align: center; }
	.m-ta-start { text-align: left; }
	.m-ta-end { text-align: right; }

	.m-sgp-button--full {
		align-self: stretch;
	}
}


/* A single long word in a big heading ("Cybersecurity" in the mobile h1) is wider than
   a phone column; live lets it overhang without scrolling the page. */
.blocks-section {
	overflow-x: clip;
}

/* On dark surfaces the LinkedIn icon is white, as on the live person cards. */
:is(.bg-glass, .bg-raised, .bg-navy, .bg-blue, .bg-red, .bg-slate) .b-social a {
	color: var(--color-white);
}