/* ============================================================
   BLOCK GRID COMPONENTS
   ============================================================ */

/* ---------- Force Full Width ----------
   A full-width row spreads over the sidebar's space. StandardPage hoists runs of them
   at the top and bottom out of the sidebar row; these rules handle the ones left between
   ordinary rows. The sidebar row is a size container, so 25cqw is one sidebar column
   (col-lg-3 of 12) wherever the row sits. */

.umb-block-grid__layout-item.block--full-width:not(.block--full-width-row) {
	grid-column: 1 / -1;
}

.row:has(> .sidebar) {
	container-type: inline-size;
}

@media (min-width: 1024px) {
	/* Read by the content area so its background bleeds from wherever its block now starts. */
	.row:has(> .sidebar) .umb-block-grid__layout-item {
		--breakout-ml: 0px;
		--breakout-mr: 0px;
	}

	.row:has(> .sidebar) .umb-block-grid__layout-item.block--full-width:not(.block--full-width-row) {
		--breakout-ml: calc(50% - 50vw);
		--breakout-mr: calc(50% - 50vw);
	}

	.sidebar ~ .main-content .block--full-width:not(.block--full-width-row) {
		margin-left: -25cqw;
	}

	.main-content:has(~ .sidebar) .block--full-width:not(.block--full-width-row) {
		margin-right: -25cqw;
	}

	/* A row of several blocks widens as a unit: each block moves by its share of the sidebar
	   width, worked out from its column offset in the row (--block-row-offset) and its span. */
	.sidebar ~ .main-content .block--full-width-row {
		margin-left: calc(-25cqw * (var(--umb-block-grid--grid-columns) - var(--block-row-offset)) / var(--umb-block-grid--grid-columns));
		margin-right: calc(25cqw * (var(--umb-block-grid--grid-columns) - var(--block-row-offset) - var(--umb-block-grid--item-column-span)) / var(--umb-block-grid--grid-columns));
	}

	.main-content:has(~ .sidebar) .block--full-width-row {
		margin-left: calc(25cqw * var(--block-row-offset) / var(--umb-block-grid--grid-columns));
		margin-right: calc(-25cqw * (var(--block-row-offset) + var(--umb-block-grid--item-column-span)) / var(--umb-block-grid--grid-columns));
	}

	/* Only the outermost block breaks out; nested ones fill the space it already made. */
	.main-content .block--full-width .block--full-width,
	.main-content .block--full-width .block--full-width-row {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---------- Content area ---------- */

/* 100vw includes the scrollbar, so a bleed overshoots the page by half its width each side.
   clip rather than hidden: it trims that without making main a scroll container. */
main {
	overflow-x: clip;
}

.sypn-content-area--bleed {
	margin-left: var(--breakout-ml, calc(50% - 50vw));
	margin-right: var(--breakout-mr, calc(50% - 50vw));
}

.sypn-content-area--grey {
	background-color: var(--brand-charcoal-25);
}

.sypn-content-area--grey:not(.sypn-content-area--bleed) {
	padding-inline: var(--sypn-space-md);
}

.sypn-content-area--pad-small {
	padding-block: var(--sypn-space-md);
}

.sypn-content-area--pad-standard {
	padding-block: var(--sypn-space-lg);
}

@media (max-width: 767.98px) {
	.sypn-content-area--pad-small {
		padding-block: var(--sypn-space-sm);
	}

	.sypn-content-area--pad-standard {
		padding-block: var(--sypn-space-md);
	}
}

/* ---------- Grid spacing ----------
   Figma card groups sit 24px apart. Below 1024px Umbraco triples each span, which leaves
   a 3-column card at 9/12; instead blocks pair up on tablets and stack on phones. */

.umb-block-grid {
	--umb-block-grid--column-gap: var(--sypn-space-sm);
	--umb-block-grid--row-gap: var(--sypn-space-sm);
	--umb-block-grid--areas-column-gap: var(--sypn-space-sm);
	--umb-block-grid--areas-row-gap: var(--sypn-space-sm);
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.umb-block-grid__layout-item {
		grid-column-end: span round(up, var(--umb-block-grid--item-column-span, 1), 6);
	}
}

@media (max-width: 767.98px) {
	.umb-block-grid__layout-item {
		grid-column-end: span var(--umb-block-grid--grid-columns);
	}
}

/* ---------- Accordion (Figma: Accordion) ---------- */

.sypn-accordion-group {
	font-family: var(--sypn-font);
	color: var(--brand-asphalt-black);
}

.sypn-accordion-group--heading-beside {
	display: flex;
	gap: var(--sypn-space-sm);
}

.sypn-accordion-group__intro {
	flex: 0 0 calc((100% - var(--sypn-space-sm)) / 3);
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
}

.sypn-accordion-group__icon {
	width: 88px;
	height: 88px;
}

.sypn-accordion-group__title {
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
}

.sypn-accordion-group__columns {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--sypn-space-sm);
}

.sypn-accordion-group__column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
}

.sypn-accordion {
	border: 2px solid var(--brand-charcoal-25);
	border-radius: var(--sypn-radius-md);
	background: var(--neutral-white);
}

.sypn-accordion:has(.sypn-accordion__trigger:not(.collapsed)) {
	border-color: var(--brand-asphalt-black);
}

