.sv-image {
	margin: 0;
}

/* In a row of a column arranged side by side, an image fits its size (ADR 0028). */
:where(.sv-image) {
	--sv-row-grow: 0;
	--sv-row-basis: auto;
	--sv-row-min: 0px;
}

/* Rounded like other media by default (site Corners setting); the element's own
   "Rounded corners" choice wins (zero specificity here). */
:where(.sv-image) {
	border-radius: var(--sv-radius-lg);
}

/* The frame (or the link) holds the photo, the text on it and the arrow. */
.sv-image__frame {
	position: relative;
	display: inline-block;
	max-inline-size: 100%;
	overflow: hidden;
	border-radius: inherit;
	vertical-align: middle;
}

.sv-image__img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: inherit;
}

/* Fixed shapes crop to fill (the rest of the photo is hidden, not squashed). */
.sv-image:not(.sv-image--aspect-auto) .sv-image__frame {
	display: block;
}

.sv-image:not(.sv-image--aspect-auto) .sv-image__img {
	inline-size: 100%;
	object-fit: cover;
}

.sv-image--aspect-square .sv-image__img {
	aspect-ratio: 1 / 1;
}

.sv-image--aspect-landscape .sv-image__img {
	aspect-ratio: 4 / 3;
}

.sv-image--aspect-wide .sv-image__img {
	aspect-ratio: 16 / 9;
}

.sv-image--aspect-portrait .sv-image__img {
	aspect-ratio: 3 / 4;
}

/*
 * Size (ADR 0028): 10 (the usual) is the full width of its column, 0 is 40px, in even steps;
 * measured against the column (cqi), so it is the same side by side or one under another,
 * and never wider than its place. Alignment places a smaller image. Fill ignores it.
 * In a column that fits its content, against the space that column would fill (--sv-fit-base, ADR 0029).
 */
.sv-image--size-0 { --sv-image-scale: 0; }
.sv-image--size-1 { --sv-image-scale: 0.1; }
.sv-image--size-2 { --sv-image-scale: 0.2; }
.sv-image--size-3 { --sv-image-scale: 0.3; }
.sv-image--size-4 { --sv-image-scale: 0.4; }
.sv-image--size-5 { --sv-image-scale: 0.5; }
.sv-image--size-6 { --sv-image-scale: 0.6; }
.sv-image--size-7 { --sv-image-scale: 0.7; }
.sv-image--size-8 { --sv-image-scale: 0.8; }
.sv-image--size-9 { --sv-image-scale: 0.9; }

.sv-image:not(.sv-image--size-10, .sv-image--aspect-fill, .sv-image--aspect-auto) .sv-image__frame {
	display: inline-block;
	inline-size: calc(40px + (var(--sv-fit-base, 100cqi) - 40px) * var(--sv-image-scale, 1));
	max-inline-size: 100%;
}

/* A smaller image's box hugs it: placed by its alignment one under another (its Width is Fit,
   ADR 0031), by the line side by side. In a grid cell it keeps the cell's width (utilities.css). */
.sv-image:not(.sv-image--size-10, .sv-image--aspect-fill) {
	inline-size: fit-content;
}

:where(.sv-image:not(.sv-image--size-10, .sv-image--aspect-fill)) {
	--sv-w-self: var(--sv-justify, start);
}

/* Original shape: never larger than the photo itself. The image's own box keeps the same limit, so
   side by side (where the frame's percentage can't limit it) the picture still follows its Size. */
.sv-image--aspect-auto:not(.sv-image--size-10),
.sv-image--aspect-auto:not(.sv-image--size-10) .sv-image__frame {
	max-inline-size: min(100%, calc(40px + (var(--sv-fit-base, 100cqi) - 40px) * var(--sv-image-scale, 1)));
}

/* Circle: a square crop, fully round (whatever the corner setting). */
.sv-image--aspect-circle .sv-image__frame,
.sv-image--aspect-circle .sv-image__img {
	border-radius: 50%;
}

.sv-image--aspect-circle .sv-image__img {
	aspect-ratio: 1 / 1;
}

/* Fill: all the space of its column (as tall as the text next to it), never tiny. */
.sv-image--aspect-fill {
	display: flex;
	flex: 1 1 auto;
	min-block-size: 16rem;
}