.sypn-accordion__trigger {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	width: 100%;
	padding: var(--sypn-space-sm);
	border: 0;
	border-radius: var(--sypn-radius-md);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.sypn-accordion__trigger:focus-visible {
	outline: var(--sypn-focus-outline);
	outline-offset: -2px;
	box-shadow: var(--sypn-focus-ring);
}

.sypn-accordion__title {
	flex: 1 1 auto;
}

.sypn-accordion__icon {
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border: 2px solid var(--brand-asphalt-black);
	border-radius: var(--sypn-radius-sm);
	background: var(--brand-molten-orange);
}

.sypn-accordion__trigger:hover .sypn-accordion__icon {
	background: var(--sypn-orange-600);
}

.sypn-accordion__icon img {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.sypn-accordion__trigger:not(.collapsed) .sypn-accordion__icon img {
	transform: rotate(180deg);
}

.sypn-accordion__body {
	padding: 0 var(--sypn-space-sm) var(--sypn-space-sm);
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 767.98px) {
	.sypn-accordion-group--heading-beside,
	.sypn-accordion-group__columns {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sypn-space-xxs);
	}

	.sypn-accordion-group--heading-beside {
		gap: var(--sypn-space-sm);
	}

	.sypn-accordion-group__column {
		gap: var(--sypn-space-xxs);
	}

	.sypn-accordion-group__icon {
		width: 44px;
		height: 44px;
	}

	.sypn-accordion-group__title {
		font-size: 24px;
		line-height: 32px;
	}

	.sypn-accordion__trigger {
		font-size: 20px;
		line-height: 28px;
	}
}

/* ---------- Card (Figma: Card) ---------- */

.sypn-card {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
	height: 100%;
	padding: var(--sypn-space-sm);
	border: 1px solid var(--brand-asphalt-grey-75);
	border-radius: var(--sypn-radius-md);
	background: var(--neutral-white);
	color: var(--brand-asphalt-black);
	font-family: var(--sypn-font);
	text-decoration: none;
}

.sypn-card:hover,
.sypn-card:focus-visible {
	border-color: var(--brand-asphalt-black);
	color: var(--brand-asphalt-black);
}

.sypn-card:focus-visible {
	outline: var(--sypn-focus-outline);
	box-shadow: var(--sypn-focus-ring);
}

.sypn-card:hover .sypn-arrow-btn,
.sypn-card:focus-visible .sypn-arrow-btn {
	background: var(--sypn-orange-mid);
}

.sypn-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 640 / 427;
	object-fit: cover;
	border-radius: var(--sypn-radius-md);
}

.sypn-card__icon {
	width: 32px;
	height: 32px;
}

.sypn-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
}

.sypn-card__title {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.sypn-card__text {
	font-size: 16px;
	line-height: 24px;
}

.sypn-card__arrow {
	align-self: flex-end;
	margin-top: auto;
}

/* Style: Dark (the home page's service cards) */
.sypn-card--dark {
	justify-content: center;
	gap: 4px;
	min-height: 212px;
	padding: 15px 26px;
	border: 0;
	background: var(--brand-asphalt-black);
}

.sypn-card--dark,
.sypn-card--dark:hover,
.sypn-card--dark:focus-visible {
	color: var(--neutral-white);
}

/* Style: Icon tile (the home page's "How can we help?" links) */
.sypn-card--tile {
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--sypn-space-sm) var(--sypn-space-xxs);
	border-color: var(--neutral-steam-grey);
	border-radius: var(--sypn-radius-lg);
	color: var(--basic-black);
	text-align: center;
}

.sypn-card--tile:hover,
.sypn-card--tile:focus-visible {
	border-color: var(--brand-molten-orange);
	color: var(--basic-black);
}

.sypn-card--tile .sypn-card__icon {
	width: 88px;
	height: 88px;
}

.sypn-card--tile .sypn-card__title {
	font-size: 20px;
	line-height: 28px;
}

.sypn-card--tile .sypn-card__arrow {
	display: none;
}

.sypn-card--dark .sypn-card__body,
.sypn-card--tile .sypn-card__body {
	flex: 0 0 auto;
}

.sypn-card--dark .sypn-card__arrow {
	margin-top: 0;
}

.sypn-card--dark:focus-visible,
.sypn-card--tile:focus-visible {
	outline-offset: -2px;
}

@media (max-width: 991.98px) {
	.sypn-card--dark {
		padding: 26px;
	}

	.sypn-card--tile {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--sypn-space-xxs);
		min-height: 64px;
		padding: var(--sypn-space-xs);
		text-align: left;
	}

	.sypn-card--tile .sypn-card__icon {
		width: 32px;
		height: 32px;
	}
}

@media (min-width: 768px) {
	.sypn-card--horizontal {
		flex-direction: row;
		gap: var(--sypn-space-sm);
	}

	.sypn-card--horizontal .sypn-card__image {
		flex: 0 0 40%;
		width: 40%;
		height: auto;
		min-height: 160px;
		aspect-ratio: auto;
	}
}

/* ---------- SYPN shape tail (Figma: SYPN Shape) ----------
   A flat strip then the notch along the bottom-right, cut with a mask so whatever is behind
   shows through. Blocks size it by overriding the --shape-tail-* properties, so they must come later. */

.sypn-shape {
	--shape-tail-height: 80px;
	--shape-tail-flat: 234px;
	--shape-tail-notch: 120px;
	padding-bottom: var(--shape-tail-height);
}

.sypn-shape--right {
	-webkit-mask:
		linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--shape-tail-height)) no-repeat,
		linear-gradient(#000 0 0) 100% 100% / var(--shape-tail-flat) var(--shape-tail-height) no-repeat,
		url("../images/blocks/shape-notch-right.svg") right var(--shape-tail-flat) bottom 0 / var(--shape-tail-notch) var(--shape-tail-height) no-repeat;
	mask:
		linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--shape-tail-height)) no-repeat,
		linear-gradient(#000 0 0) 100% 100% / var(--shape-tail-flat) var(--shape-tail-height) no-repeat,
		url("../images/blocks/shape-notch-right.svg") right var(--shape-tail-flat) bottom 0 / var(--shape-tail-notch) var(--shape-tail-height) no-repeat;
}

/* Figma block buttons carry a 20px arrow; site.css sizes button icons at 16px. */
.umb-block-grid .sypn-btn img {
	width: 20px;
	height: 20px;
}

/* ---------- Banner (Figma: Hero/Banners) ----------
   One block, three layouts, with the link shape below when the editor picks one. */

.sypn-banner {
	position: relative;
	display: flex;
	background: var(--brand-molten-orange);
	color: var(--brand-asphalt-black);
	font-family: var(--sypn-font);
}

.sypn-banner--dark {
	background: var(--brand-asphalt-black);
	color: var(--neutral-white);
}

.sypn-banner__panel {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-lg) var(--sypn-gutter);
}

.sypn-banner__heading {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
}

.sypn-banner__icon {
	width: 88px;
	height: 88px;
}

.sypn-banner__title {
	margin: 0;
	font-size: 48px;
	line-height: 56px;
	font-weight: 700;
}

.sypn-banner__text {
	max-width: 754px;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.sypn-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sypn-space-xs);
	margin-top: var(--sypn-space-xxs);
}

/* An ink button vanishes on the dark panel without a lighter edge. */
.sypn-banner--dark .sypn-btn--secondary {
	border-color: var(--brand-asphalt-black-50);
}

/* Image beside text (Campaign banner) */
.sypn-banner--beside {
	min-height: 378px;
}

.sypn-banner--beside .sypn-banner__panel {
	flex-basis: 50%;
}

.sypn-banner__media {
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
}

.sypn-banner__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 var(--sypn-radius-md) var(--sypn-radius-md) 0;
}

/* Text on image (Shape image banner) */
.sypn-banner--on-image {
	min-height: 232px;
	background: var(--brand-asphalt-black);
	color: var(--neutral-white);
}

.sypn-banner__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sypn-banner--on-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(27 27 28 / 50%);
}

@media (max-width: 767.98px) {
	.sypn-banner__panel {
		padding: var(--sypn-space-sm) var(--sypn-gutter);
	}

	.sypn-banner__title {
		font-size: 32px;
		line-height: 40px;
	}

	.sypn-banner--on-image .sypn-banner__title {
		font-size: 40px;
		line-height: 48px;
	}

	.sypn-banner__icon {
		width: 40px;
		height: 40px;
	}

	/* Mobile campaign: text above the photo, and Figma drops the tail. */
	.sypn-banner--beside {
		flex-direction: column;
		min-height: 0;
	}

	.sypn-banner--beside + .sypn-banner__shape {
		display: none;
	}

	.sypn-banner__media {
		aspect-ratio: 640 / 427;
	}

	.sypn-banner__media img {
		border-radius: 0;
	}
}

/* ---------- Image grid (Figma: Image grid) ---------- */

.sypn-image-grid {
	display: grid;
	grid-template-columns: repeat(var(--image-grid-columns), minmax(0, 1fr));
	gap: var(--sypn-space-xs);
}

.sypn-image-grid img {
	width: 100%;
	height: auto;
	aspect-ratio: 276 / 192;
	object-fit: cover;
	border-radius: 4px;
}

.sypn-image-grid img:only-child {
	aspect-ratio: auto;
}

@media (max-width: 767.98px) {
	.sypn-image-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Button block (Figma: Buttons) ---------- */

.sypn-button-block {
	display: flex;
}

.sypn-button-block--right {
	justify-content: flex-end;
}

/* ---------- Action card (Figma: Action card) ----------
   Stacked with half-width buttons (Figma mobile), then a single row once the card itself is
   wide enough, so a card in a 4-column cell keeps the stacked look on desktop too. */

.sypn-action-card {
	container-type: inline-size;
	height: 100%;
	font-family: var(--sypn-font);
}

.sypn-action-card__inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	height: 100%;
	padding: var(--sypn-space-xs);
	border: 1px solid var(--brand-charcoal-50);
	border-radius: 4px;
	background: var(--neutral-white);
	color: var(--brand-asphalt-black);
}

.sypn-action-card__content {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	gap: var(--sypn-space-sm);
	min-width: 0;
}

.sypn-action-card__icon {
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	border-radius: var(--sypn-radius-sm);
	background: var(--brand-asphalt-black);
}

.sypn-action-card__icon img {
	width: 32px;
	height: 32px;
	filter: brightness(0) invert(1);
}

.sypn-action-card__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sypn-action-card__heading,
.sypn-action-card__subtext {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.sypn-action-card__heading {
	font-weight: 700;
}

.sypn-action-card__subtext {
	color: var(--brand-asphalt-grey-75);
}

.sypn-action-card__actions {
	display: flex;
	gap: 10px;
}

.sypn-action-card__actions .sypn-btn {
	flex: 1 1 0;
	min-width: 0;
}

@container (min-width: 640px) {
	.sypn-action-card__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--sypn-space-sm);
	}

	.sypn-action-card__content {
		align-items: center;
	}

	.sypn-action-card__actions .sypn-btn {
		flex: none;
	}
}

.sypn-action-list .umb-block-list {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
}

/* ---------- Tick list (Figma: Tick list banner) ----------
   White panel with the shape tail: shows on a coloured section, harmless on white. */

.sypn-tick-panel {
	display: flex;
	background: var(--neutral-white);
	color: var(--brand-asphalt-black);
	font-family: var(--sypn-font);
}

.sypn-tick-panel__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sypn-space-sm);
	padding: var(--sypn-space-lg) var(--sypn-gutter) var(--sypn-space-sm);
}