.sv-image--aspect-fill .sv-image__frame {
	flex: 1;
}

.sv-image--aspect-fill .sv-image__img {
	position: absolute;
	inset: 0;
	block-size: 100%;
}

/*
 * Text on the image, at the bottom over a dark fade so it stays readable on any photo.
 * One line; a text longer than half the picture's width continues on a second line
 * (never narrower than about 11rem, for small pictures), and two lines are the most.
 * The space below is a transparent border, not padding, so a hidden third line can't
 * show through it; the fade is painted from the border's edge (border-box).
 */
.sv-image__text {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: -webkit-box;
	overflow: hidden;
	padding-block: 3.5rem 0;
	padding-inline: 1.75rem max(1.75rem, min(50%, 100% - 12.75rem));
	border-block-end: 1.5rem solid transparent;
	/* border-box: the fade covers that space too, down to the picture's bottom edge. */
	background: linear-gradient(to top, rgb(0 0 0 / 72%), rgb(0 0 0 / 38%) 55%, rgb(0 0 0 / 0%)) border-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #fff;
	font-family: var(--sv-font-body);
	font-size: var(--sv-size-h4);
	font-weight: 600;
	line-height: calc(1.3 * var(--sv-leading-body, 1));
	text-align: start;
	text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

/* Text size: Medium is the size of a Heading 4, Small of body text, Large of a Heading 3. */
.sv-image__text--sm {
	font-size: var(--sv-size-body);
}

.sv-image__text--lg {
	font-size: var(--sv-size-h3);
}

/*
 * A heading and text on the image, placed anywhere, over a layer of one's choice (ADR 0079): None, a
 * Gradient from the side the words are on (an even soft shade when they are in the middle), or a Color
 * over the whole picture at a strength. White text by default, dark text for light layers.
 */
.sv-image__over {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: inherit;
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.sv-image__over--v-top {
	justify-content: flex-start;
}

.sv-image__over--v-middle {
	justify-content: center;
}

.sv-image__words {
	display: grid;
	gap: 0.4rem;
	justify-items: start;
	padding: 1.5rem 1.75rem;
	text-align: start;
}

.sv-image__over--h-center .sv-image__words {
	justify-items: center;
	text-align: center;
}

.sv-image__over--h-end .sv-image__words {
	justify-items: end;
	text-align: end;
}

/* The arrow of a linked image keeps its corner. */
.sv-image__link .sv-image__over--v-top:not(.sv-image__over--h-start) .sv-image__words {
	padding-block-start: 4.5rem;
}

.sv-image__over--gradient .sv-image__words {
	padding-block-start: 3.5rem;
	background: linear-gradient(to top, rgb(0 0 0 / 72%), rgb(0 0 0 / 38%) 55%, rgb(0 0 0 / 0%));
}

.sv-image__over--gradient.sv-image__over--v-top .sv-image__words {
	padding-block: 1.5rem 3.5rem;
	background: linear-gradient(to bottom, rgb(0 0 0 / 72%), rgb(0 0 0 / 38%) 55%, rgb(0 0 0 / 0%));
}

.sv-image__link .sv-image__over--gradient.sv-image__over--v-top:not(.sv-image__over--h-start) .sv-image__words {
	padding-block-start: 4.5rem;
}

.sv-image__over--gradient.sv-image__over--v-middle {
	background: rgb(0 0 0 / 38%);
}

.sv-image__over--gradient.sv-image__over--v-middle .sv-image__words {
	padding-block: 1.5rem;
	background: none;
}

.sv-image__over--color {
	background: color-mix(in srgb, var(--sv-image-tint) var(--sv-image-tint-strength), transparent);
}

/* Without a layer the words need a little more shadow to stay readable. */
.sv-image__over--none {
	text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}

.sv-image__over--dark-text {
	color: #10131c;
	text-shadow: none;
}

.sv-image__title {
	display: -webkit-box;
	max-inline-size: 36rem;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var(--sv-font-heading);
	font-size: var(--sv-size-h2);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	line-height: calc(1.15 * var(--sv-leading, 1));
	overflow-wrap: break-word;
}

/* Heading size: Medium is a Heading 2's, Small a Heading 3's, Large a Heading 1's. */
.sv-image__title--sm {
	font-size: var(--sv-size-h3);
}

.sv-image__title--lg {
	font-size: var(--sv-size-h1);
}

.sv-image__line {
	display: -webkit-box;
	max-inline-size: 32rem;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--sv-font-body);
	font-size: var(--sv-size-h4);
	font-weight: 600;
	line-height: calc(1.3 * var(--sv-leading-body, 1));
}

/* Text size as the line at the bottom: Medium a Heading 4's, Small body text, Large a Heading 3's. */
.sv-image__line--sm {
	font-size: var(--sv-size-body);
}

.sv-image__line--lg {
	font-size: var(--sv-size-h3);
}

/* A linked image: a smooth 10% dark layer on hover, and an arrow in a circle in the top end corner. */
.sv-image__link::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: rgb(0 0 0 / 0%);
	content: "";
	transition: background-color 0.3s ease;
	pointer-events: none;
}