.sypn-tick-panel__heading {
	margin: 0;
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
}

.sypn-tick-panel__subtext {
	max-width: 754px;
	margin: 0;
	font-size: 20px;
	line-height: 28px;
}

.sypn-tick-panel__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sypn-tick-panel__list li {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
}

.sypn-tick-panel__list img {
	flex: 0 0 44px;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 10px;
}

.sypn-tick-panel__actions,
.sypn-tick-panel__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sypn-space-xxs);
}

.sypn-tick-panel__badges img {
	display: block;
	width: auto;
	height: 40px;
}

.sypn-tick-panel__media {
	flex: 0 0 min(488px, 40%);
	min-height: 320px;
}

.sypn-tick-panel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.sypn-tick-panel {
		flex-direction: column;
	}

	.sypn-tick-panel__body {
		gap: var(--sypn-space-xs);
		padding: var(--sypn-space-sm) var(--sypn-gutter);
	}

	.sypn-tick-panel__heading {
		font-size: 24px;
		line-height: 32px;
	}

	.sypn-tick-panel__subtext,
	.sypn-tick-panel__list li {
		font-size: 16px;
		line-height: 24px;
	}

	.sypn-tick-panel__media {
		order: -1;
		flex: none;
		min-height: 0;
		aspect-ratio: 1;
	}
}

/* ---------- Timeline (Figma: Timeline) ----------
   Mobile-first: intro above a vertical track. Each item draws the line from its marker to the
   next (the last one to the end ring), so the line never needs measuring. Layouts only spread
   out when the block itself is wide enough, so a timeline beside the sidebar stays readable. */

.sypn-timeline {
	container-type: inline-size;
	color: var(--brand-asphalt-black);
	font-family: var(--sypn-font);
}

.sypn-timeline__inner {
	--timeline-marker: 48px;
	--timeline-colour: var(--brand-asphalt-black);
	--timeline-marker-text: var(--neutral-white);
	--timeline-gap: var(--sypn-space-md);
	--timeline-tail: 56px;
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-lg);
}

.sypn-timeline--orange .sypn-timeline__inner {
	--timeline-colour: var(--brand-molten-orange);
	--timeline-marker-text: var(--brand-asphalt-black);
}

.sypn-timeline__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sypn-space-sm);
}

.sypn-timeline__heading {
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
}

.sypn-timeline__text {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.sypn-timeline__track {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--timeline-gap);
	margin: 0;
	padding: 0 0 var(--timeline-tail);
	list-style: none;
}

.sypn-timeline__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--sypn-space-xs);
}

.sypn-timeline__item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(-1 * var(--timeline-gap));
	left: calc(var(--timeline-marker) / 2 - 2px);
	width: 4px;
	background: var(--timeline-colour);
}

.sypn-timeline__item:last-child::before {
	bottom: calc(-1 * var(--timeline-tail));
}

.sypn-timeline__track::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(var(--timeline-marker) / 2 - 14px);
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border: 4px solid var(--timeline-colour);
	border-radius: 50%;
	background: var(--neutral-white);
}

.sypn-timeline__marker {
	position: relative;
	z-index: 1;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--timeline-marker);
	height: var(--timeline-marker);
	border-radius: 50%;
	background: var(--timeline-colour);
	color: var(--timeline-marker-text);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.sypn-timeline__marker img {
	width: 24px;
	height: 24px;
}

.sypn-timeline--black .sypn-timeline__marker img {
	filter: brightness(0) invert(1);
}

.sypn-timeline__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-top: calc(var(--timeline-marker) / 2 - 16px);
}

.sypn-timeline__item-heading {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.sypn-timeline__item-text {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--brand-asphalt-black-75);
}

/* Flat: no markers or line, just ruled rows. */
.sypn-timeline--flat .sypn-timeline__track {
	gap: 0;
	padding: 0;
}

.sypn-timeline--flat .sypn-timeline__track::after,
.sypn-timeline--flat .sypn-timeline__item::before {
	content: none;
}

.sypn-timeline--flat .sypn-timeline__item {
	border-top: 1px solid var(--brand-charcoal-25);
}

.sypn-timeline--flat .sypn-timeline__body {
	padding: var(--sypn-space-xs) var(--sypn-space-xxs) var(--sypn-space-md);
}

@container (min-width: 900px) {
	.sypn-timeline__inner {
		--timeline-marker: 82px;
		--timeline-gap: var(--sypn-space-lg);
		--timeline-tail: 72px;
	}

	.sypn-timeline__heading {
		font-size: 48px;
		line-height: 56px;
	}

	.sypn-timeline__marker {
		font-size: 40px;
		line-height: 48px;
	}

	.sypn-timeline__marker img {
		width: 32px;
		height: 32px;
	}

	.sypn-timeline__item {
		gap: var(--sypn-space-md);
	}

	.sypn-timeline--side-vertical .sypn-timeline__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: start;
		gap: var(--sypn-space-lg);
	}

	.sypn-timeline--flat .sypn-timeline__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Horizontal tracks: the line runs along the marker centres to a ring after the last column. */
	.sypn-timeline--side-horizontal .sypn-timeline__track,
	.sypn-timeline--below-horizontal .sypn-timeline__track {
		--timeline-gap: var(--sypn-space-xs);
		--timeline-tail: 28px;
		flex-direction: row;
		padding: 0 var(--timeline-tail) 0 0;
	}

	.sypn-timeline--side-horizontal .sypn-timeline__item,
	.sypn-timeline--below-horizontal .sypn-timeline__item {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		gap: var(--sypn-space-sm);
	}

	.sypn-timeline--side-horizontal .sypn-timeline__item::before,
	.sypn-timeline--below-horizontal .sypn-timeline__item::before {
		top: calc(var(--timeline-marker) / 2 - 2px);
		right: calc(-1 * var(--timeline-gap));
		bottom: auto;
		left: 0;
		width: auto;
		height: 4px;
	}

	.sypn-timeline--side-horizontal .sypn-timeline__item:last-child::before,
	.sypn-timeline--below-horizontal .sypn-timeline__item:last-child::before {
		right: calc(-1 * var(--timeline-tail));
	}

	.sypn-timeline--side-horizontal .sypn-timeline__track::after,
	.sypn-timeline--below-horizontal .sypn-timeline__track::after {
		top: calc(var(--timeline-marker) / 2 - 14px);
		right: 0;
		bottom: auto;
		left: auto;
	}

	.sypn-timeline--side-horizontal .sypn-timeline__body,
	.sypn-timeline--below-horizontal .sypn-timeline__body {
		padding: 12px 16px;
	}
}

/* A row of four beside the intro needs a full-width block; beside the sidebar it sits below. */
@container (min-width: 1200px) {
	.sypn-timeline--side-horizontal .sypn-timeline__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: start;
		gap: var(--sypn-space-lg);
	}
}

/* ---------- Text and quote (Figma: Text and quote) ---------- */

.sypn-text-quote {
	container-type: inline-size;
	color: var(--brand-asphalt-black);
	font-family: var(--sypn-font);
}

.sypn-text-quote--dark {
	padding: var(--sypn-space-lg);
	background: var(--brand-asphalt-black);
	color: var(--neutral-white);
}

.sypn-text-quote__inner {
	display: grid;
	align-items: start;
	gap: var(--sypn-space-md);
}

.sypn-text-quote--quote-left .sypn-text-quote__quote {
	order: -1;
}

.sypn-text-quote__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sypn-space-xs);
}

.sypn-text-quote__heading {
	margin: 0 0 var(--sypn-space-xxs);
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
}

.sypn-text-quote__text {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.sypn-text-quote__body .sypn-btn {
	margin-top: var(--sypn-space-xs);
}

.sypn-text-quote__quote {
	--shape-tail-height: 24px;
	--shape-tail-flat: 97px;
	--shape-tail-notch: 36px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sypn-space-xs);
	margin: 0;
	padding: var(--sypn-space-md) var(--sypn-space-md) calc(var(--sypn-space-md) + var(--shape-tail-height));
	background: var(--brand-molten-orange);
	color: var(--brand-asphalt-black);
}

.sypn-text-quote__mark {
	width: 64px;
	height: 40px;
}

.sypn-text-quote__quote-text {
	margin: 0;
	font-size: 20px;
	line-height: 28px;
	white-space: pre-line;
}

.sypn-text-quote__attribution {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sypn-space-xxs);
	font-size: 16px;
	line-height: 24px;
}

.sypn-text-quote__signature {
	width: auto;
	height: 56px;
}

@container (min-width: 768px) {
	.sypn-text-quote__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sypn-space-lg);
	}

	.sypn-text-quote--full .sypn-text-quote__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sypn-text-quote__heading {
		font-size: 40px;
		line-height: 48px;
	}
}

@media (max-width: 767.98px) {
	.sypn-text-quote--dark {
		padding: var(--sypn-space-md) var(--sypn-space-xs);
	}
}

/* =========================================================
   Month View Calendar (Figma: Calendar 3634:3493). Markup is drawn by
   scripts/month-view-calendar.js; the class names are SYMCA's.
   ========================================================= */

.month-view-calendar {
	container-type: inline-size;
	color: var(--brand-asphalt-black);
}

.mvc-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sypn-space-xs);
	padding-bottom: var(--sypn-space-xs);
}

.mvc-control-group {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xxs);
	width: 160px;
}