.sv-image__link:is(:hover, :focus-visible)::after {
	background-color: rgb(0 0 0 / 10%);
}

.sv-image__link:focus-visible {
	outline: 2px solid var(--sv-focus, var(--sv-color-text));
	outline-offset: 3px;
}

.sv-image__arrow {
	position: absolute;
	z-index: 1;
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid rgb(255 255 255 / 80%);
	border-radius: 50%;
	background-color: rgb(255 255 255 / 14%);
	color: #fff;
	backdrop-filter: blur(6px);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.sv-image__arrow::before {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	background-color: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate 0.3s ease;
}

/* Right to left: the arrow points up and to the start side (its corner). */
[dir="rtl"] .sv-image__arrow::before {
	scale: -1 1;
}

.sv-image__link:is(:hover, :focus-visible) .sv-image__arrow {
	border-color: #fff;
	background-color: #fff;
	color: #111;
}

.sv-image__link:is(:hover, :focus-visible) .sv-image__arrow::before {
	translate: 0.1rem -0.1rem;
}

[dir="rtl"] .sv-image__link:is(:hover, :focus-visible) .sv-image__arrow::before {
	translate: -0.1rem -0.1rem;
}

/* Over a light layer with dark text (ADR 0079), the arrow is dark too. */
.sv-image__link:has(.sv-image__over--dark-text) .sv-image__arrow {
	border-color: rgb(16 19 28 / 55%);
	background-color: rgb(255 255 255 / 35%);
	color: #10131c;
}

/* A circle photo keeps its arrow inside the circle. */
.sv-image--aspect-circle .sv-image__arrow {
	inset-block-start: 14%;
	inset-inline-end: 14%;
}

@media (prefers-reduced-motion: reduce) {
	.sv-image__link::after,
	.sv-image__arrow,
	.sv-image__arrow::before {
		transition: none;
	}
}

/*
 * At the top or bottom of a column's box (ADR 0050): a full-width image sits 0.4rem from the box's
 * edge, with corners that follow the box's (its own Rounded corners give way), as the photo in a Team
 * member or Service card. Not in a column arranged side by side or in a grid, nor with Space inside
 * "None", nor for a circle.
 */
.sv-column:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse):not(.sv-inset-none, .sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > .sv-image.sv-image--size-10:not(.sv-image--aspect-circle):is(:first-child, :last-child) {
	--sv-image-edge: calc(0.4rem - var(--sv-box-pad, var(--sv-space-md)));
	align-self: stretch;
	inline-size: auto;
	max-inline-size: none;
	margin-inline: var(--sv-image-edge);
	border-radius: max(0px, calc(var(--sv-box-radius, var(--sv-radius-md)) - 0.4rem));
}

.sv-column:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse):not(.sv-inset-none, .sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > .sv-image.sv-image--size-10:not(.sv-image--aspect-circle):first-child {
	margin-block-start: var(--sv-image-edge);
}

.sv-column:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse):not(.sv-inset-none, .sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > .sv-image.sv-image--size-10:not(.sv-image--aspect-circle):last-child {
	margin-block-end: var(--sv-image-edge);
}

/* Under the text, it keeps to the box's bottom edge, however tall the box is (columns of a row share one height). */
.sv-column:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse):not(.sv-inset-none, .sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > .sv-image.sv-image--size-10:not(.sv-image--aspect-circle):last-child:not(:first-child) {
	margin-block-start: auto;
}