.mvc-control-label {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.mvc-select-wrap {
	position: relative;
	display: block;
}

.mvc-select {
	width: 100%;
	padding: 11px 40px 11px 12px;
	border: 1px solid var(--brand-asphalt-black-50);
	border-radius: var(--sypn-radius-sm);
	background: var(--neutral-white);
	color: var(--brand-asphalt-black-75);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mvc-select:focus {
	border-color: var(--brand-asphalt-black);
	box-shadow: inset 0 0 0 1px var(--brand-asphalt-black);
}

.mvc-select-wrap img {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%) rotate(-90deg);
	pointer-events: none;
}

.mvc-nav-buttons {
	display: flex;
	gap: var(--sypn-space-xxs);
}

.mvc-nav-buttons .sypn-btn {
	padding-top: 10px;
	padding-bottom: 10px;
}

.mvc-nav-buttons .sypn-btn img {
	width: 20px;
	height: 20px;
}

.mvc-btn-icon--left {
	transform: rotate(180deg);
}

.mvc-tabs {
	display: flex;
}

.mvc-tab {
	height: 48px;
	padding: 8px 16px;
	border: 0;
	border-bottom: 1px solid var(--brand-charcoal-50);
	background: var(--brand-charcoal-25);
	color: var(--brand-asphalt-black);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
}

.mvc-tab:first-child {
	border-top-left-radius: 4px;
}

.mvc-tab:last-child {
	border-top-right-radius: var(--sypn-radius-md);
}

.mvc-tab.active {
	border-bottom: 2px solid var(--brand-molten-orange);
	background: var(--neutral-white);
	font-weight: 700;
}

.mvc-view-heading {
	margin: 0;
	padding: 13px 15px;
	border-bottom: 1px solid var(--brand-charcoal-25);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

.mvc-calendar-table,
.mvc-week-table,
.mvc-events-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 24px;
}

.mvc-calendar-table {
	table-layout: fixed;
}

.mvc-calendar-table th,
.mvc-events-table th {
	padding: 9px 15px;
	border-bottom: 1px solid var(--brand-asphalt-black-75);
	background: var(--brand-asphalt-black);
	color: var(--neutral-white);
	font-weight: 700;
	text-align: center;
}

.mvc-cell {
	position: relative;
	padding: 9px 15px;
	border-bottom: 1px solid var(--brand-charcoal-25);
	text-align: center;
	vertical-align: top;
}

.mvc-day-number {
	position: relative;
	display: block;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: 2px;
}

.mvc-cell--other-month {
	color: var(--brand-asphalt-black-75);
}

/* Today and the hovered day are rounded boxes inside the cell; a collapsed table cell can't be
   rounded itself. */
.mvc-cell--today::before,
.mvc-cell:has(.mvc-dots):hover::before {
	content: "";
	position: absolute;
	inset: 4px 2px;
	border-radius: var(--sypn-radius-md);
	pointer-events: none;
}

.mvc-cell--today::before {
	border: 1px solid var(--brand-asphalt-black);
}

.mvc-view-month:not(.is-expanded) .mvc-cell:has(.mvc-dots) {
	cursor: pointer;
}

.mvc-view-month:not(.is-expanded) .mvc-cell:has(.mvc-dots):hover::before {
	background: var(--brand-charcoal-25);
}

.mvc-dots {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 10px;
}

.mvc-event-dot {
	position: relative;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: var(--sypn-radius-sm);
	background: var(--brand-molten-orange);
	cursor: pointer;
}

/* 24px target for an 18px marker. */
.mvc-event-dot::before {
	content: "";
	position: absolute;
	inset: -3px;
}

.mvc-event-dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand-asphalt-black);
	transform: translate(-50%, -50%);
}

.mvc-view-month .mvc-events,
.mvc-view-month.is-expanded .mvc-dots {
	display: none;
}

.mvc-view-month.is-expanded .mvc-events {
	position: relative;
	display: block;
}

.mvc-event {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: var(--sypn-space-xxs);
	padding: 4px;
	border-radius: var(--sypn-radius-md);
	background: var(--brand-charcoal-25);
	color: var(--brand-asphalt-black);
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mvc-event-time,
.mvc-event-title {
	display: block;
}

.mvc-event-link:hover {
	background: var(--brand-charcoal-50);
	color: var(--brand-asphalt-black);
}

.mvc-event-arrow {
	display: flex;
	align-self: flex-end;
}

.mvc-week-table th,
.mvc-week-table td {
	padding: 8px;
	border-bottom: 1px solid var(--brand-charcoal-25);
	vertical-align: middle;
}

.mvc-week-table .mvc-week-day {
	width: 40px;
	padding-left: 15px;
	font-weight: 400;
}

.mvc-week-row--today .mvc-week-day {
	font-weight: 700;
}

.mvc-week-table td {
	height: 56px;
}

.mvc-week-table .mvc-event {
	margin: 4px 0;
}

.mvc-events-table th,
.mvc-events-table td {
	padding: 8px;
	text-align: left;
	vertical-align: top;
}

.mvc-events-table tbody tr:nth-child(even) {
	background: var(--brand-charcoal-25);
}

.mvc-events-table a {
	color: var(--brand-asphalt-black);
	text-decoration: underline;
}

.mvc-no-events {
	margin: 0;
	padding: var(--sypn-space-xs) 15px;
}

@container (max-width: 599.98px) {
	.mvc-controls {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sypn-space-xxs);
	}

	.mvc-control-group {
		width: auto;
	}

	.mvc-nav-buttons {
		display: contents;
	}

	.mvc-nav-buttons .sypn-btn {
		padding-right: 8px;
		padding-left: 8px;
	}

	.mvc-calendar-table th {
		padding: 9px 0;
		border-bottom-color: var(--brand-charcoal-50);
		background: var(--brand-charcoal-25);
		color: var(--brand-asphalt-black);
		font-size: 0;
	}

	.mvc-calendar-table th::before {
		content: attr(data-short);
		font-size: 16px;
	}

	.mvc-cell {
		padding: 9px 0;
	}

	/* Open on a phone, the month becomes a list of its days (Figma: Mobile, Month - Open). */
	.mvc-view-month.is-expanded thead {
		display: none;
	}

	.mvc-view-month.is-expanded :is(table, tbody, tr) {
		display: block;
	}

	.mvc-view-month.is-expanded .mvc-cell {
		display: flex;
		align-items: center;
		gap: var(--sypn-space-xs);
		min-height: 48px;
		padding: 4px 8px 4px 15px;
		text-align: left;
	}

	.mvc-view-month.is-expanded .mvc-cell--other-month {
		display: none;
	}

	.mvc-view-month.is-expanded .mvc-day-number {
		flex: 0 0 24px;
	}

	.mvc-view-month.is-expanded .mvc-events {
		flex: 1 1 auto;
	}

	.mvc-view-month.is-expanded .mvc-event:first-child {
		margin-top: 4px;
	}

	.mvc-events-table thead {
		display: none;
	}

	.mvc-events-table :is(tbody, tr, td) {
		display: block;
	}

	.mvc-events-table tr {
		padding: 8px 0;
	}

	.mvc-events-table td {
		padding: 0 15px;
	}

	.mvc-events-table td:first-child {
		font-weight: 700;
	}
}

/* =========================================================
   Carousels: slider track and nav, dark and grey bands, media and news
   cards. Moved from homepage.css so the Card Carousel and Latest News
   blocks work on any page; the homepage keeps its own mobile stacking.
   ========================================================= */

.sypn-section-title {
	flex: 1 0 0;
	min-width: 0;
	font-size: 48px;
	line-height: 56px;
}

.sypn-carousel-nav {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
}

.sypn-carousel-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border: 2px solid currentColor;
	border-radius: 4px;
	background: none;
	color: inherit;
	cursor: pointer;
}

.sypn-carousel-nav img {
	width: 16px;
	height: 16px;
}

.sypn-carousel-nav .material-symbols-outlined {
	color: var(--neutral-white);
	font-size: 16px;
}

.sypn-carousel-nav .sypn-carousel-next img,
.sypn-carousel-nav .sypn-carousel-next .material-symbols-outlined {
	transform: rotate(180deg);
}

.sypn-news .sypn-carousel-nav img {
	filter: brightness(0);
}

.sypn-news .sypn-carousel-nav .material-symbols-outlined {
	color: var(--basic-black);
}

.sypn-carousel-nav[hidden] {
	display: none;
}

.sypn-carousel-nav--slider {
	justify-content: center;
	gap: var(--sypn-space-sm);
	margin-top: var(--sypn-space-sm);
}

.sypn-carousel-nav--slider button {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--sypn-radius-sm);
}

.sypn-carousel-nav--slider img {
	width: 12px;
	height: 8px;
}

.sypn-carousel-nav--slider .material-symbols-outlined {
	margin: -4px -2px;
}

.sypn-carousel-nav--slider button[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.sypn-carousel-progress {
	position: relative;
	flex: 0 1 400px;
	min-width: 0;
	height: 20px;
	border-radius: 10px;
	background: var(--neutral-white);
	overflow: hidden;
}

.sypn-carousel-progress span {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc((100% - 8px) * var(--carousel-share, 0.25));
	border-radius: 6px;
	background: var(--brand-molten-orange);
	transform: translateX(var(--carousel-offset, 0px));
}

.sypn-news .sypn-carousel-progress span {
	background: var(--brand-asphalt-black);
}

.sypn-track {
	--track-gap: var(--sypn-space-sm);
	--track-cols: 3;
	display: flex;
	gap: var(--track-gap);
	align-items: stretch;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sypn-track::-webkit-scrollbar {
	display: none;
}

.sypn-track > * {
	flex: 0 0 calc((100% - var(--track-gap) * (var(--track-cols) - 1)) / var(--track-cols));
	min-width: 0;
	scroll-snap-align: start;
}

/* =========================================================
   Travel information (dark band)
   ========================================================= */

.sypn-travel {
	background: var(--brand-asphalt-black);
	color: var(--neutral-white);
	padding: var(--sypn-space-lg) var(--sypn-gutter);
}

.sypn-travel .sypn-section-head,
.sypn-travel .sypn-section-title {
	margin-bottom: var(--sypn-space-sm);
}

.sypn-media-card {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-sm);
	border: 1px solid var(--neutral-steam-grey);
	border-radius: var(--sypn-radius-md);
	background: var(--neutral-white);
	color: var(--brand-asphalt-black);
	text-decoration: none;
}

.sypn-media-card:hover,
.sypn-media-card:focus-visible {
	color: var(--brand-asphalt-black);
}

.sypn-media-card:hover .sypn-arrow-btn,
.sypn-media-card:focus-visible .sypn-arrow-btn {
	background: var(--sypn-orange-mid);
}

.sypn-media-card > img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--sypn-radius-md);
}

.sypn-media-card h3 {
	font-size: 24px;
	line-height: 32px;
	color: var(--basic-black);
}

.sypn-media-card p {
	margin: 0;
	flex: 1 0 auto;
	font-size: 16px;
	line-height: 24px;
}

/* =========================================================
   News and updates (grey band)
   ========================================================= */

.sypn-news {
	background: var(--brand-charcoal-25);
	padding: var(--sypn-space-lg) var(--sypn-gutter) 75px;
}

.sypn-news .sypn-section-head,
.sypn-news .sypn-section-title {
	margin-bottom: var(--sypn-space-sm);
}

.sypn-section-head.sypn-section-head--link {
	align-items: flex-start;
	gap: var(--sypn-space-sm);
}

.sypn-section-head.sypn-section-head--link > .sypn-section-title {
	margin-bottom: 0;
}

.sypn-section-head--link > .sypn-btn {
	flex-shrink: 0;
}

@media (max-width: 991.98px) {
	.sypn-section-head--link > .sypn-btn {
		display: none;
	}

	.sypn-travel .sypn-section-head--link {
		margin-bottom: var(--sypn-space-lg);
	}
}

.sypn-news-card {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-sm);
	border-radius: var(--sypn-radius-md);
	background: var(--neutral-white);
	color: var(--brand-asphalt-black);
	text-decoration: none;
}

.sypn-news-card:hover,
.sypn-news-card:focus-visible {
	color: var(--brand-asphalt-black);
}

.sypn-news-head {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	min-height: 64px;
}

.sypn-news-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 64px;
	border-radius: var(--sypn-radius-md);
	background: var(--brand-asphalt-black);
	flex-shrink: 0;
}

.sypn-news-icon img {
	width: 32px;
	height: 32px;
}

.sypn-news-tag {
	padding: 6px;
	border: 2px solid var(--brand-asphalt-black);
	border-radius: var(--sypn-radius-md);
	background: var(--neutral-white);
	color: var(--brand-asphalt-black);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}

.sypn-news-card h3 {
	font-size: 20px;
	line-height: 28px;
	color: var(--basic-black);
}

.sypn-news-when {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--brand-asphalt-grey);
}

.sypn-news-text {
	margin: 0;
	flex: 1 0 auto;
	font-size: 16px;
	line-height: 24px;
}

.sypn-news-more {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: underline;
}

.sypn-news-more img {
	width: 16px;
	height: 16px;
}

.sypn-news-more .material-symbols-outlined {
	color: var(--brand-molten-orange);
	font-size: 16px;
}

.sypn-carousel-nav button:focus-visible,
.sypn-media-card:focus-visible,
.sypn-news-card:focus-visible {
	outline: var(--sypn-focus-outline);
	outline-offset: -2px;
	box-shadow: var(--sypn-focus-ring);
}

@media (max-width: 991.98px) {
	.sypn-section-title {
		font-size: 32px;
		line-height: 40px;
	}

	.sypn-news {
		padding-bottom: var(--sypn-space-lg);
	}

	.sypn-news .sypn-track > * {
		flex: 0 0 100%;
	}

	.sypn-carousel-progress {
		flex: 1 1 auto;
	}
}

/* =========================================================
   Card Carousel and Latest News blocks (Figma: Card block carousel 3558:12052).
   The band, track and cards are the shared carousel rules above.
   ========================================================= */

.sypn-card-carousel__head {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	margin-bottom: var(--sypn-space-sm);
}

/* h2 in the selector so it beats the homepage band rules that space the title on its own. */
.sypn-card-carousel__head > h2.sypn-section-title {
	margin: 0;
	font-weight: 700;
}

.sypn-card-carousel__head .sypn-btn img {
	width: 20px;
	height: 20px;
}

/* Figma shows a campaign banner at 1080 of 1328, so the next one peeks in. */
.sypn-card-carousel--campaign .sypn-track > * {
	flex-basis: 81%;
}

.sypn-card-carousel__slide {
	--link-shape-next: initial;
	--link-shape-joined: 0;
	display: flex;
	flex-direction: column;
}

.sypn-card-carousel__slide .sypn-banner {
	flex: 1 1 auto;
}

.sypn-card-carousel__image {
	display: block;
	border-radius: var(--sypn-radius-md);
	overflow: hidden;
}

img.sypn-card-carousel__image,
.sypn-card-carousel__image img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}

/* Beside a sidebar the track is ~850px, too narrow for four cards a view. Desktop only: tablet
   and phone keep one a view from the rules below. */
.sypn-card-carousel {
	container-type: inline-size;
}

@media (min-width: 992px) {
	@container (max-width: 899.98px) {
		:is(.sypn-card-carousel--news, .sypn-card-carousel--images) .sypn-track > * {
			flex-basis: calc((100% - var(--track-gap) * 2) / 3);
		}
	}

	@container (max-width: 639.98px) {
		.sypn-card-carousel:not(.sypn-card-carousel--campaign) .sypn-track > * {
			flex-basis: calc((100% - var(--track-gap)) / 2);
		}
	}
}

@media (max-width: 991.98px) {
	.sypn-card-carousel .sypn-track > * {
		flex: 0 0 100%;
	}

	.sypn-card-carousel--campaign .sypn-track > * {
		flex-basis: 92%;
	}
}

@media (max-width: 767.98px) {
	.sypn-card-carousel__head {
		flex-direction: column;
		align-items: stretch;
	}
}

/* =========================================================
   Embed (iframe), Page Info and Contact Form Card. Ported from SYMCA; no Figma design, so these
   are drawn from the site tokens.
   ========================================================= */

.iframe-block {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
	max-width: var(--iframe-max-width, 100%);
}

.iframe-block__viewport {
	position: relative;
	display: flex;
	border-radius: var(--sypn-radius-md);
	overflow: hidden;
}

.iframe-block__frame {
	width: 100%;
	height: var(--iframe-height, 450px);
	border: 0;
}

/* Greys out the dark title bar Google My Maps draws over the map. */
.iframe-block--mymaps .iframe-block__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 67px;
	pointer-events: none;
	backdrop-filter: grayscale(1) contrast(4);
}

.iframe-block__actions {
	display: flex;
	justify-content: flex-end;
}

.iframe-block.is-fullview {
	position: fixed;
	inset: 0;
	z-index: 1050;
	max-width: none;
	padding: var(--sypn-space-xs);
	background: var(--neutral-white);
}

.iframe-block.is-fullview .iframe-block__viewport {
	flex: 1 1 auto;
}

.iframe-block.is-fullview .iframe-block__frame {
	height: auto;
}

.iframe-block.is-fullview .iframe-block__actions {
	order: -1;
}

body.iframe-fullview-open {
	overflow: hidden;
}

.sypn-page-info {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--sypn-space-xxs);
	margin: 0;
	color: var(--brand-asphalt-black-75);
	font-size: 14px;
	line-height: 20px;
}

.sypn-page-info > span + span {
	padding-left: var(--sypn-space-xxs);
	border-left: 1px solid currentColor;
}

.sypn-contact-card {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
	color: var(--brand-asphalt-black);
}

.sypn-contact-card__heading,
.sypn-contact-card p {
	margin: 0;
}

.sypn-contact-card__text {
	font-size: 18px;
	line-height: 28px;
}

.sypn-contact-card__row {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
	font-size: 18px;
	line-height: 28px;
}

.sypn-contact-card__row svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--brand-molten-orange);
}

.sypn-contact-card__row a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

.sypn-contact-card__row a:hover {
	text-decoration-thickness: 2px;
}

@media (max-width: 767.98px) {
	.sypn-contact-card__text,
	.sypn-contact-card__row {
		font-size: 16px;
		line-height: 24px;
	}
}