/*
 * Style-capability classes (config/style-capabilities.json).
 * Loaded after widget CSS so presets win at equal specificity.
 * Responsive: sv-<cap>-<v> (all), sv-t-<cap>-<v> (≤1024px), sv-m-<cap>-<v> (≤767px).
 * Keep in sync with the JSON — packages/renderer/test/utilities-css.test.ts checks it.
 */

/*
 * Alignment (responsive). --sv-justify lets boxes inside follow it (a Service's icon and link, ADR 0026);
 * --sv-line-margin places an element narrower than its column (Line length, ADR 0091).
 */
.sv-align-start { --sv-justify: start; --sv-line-margin: 0; text-align: start; }
.sv-align-center { --sv-justify: center; --sv-line-margin: auto; text-align: center; }
.sv-align-end { --sv-justify: end; --sv-line-margin: auto 0; text-align: end; }

/*
 * Line length (ADR 0091): a Heading's, Text's or Heading & text's lines no wider than Narrow, Normal, Wide or
 * a px of one's own; the alignment places the shorter box (--sv-line-margin: start, centered or at the end).
 */
.sv-measure-full { max-inline-size: none; }
.sv-measure-narrow { max-inline-size: 30rem; margin-inline: var(--sv-line-margin, 0); }
.sv-measure-normal { max-inline-size: 40rem; margin-inline: var(--sv-line-margin, 0); }
.sv-measure-wide { max-inline-size: 50rem; margin-inline: var(--sv-line-margin, 0); }
.sv-measure-custom { max-inline-size: var(--sv-custom-measure); margin-inline: var(--sv-line-margin, 0); }

/* Spacing (responsive). Half and full screen (sections only) center the content. */
.sv-pad-none { --sv-pad: var(--sv-section-space-none, var(--sv-space-none)); padding-block: var(--sv-pad); }
.sv-pad-sm { --sv-pad: var(--sv-section-space-sm, var(--sv-space-sm)); padding-block: var(--sv-pad); }
.sv-pad-md { --sv-pad: var(--sv-section-space-md, var(--sv-space-md)); padding-block: var(--sv-pad); }
.sv-pad-lg { --sv-pad: var(--sv-section-space-lg, var(--sv-space-lg)); padding-block: var(--sv-pad); }
.sv-pad-xl { --sv-pad: var(--sv-section-space-xl, var(--sv-space-xl)); padding-block: var(--sv-pad); }
.sv-pad-half { display: grid; align-content: center; min-block-size: 50svh; }
.sv-pad-screen { display: grid; align-content: center; min-block-size: 100svh; }
.sv-pad-custom { --sv-pad: var(--sv-custom-pad); --sv-pad-x: var(--sv-custom-pad-inline); padding-block: var(--sv-pad); }

/*
 * A section's Box (ADR 0142, 0143): its Padding (--sv-pad) is the room inside the box — a boxed row, or a Call to
 * action's own box — which adds none of its own; around the box, above and below, the section keeps its Space outside
 * (--sv-box-gap, ADR 0148; Small when not set), where its background shows. The box's sides: the Padding's own (Custom with four sides, --sv-pad-x, ADR 0144), else a room that grows with
 * the screen. A With picture Call to action keeps its picture at the box's edges: the room is its words'. A row's own
 * "Space inside" (sv-inset-*, older pages) still counts until the section has a Space inside of its own (ADR 0147).
 */
.sv-section:is(:has(> .sv-container:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom)), :has(> .sv-container:only-child > .sv-column:only-child > .sv-cta:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom))) {
	padding-block: var(--sv-box-gap, var(--sv-section-space-sm, var(--sv-space-sm)));
}

/* Space outside a box (ADR 0148): None to a px of one's own (top and bottom), on every device. */
.sv-boxgap-none { --sv-box-gap: 0px; }
.sv-boxgap-sm { --sv-box-gap: var(--sv-section-space-sm, var(--sv-space-sm)); }
.sv-boxgap-md { --sv-box-gap: var(--sv-section-space-md, var(--sv-space-md)); }
.sv-boxgap-lg { --sv-box-gap: var(--sv-section-space-lg, var(--sv-space-lg)); }
.sv-boxgap-custom { --sv-box-gap: var(--sv-custom-boxgap); }

/* With a Box the section is no box itself (ADR 0148): its older Space around and corners give way to the box's. */
.sv-section:is(:has(> .sv-container:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom)), :has(> .sv-container:only-child > .sv-column:only-child > .sv-cta:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom))):is([class*="sv-frame-"], [class*="sv-t-frame-"], [class*="sv-m-frame-"], [class*="sv-round-"]) {
	margin-block: 0;
	margin-inline: 0;
	border-radius: 0;
	overflow: visible;
}

.sv-section > .sv-container:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom):not(.sv-inset-none, .sv-inset-sm, .sv-inset-md, .sv-inset-lg, .sv-inset-xl, .sv-inset-custom),
.sv-section:is([class*="sv-pad-"], [class*="sv-t-pad-"], [class*="sv-m-pad-"]) > .sv-container:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom),
.sv-section > .sv-container:only-child > .sv-column:only-child > .sv-cta:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom):not(.sv-cta--layout-split),
.sv-section > .sv-container:only-child > .sv-column:only-child > .sv-cta--layout-split:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom) > .sv-cta__body {
	padding-block: var(--sv-text-inset, var(--sv-pad, var(--sv-section-space-lg, var(--sv-space-lg))));
	padding-inline: var(--sv-text-inset, var(--sv-pad-x, clamp(var(--sv-section-space-md, var(--sv-space-md)), 4vw, var(--sv-section-space-lg, var(--sv-space-lg)))));
}

/*
 * Height (sections, ADR 0075; responsive): how tall a section is at least. Two classes of specificity so
 * a per-device Spacing (whose min-block-size: 0 ends the older Half/Full screen) never cancels it.
 * Small/Medium/Large are a quarter less on phones (below). A section with a Height places its content
 * with Content position (--sv-place, middle by default).
 */
.sv-section.sv-height-none { min-block-size: 0; }
.sv-section.sv-height-sm { min-block-size: 320px; }
.sv-section.sv-height-md { min-block-size: 480px; }
.sv-section.sv-height-lg { min-block-size: 640px; }
.sv-section.sv-height-half { min-block-size: 50svh; }
.sv-section.sv-height-screen { min-block-size: 100svh; }
.sv-section.sv-height-custom { min-block-size: var(--sv-custom-height); }
.sv-section:is(.sv-height-sm, .sv-height-md, .sv-height-lg, .sv-height-half, .sv-height-screen, .sv-height-custom, .sv-t-height-sm, .sv-t-height-md, .sv-t-height-lg, .sv-t-height-half, .sv-t-height-screen, .sv-t-height-custom, .sv-m-height-sm, .sv-m-height-md, .sv-m-height-lg, .sv-m-height-half, .sv-m-height-screen, .sv-m-height-custom) { display: grid; align-content: var(--sv-place, center); }
.sv-place-top { --sv-place: start; }
.sv-place-middle { --sv-place: center; }
.sv-place-bottom { --sv-place: end; }

/*
 * A boxed section with a Height (ADR 0147): the box takes the height — less the gap around it — and Content position
 * places what is inside it. A section of several rows keeps them as they are.
 */
.sv-section:is(.sv-height-sm, .sv-height-md, .sv-height-lg, .sv-height-half, .sv-height-screen, .sv-height-custom, .sv-t-height-sm, .sv-t-height-md, .sv-t-height-lg, .sv-t-height-half, .sv-t-height-screen, .sv-t-height-custom, .sv-m-height-sm, .sv-m-height-md, .sv-m-height-lg, .sv-m-height-half, .sv-m-height-screen, .sv-m-height-custom):is(:has(> .sv-container:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom)), :has(> .sv-container:only-child > .sv-column:only-child > .sv-cta:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom))):not(:has(> .sv-container ~ .sv-container)) {
	align-content: stretch;
}

.sv-section:is(.sv-height-sm, .sv-height-md, .sv-height-lg, .sv-height-half, .sv-height-screen, .sv-height-custom, .sv-t-height-sm, .sv-t-height-md, .sv-t-height-lg, .sv-t-height-half, .sv-t-height-screen, .sv-t-height-custom, .sv-m-height-sm, .sv-m-height-md, .sv-m-height-lg, .sv-m-height-half, .sv-m-height-screen, .sv-m-height-custom) > .sv-container:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom),
.sv-section:is(.sv-height-sm, .sv-height-md, .sv-height-lg, .sv-height-half, .sv-height-screen, .sv-height-custom, .sv-t-height-sm, .sv-t-height-md, .sv-t-height-lg, .sv-t-height-half, .sv-t-height-screen, .sv-t-height-custom, .sv-m-height-sm, .sv-m-height-md, .sv-m-height-lg, .sv-m-height-half, .sv-m-height-screen, .sv-m-height-custom) > .sv-container:only-child > .sv-column:only-child > .sv-cta:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom):not(.sv-cta--layout-split),
.sv-section:is(.sv-height-sm, .sv-height-md, .sv-height-lg, .sv-height-half, .sv-height-screen, .sv-height-custom, .sv-t-height-sm, .sv-t-height-md, .sv-t-height-lg, .sv-t-height-half, .sv-t-height-screen, .sv-t-height-custom, .sv-m-height-sm, .sv-m-height-md, .sv-m-height-lg, .sv-m-height-half, .sv-m-height-screen, .sv-m-height-custom) > .sv-container:only-child > .sv-column:only-child > .sv-cta--layout-split:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom) > .sv-cta__body {
	align-content: var(--sv-place, center);
}

.sv-section:is(.sv-height-sm, .sv-height-md, .sv-height-lg, .sv-height-half, .sv-height-screen, .sv-height-custom, .sv-t-height-sm, .sv-t-height-md, .sv-t-height-lg, .sv-t-height-half, .sv-t-height-screen, .sv-t-height-custom, .sv-m-height-sm, .sv-m-height-md, .sv-m-height-lg, .sv-m-height-half, .sv-m-height-screen, .sv-m-height-custom) > .sv-container:only-child > .sv-column:only-child > .sv-cta:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-custom) {
	flex-grow: 1;
}

/* A section's row is a box only with its Box on (ADR 0147): switched off, it leaves no shadow or texture behind. */
.sv-section > .sv-container:not(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom) {
	--sv-drop: initial;
}

.sv-section > .sv-container:is(.sv-tex-grain, .sv-tex-lines, .sv-tex-grid, .sv-tex-dots, .sv-tex-star, .sv-tex-rings):not(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary, .sv-box-custom)::before {
	content: none;
}

/*
 * Space around (sections, ADR 0076; responsive): the section drawn as a box with a gap to the page edges
 * (consecutive boxes share one gap: their margins collapse). Its background, picture and content stay
 * inside, clipped to its rounded corners. Small/Medium/Large are the floating header's gaps; less on phones.
 */
.sv-section.sv-frame-none { margin-block: 0; margin-inline: 0; }
.sv-section.sv-frame-sm { margin-block: 12px; margin-inline: 12px; }
.sv-section.sv-frame-md { margin-block: 20px; margin-inline: 20px; }
.sv-section.sv-frame-lg { margin-block: 32px; margin-inline: 32px; }
.sv-section.sv-frame-custom { margin-block: var(--sv-custom-frame-block); margin-inline: var(--sv-custom-frame-inline); }
.sv-section:is(.sv-frame-sm, .sv-frame-md, .sv-frame-lg, .sv-frame-custom, .sv-t-frame-sm, .sv-t-frame-md, .sv-t-frame-lg, .sv-t-frame-custom, .sv-m-frame-sm, .sv-m-frame-md, .sv-m-frame-lg, .sv-m-frame-custom, .sv-round-sm, .sv-round-md, .sv-round-lg, .sv-round-custom) { overflow: clip; }

/* Space above and Space below (buttons, questions; ADR 0032) */
.sv-above-none { margin-block-start: 0; }
.sv-above-sm { margin-block-start: var(--sv-space-step-sm, var(--sv-space-sm)); }
.sv-above-md { margin-block-start: var(--sv-space-step-md, var(--sv-space-md)); }
.sv-above-lg { margin-block-start: var(--sv-space-step-lg, var(--sv-space-lg)); }
.sv-above-xl { margin-block-start: var(--sv-space-step-xl, var(--sv-space-xl)); }
.sv-above-custom { margin-block-start: var(--sv-custom-above); }
.sv-below-none { margin-block-end: 0; }
.sv-below-sm { margin-block-end: var(--sv-space-step-sm, var(--sv-space-sm)); }
.sv-below-md { margin-block-end: var(--sv-space-step-md, var(--sv-space-md)); }
.sv-below-lg { margin-block-end: var(--sv-space-step-lg, var(--sv-space-lg)); }
.sv-below-xl { margin-block-end: var(--sv-space-step-xl, var(--sv-space-xl)); }
.sv-below-custom { margin-block-end: var(--sv-custom-below); }

/* Vertical alignment of every column in a row (ADR 0025): columns keep their full height and
   move their content (column/style.css reads --sv-column-justify). */
.sv-valign-start { --sv-column-justify: flex-start; }
.sv-valign-center { --sv-column-justify: center; }
.sv-valign-end { --sv-column-justify: flex-end; }
.sv-valign-between { --sv-column-justify: space-between; }

/* Space above and below (headings), ADR 0024 */
.sv-around-none { padding-block: 0; }
.sv-around-sm { padding-block: var(--sv-space-step-sm, var(--sv-space-xs)); }
.sv-around-md { padding-block: var(--sv-space-step-md, var(--sv-space-sm)); }
.sv-around-lg { padding-block: var(--sv-space-step-lg, var(--sv-space-md)); }
.sv-around-xl { padding-block: var(--sv-space-step-xl, var(--sv-space-lg)); }
.sv-around-custom { padding-block: var(--sv-custom-around); }

/* Space between items (columns) */
.sv-gap-none { gap: 0; }
.sv-gap-sm { gap: var(--sv-space-step-sm, var(--sv-space-xs)); }
.sv-gap-md { gap: var(--sv-space-step-md, var(--sv-space-sm)); }
.sv-gap-lg { gap: var(--sv-space-step-lg, var(--sv-space-md)); }
.sv-gap-xl { gap: var(--sv-space-step-xl, var(--sv-space-lg)); }
.sv-gap-custom { gap: var(--sv-custom-gap); }

/* Space between columns (containers); --sv-colgap for a column that fits its content (ADR 0029) */
.sv-colgap-none { --sv-colgap: 0px; column-gap: 0px; }
.sv-colgap-sm { --sv-colgap: var(--sv-space-step-sm, var(--sv-space-sm)); column-gap: var(--sv-space-step-sm, var(--sv-space-sm)); }
.sv-colgap-md { --sv-colgap: var(--sv-space-step-md, var(--sv-space-md)); column-gap: var(--sv-space-step-md, var(--sv-space-md)); }
.sv-colgap-lg { --sv-colgap: var(--sv-space-step-lg, var(--sv-space-lg)); column-gap: var(--sv-space-step-lg, var(--sv-space-lg)); }
.sv-colgap-xl { --sv-colgap: var(--sv-space-step-xl, var(--sv-space-xl)); column-gap: var(--sv-space-step-xl, var(--sv-space-xl)); }
.sv-colgap-custom { --sv-colgap: var(--sv-custom-colgap); column-gap: var(--sv-custom-colgap); }
.sv-rowgap-sm { --sv-rowgap: var(--sv-section-space-sm, var(--sv-space-sm)); }
.sv-rowgap-md { --sv-rowgap: var(--sv-section-space-md, var(--sv-space-md)); }
.sv-rowgap-lg { --sv-rowgap: var(--sv-section-space-lg, var(--sv-space-lg)); }
.sv-rowgap-xl { --sv-rowgap: var(--sv-section-space-xl, var(--sv-space-xl)); }
.sv-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap); }

/*
 * Overlap the section above (ADR 0101): the section's first row moves up over the section above by this much, in
 * front of it (its own background stays where it is, so the section above shows behind); the section above gets as
 * much room at its foot, so its own words stay clear. Less on phones. Only a section after another one moves.
 * Custom (ADR 0175): the renderers hand its amount to the section above as --sv-custom-overlap-room (CSS can't reach
 * back to it); phones take 60% of it, as the named sizes shrink there.
 */
.sv-overlap-sm { --sv-overlap: 3rem; }
.sv-overlap-md { --sv-overlap: 6rem; }
.sv-overlap-lg { --sv-overlap: 9rem; }
.sv-overlap-custom { --sv-overlap: var(--sv-custom-overlap); }

.sv-section + .sv-section:is(.sv-overlap-sm, .sv-overlap-md, .sv-overlap-lg, .sv-overlap-custom) {
	padding-block-start: 0;
}

.sv-section + .sv-section:is(.sv-overlap-sm, .sv-overlap-md, .sv-overlap-lg, .sv-overlap-custom) > .sv-container:not(.sv-container ~ .sv-container) {
	position: relative;
	z-index: 2;
	margin-block-start: calc(-1 * var(--sv-overlap));
}

.sv-section:has(+ .sv-overlap-sm) { --sv-overlap-room: 3rem; }
.sv-section:has(+ .sv-overlap-md) { --sv-overlap-room: 6rem; }
.sv-section:has(+ .sv-overlap-lg) { --sv-overlap-room: 9rem; }
.sv-section:has(+ .sv-overlap-custom) { --sv-overlap-room: var(--sv-custom-overlap-room, 0px); }

.sv-section:has(+ .sv-section:is(.sv-overlap-sm, .sv-overlap-md, .sv-overlap-lg, .sv-overlap-custom))::after {
	display: block;
	block-size: var(--sv-overlap-room);
	content: "";
}

@media (max-width: 767px) {
	.sv-overlap-sm,
	.sv-section:has(+ .sv-overlap-sm) { --sv-overlap: 2rem; --sv-overlap-room: 2rem; }

	.sv-overlap-md,
	.sv-section:has(+ .sv-overlap-md) { --sv-overlap: 3.5rem; --sv-overlap-room: 3.5rem; }

	.sv-overlap-lg,
	.sv-section:has(+ .sv-overlap-lg) { --sv-overlap: 5rem; --sv-overlap-room: 5rem; }

	.sv-overlap-custom { --sv-overlap: calc(var(--sv-custom-overlap) * 0.6); }
	.sv-section:has(+ .sv-overlap-custom) { --sv-overlap-room: calc(var(--sv-custom-overlap-room, 0px) * 0.6); }
}

/* edges:start — generated by scripts/build-edges.mjs (ADR 0114): change the script, not these lines. */
/*
 * Section edges (ADR 0114): a section's start (Top edge) or the end of the section before it (Bottom edge) takes a
 * shape. The lower section moves up over the upper one by the edge's height and is masked at its top to the shape, so
 * the upper one — its color, photo, gradient, texture — shows through; each gets the edge's height as room (a
 * transparent border its photo reaches under), so no words sit in the edge. Wave and Slant can be flipped; on
 * right-to-left pages every edge is mirrored. Not on a boxed section (Space around). A section's own top edge wins over
 * the bottom edge of the one before it.
 */
@media (width <= 767px) {
	.sv-section { --sv-edge-scale: 0.6; }
}

/* The lower section's drawing: from the bottom edge of the one before, or its own top edge. */

.sv-ebot-wave + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200V60C1000 120 800 0 600 60S200 120 0 60Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-ebot-wave.sv-eflip-x + .sv-section, :where([dir="rtl"]) .sv-ebot-wave:not(.sv-eflip-x) + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200V60C1000 120 800 0 600 60S200 120 0 60Z'/%3E%3C/svg%3E"); }

.sv-ebot-curve + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200Q600 240 0 0Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-ebot-curve.sv-eflip-x + .sv-section, :where([dir="rtl"]) .sv-ebot-curve:not(.sv-eflip-x) + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200Q600 240 0 0Z'/%3E%3C/svg%3E"); }

.sv-ebot-slant + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200L0 120Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-ebot-slant.sv-eflip-x + .sv-section, :where([dir="rtl"]) .sv-ebot-slant:not(.sv-eflip-x) + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200L0 120Z'/%3E%3C/svg%3E"); }

.sv-ebot-arch + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200V120Q600-120 0 120Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-ebot-arch.sv-eflip-x + .sv-section, :where([dir="rtl"]) .sv-ebot-arch:not(.sv-eflip-x) + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200V120Q600-120 0 120Z'/%3E%3C/svg%3E"); }

.sv-ebot-peak + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200V120L600 0 0 120Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-ebot-peak.sv-eflip-x + .sv-section, :where([dir="rtl"]) .sv-ebot-peak:not(.sv-eflip-x) + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200V120L600 0 0 120Z'/%3E%3C/svg%3E"); }

.sv-ebot-arches + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V120H0ZM0 0H100V112H86V72A36 36 0 0 0 14 72V112H0Z'/%3E%3C/svg%3E"); --sv-top-w: auto; --sv-top-rep: round no-repeat; --sv-top-solid: 0.06; }

.sv-ebot-arches.sv-eflip-x + .sv-section, :where([dir="rtl"]) .sv-ebot-arches:not(.sv-eflip-x) + .sv-section { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 100 0)' d='M0 0H100V120H0ZM0 0H100V112H86V72A36 36 0 0 0 14 72V112H0Z'/%3E%3C/svg%3E"); }

.sv-section + .sv-section.sv-etop-wave { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200V60C1000 120 800 0 600 60S200 120 0 60Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-section + .sv-section.sv-etop-wave.sv-eflip-x, :where([dir="rtl"]) .sv-section + .sv-section.sv-etop-wave:not(.sv-eflip-x) { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200V60C1000 120 800 0 600 60S200 120 0 60Z'/%3E%3C/svg%3E"); }

.sv-section + .sv-section.sv-etop-curve { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200Q600 240 0 0Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-section + .sv-section.sv-etop-curve.sv-eflip-x, :where([dir="rtl"]) .sv-section + .sv-section.sv-etop-curve:not(.sv-eflip-x) { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200Q600 240 0 0Z'/%3E%3C/svg%3E"); }

.sv-section + .sv-section.sv-etop-slant { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200L0 120Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-section + .sv-section.sv-etop-slant.sv-eflip-x, :where([dir="rtl"]) .sv-section + .sv-section.sv-etop-slant:not(.sv-eflip-x) { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200L0 120Z'/%3E%3C/svg%3E"); }

.sv-section + .sv-section.sv-etop-arch { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200V120Q600-120 0 120Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-section + .sv-section.sv-etop-arch.sv-eflip-x, :where([dir="rtl"]) .sv-section + .sv-section.sv-etop-arch:not(.sv-eflip-x) { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200V120Q600-120 0 120Z'/%3E%3C/svg%3E"); }

.sv-section + .sv-section.sv-etop-peak { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1200V120H0ZM0 0H1200V120L600 0 0 120Z'/%3E%3C/svg%3E"); --sv-top-w: 100%; --sv-top-rep: no-repeat; --sv-top-solid: 0; }

.sv-section + .sv-section.sv-etop-peak.sv-eflip-x, :where([dir="rtl"]) .sv-section + .sv-section.sv-etop-peak:not(.sv-eflip-x) { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 1200 0)' d='M0 0H1200V120H0ZM0 0H1200V120L600 0 0 120Z'/%3E%3C/svg%3E"); }

.sv-section + .sv-section.sv-etop-arches { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V120H0ZM0 0H100V112H86V72A36 36 0 0 0 14 72V112H0Z'/%3E%3C/svg%3E"); --sv-top-w: auto; --sv-top-rep: round no-repeat; --sv-top-solid: 0.06; }

.sv-section + .sv-section.sv-etop-arches.sv-eflip-x, :where([dir="rtl"]) .sv-section + .sv-section.sv-etop-arches:not(.sv-eflip-x) { --sv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' transform='matrix(-1 0 0 1 100 0)' d='M0 0H100V120H0ZM0 0H100V112H86V72A36 36 0 0 0 14 72V112H0Z'/%3E%3C/svg%3E"); }

/* Heights: Small, Medium (none chosen), Large — the section before's for its bottom edge, the own for a top edge. */

.sv-section:is(.sv-eh-md, :not(.sv-eh-sm, .sv-eh-lg)):is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches) + .sv-section { --sv-top-h: calc(72px * var(--sv-edge-scale, 1)); }

.sv-section.sv-eh-sm:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches) + .sv-section { --sv-top-h: calc(40px * var(--sv-edge-scale, 1)); }

.sv-section.sv-eh-lg:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches) + .sv-section { --sv-top-h: calc(110px * var(--sv-edge-scale, 1)); }

.sv-section + .sv-section:is(.sv-eh-md, :not(.sv-eh-sm, .sv-eh-lg)):is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches) { --sv-top-h: calc(72px * var(--sv-edge-scale, 1)); }

.sv-section:has(+ .sv-section:is(.sv-eh-md, :not(.sv-eh-sm, .sv-eh-lg)):is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)) { --sv-bottom-h: calc(72px * var(--sv-edge-scale, 1)); }

.sv-section + .sv-section.sv-eh-sm:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches) { --sv-top-h: calc(40px * var(--sv-edge-scale, 1)); }

.sv-section:has(+ .sv-section.sv-eh-sm:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)) { --sv-bottom-h: calc(40px * var(--sv-edge-scale, 1)); }

.sv-section + .sv-section.sv-eh-lg:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches) { --sv-top-h: calc(110px * var(--sv-edge-scale, 1)); }

.sv-section:has(+ .sv-section.sv-eh-lg:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)) { --sv-bottom-h: calc(110px * var(--sv-edge-scale, 1)); }

.sv-section:is(.sv-eh-md, :not(.sv-eh-sm, .sv-eh-lg)):is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):has(+ .sv-section:not(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)) { --sv-bottom-h: calc(72px * var(--sv-edge-scale, 1)); }

.sv-section.sv-eh-sm:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):has(+ .sv-section:not(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)) { --sv-bottom-h: calc(40px * var(--sv-edge-scale, 1)); }

.sv-section.sv-eh-lg:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):has(+ .sv-section:not(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)) { --sv-bottom-h: calc(110px * var(--sv-edge-scale, 1)); }

/* The upper section: room at its foot, its photo and texture reaching under it. */
:is(.sv-section:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):has(+ .sv-section:not([class*="sv-frame-"])), .sv-section:has(+ .sv-section:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches):not([class*="sv-frame-"]))):not([class*="sv-frame-"]) {
	border-block-end: var(--sv-bottom-h, 0px) solid transparent;
}

:is(.sv-section:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):has(+ .sv-section:not([class*="sv-frame-"])), .sv-section:has(+ .sv-section:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches):not([class*="sv-frame-"]))):not([class*="sv-frame-"]) > .sv-section__bg {
	inset-block-end: calc(-1 * var(--sv-bottom-h, 0px));
}

:is(.sv-section:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):has(+ .sv-section:not([class*="sv-frame-"])), .sv-section:has(+ .sv-section:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches):not([class*="sv-frame-"]))):not([class*="sv-frame-"])::before {
	inset-block-end: calc(-1 * var(--sv-bottom-h, 0px));
}

/* The lower section: up over the upper one, room at its top, masked there to the shape. */
:is(.sv-section:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):not([class*="sv-frame-"]) + .sv-section, .sv-section:not([class*="sv-frame-"]) + .sv-section:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)):not([class*="sv-frame-"]) {
	margin-block-start: calc(-1 * var(--sv-top-h));
	border-block-start: var(--sv-top-h) solid transparent;
	-webkit-mask:
		var(--sv-top) top / var(--sv-top-w) var(--sv-top-h) var(--sv-top-rep),
		linear-gradient(#000 0 0) 0 calc(var(--sv-top-h) * (1 - var(--sv-top-solid)) - 1px) / 100% calc(100% - var(--sv-top-h) * (1 - var(--sv-top-solid)) + 1px) no-repeat;
	mask:
		var(--sv-top) top / var(--sv-top-w) var(--sv-top-h) var(--sv-top-rep),
		linear-gradient(#000 0 0) 0 calc(var(--sv-top-h) * (1 - var(--sv-top-solid)) - 1px) / 100% calc(100% - var(--sv-top-h) * (1 - var(--sv-top-solid)) + 1px) no-repeat;
}

:is(.sv-section:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):not([class*="sv-frame-"]) + .sv-section, .sv-section:not([class*="sv-frame-"]) + .sv-section:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)):not([class*="sv-frame-"]) > .sv-section__bg {
	inset-block-start: calc(-1 * var(--sv-top-h));
}

/* A lower section without a background of its own draws the edge in the page's color (it looks the same). */
:is(.sv-section:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):not([class*="sv-frame-"]) + .sv-section, .sv-section:not([class*="sv-frame-"]) + .sv-section:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)):not([class*="sv-frame-"]):not(.sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse, .sv-bg-custom) {
	background-color: var(--sv-color-background);
}

:is(.sv-section:is(.sv-ebot-wave, .sv-ebot-curve, .sv-ebot-slant, .sv-ebot-arch, .sv-ebot-peak, .sv-ebot-arches):not([class*="sv-frame-"]) + .sv-section, .sv-section:not([class*="sv-frame-"]) + .sv-section:is(.sv-etop-wave, .sv-etop-curve, .sv-etop-slant, .sv-etop-arch, .sv-etop-peak, .sv-etop-arches)):not([class*="sv-frame-"])::before {
	inset-block-start: calc(-1 * var(--sv-top-h));
}
/* edges:end */

/*
 * Textures (ADR 0114): a faint pattern between the background (its color, photo or gradient) and the content, in the
 * element's own text color — dark on light areas, light on dark and accent ones. Medium is a little stronger.
 */
:is(.sv-tex-grain, .sv-tex-lines, .sv-tex-grid, .sv-tex-dots, .sv-tex-star, .sv-tex-rings) {
	position: relative;
	isolation: isolate;
}

:is(.sv-tex-grain, .sv-tex-lines, .sv-tex-grid, .sv-tex-dots, .sv-tex-star, .sv-tex-rings)::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: currentcolor;
	content: "";
	opacity: calc(var(--sv-tex-o) * var(--sv-tex-k, 1));
	pointer-events: none;
	-webkit-mask: var(--sv-tex) 0 0 / var(--sv-tex-size) repeat;
	mask: var(--sv-tex) 0 0 / var(--sv-tex-size) repeat;
}

:is(.sv-tex-grain, .sv-tex-lines, .sv-tex-grid, .sv-tex-dots, .sv-tex-star, .sv-tex-rings) > :is(.sv-section__bg, .sv-column__bg) {
	z-index: -2;
}

.sv-tex-grain {
	--sv-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	--sv-tex-size: 160px 160px;
	--sv-tex-o: 0.16;
}

.sv-tex-lines {
	--sv-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' stroke='black'%3E%3Cpath d='M-3 3 3-3M0 12 12 0M9 15l6-6'/%3E%3C/svg%3E");
	--sv-tex-size: 12px 12px;
	--sv-tex-o: 0.08;
}

.sv-tex-grid {
	--sv-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='black'%3E%3Cpath d='M0 .5h28M.5 0v28'/%3E%3C/svg%3E");
	--sv-tex-size: 28px 28px;
	--sv-tex-o: 0.08;
}

.sv-tex-dots {
	--sv-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3C/svg%3E");
	--sv-tex-size: 18px 18px;
	--sv-tex-o: 0.14;
}

.sv-tex-star {
	--sv-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' width='56' height='56' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M28 8l20 20-20 20L8 28z'/%3E%3Cpath d='M14 14h28v28H14z'/%3E%3Cpath d='M0 0l8 8M56 0l-8 8M0 56l8-8M56 56l-8-8'/%3E%3Cpath d='M28 0v8M28 48v8M0 28h8M48 28h8'/%3E%3C/svg%3E");
	--sv-tex-size: 56px 56px;
	--sv-tex-o: 0.1;
}

.sv-tex-rings {
	--sv-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='black' stroke-width='1.1'%3E%3Ccircle cx='24' cy='24' r='16'/%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='48' cy='0' r='16'/%3E%3Ccircle cx='0' cy='48' r='16'/%3E%3Ccircle cx='48' cy='48' r='16'/%3E%3C/svg%3E");
	--sv-tex-size: 48px 48px;
	--sv-tex-o: 0.09;
}

.sv-texs-medium { --sv-tex-k: 1.8; }

/*
 * Overlap the column beside (ADR 0101): the column reaches over the column before it (after it, when it is the
 * first) by this much, in front of it and centered on it — a box over a picture. On phones, one under another, it
 * overlaps the picture's foot (or top) instead, a little narrower than it.
 */
.sv-cover-sm { --sv-cover: 2rem; }
.sv-cover-md { --sv-cover: 4rem; }
.sv-cover-lg { --sv-cover: 6rem; }
.sv-cover-custom { --sv-cover: var(--sv-custom-cover); }

.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom) {
	position: relative;
	z-index: 1;
	align-self: center;
}

/* Over the space between the columns too (the row's --sv-colgap), so it covers the picture by this much. */
.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):not(:first-child) {
	margin-inline-start: calc(-1 * (var(--sv-cover) + var(--sv-colgap, var(--sv-space-md))));
}

.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):first-child {
	margin-inline-end: calc(-1 * (var(--sv-cover) + var(--sv-colgap, var(--sv-space-md))));
}

@media (max-width: 767px) {
	.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):not(:first-child) {
		margin-block-start: calc(-1 * (var(--sv-cover) + var(--sv-space-md)));
		margin-inline: var(--sv-space-sm);
	}

	.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):first-child {
		margin-block-end: calc(-1 * (var(--sv-cover) + var(--sv-space-md)));
		margin-inline: var(--sv-space-sm);
	}
}

/* Background */
.sv-bg-background { background-color: var(--sv-color-background); }
.sv-bg-surface { background-color: var(--sv-color-surface); }
.sv-bg-primary { background-color: var(--sv-color-primary); color: var(--sv-color-on-primary); }
.sv-bg-secondary { background-color: var(--sv-color-secondary); color: var(--sv-color-on-secondary); }
.sv-bg-inverse { background-color: var(--sv-color-inverse); color: var(--sv-color-on-inverse); }
/* A custom color (ADR 0070): with the Dark or Surface background's classes, only the fill is its own. */
.sv-bg-custom { background-color: var(--sv-custom-bg); }

/* Text color */
.sv-color-text { color: var(--sv-color-text); }
.sv-color-muted { color: var(--sv-color-muted); }
.sv-color-primary { color: var(--sv-color-primary); }
.sv-color-secondary { color: var(--sv-color-secondary); }
.sv-color-on-inverse { color: var(--sv-color-on-inverse); }
.sv-color-custom { color: var(--sv-custom-color); }

/* Column arrangement (responsive; the container's layout sets --sv-cols; --sv-fit-on: whether it is used, ADR 0029) */
.sv-cols-keep { --sv-fit-on: 1; display: grid; grid-template-columns: var(--sv-cols); }
.sv-cols-two { --sv-fit-on: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-cols-stack { --sv-fit-on: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-cols-reverse { --sv-fit-on: 0; display: flex; flex-direction: column-reverse; }

/*
 * Arrange (columns, responsive), ADR 0028: one under another (the usual), side by side
 * (wrapping to the next line when there is no room) or a grid. Vertical alignment
 * (--sv-column-justify) places the items vertically; alignment (--sv-justify) places a
 * row's items. In a row, elements fill the space left (text next to an image) while
 * buttons, icons and images fit their content; an element's Width changes it. The flow sets
 * --sv-in-row and --sv-flow-*; an element's own --sv-row-* (never inherited) wins.
 * Width and Height of an element (ADR 0031): it says what it wants across (--sv-w-self) and
 * down (--sv-h-self, --sv-col-grow); the arrangement of its column decides which one
 * align-self takes: across one under another, down in a line or a grid.
 */
@property --sv-row-grow { syntax: "*"; inherits: false; }
@property --sv-row-basis { syntax: "*"; inherits: false; }
@property --sv-row-min { syntax: "*"; inherits: false; }
@property --sv-col-grow { syntax: "*"; inherits: false; }
@property --sv-w-self { syntax: "*"; inherits: false; }
@property --sv-h-self { syntax: "*"; inherits: false; }

.sv-flow-vertical { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: initial; display: flex; flex-flow: column nowrap; align-content: normal; align-items: stretch; justify-content: var(--sv-column-justify, flex-start); }
.sv-flow-horizontal { --sv-in-row: 1; --sv-flow-basis: 0%; --sv-flow-min: 10rem; --sv-row-self: auto; display: flex; flex-flow: row wrap; align-content: var(--sv-column-justify, flex-start); align-items: var(--sv-column-justify, flex-start); justify-content: var(--sv-justify, start); }
.sv-flow-grid2 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
.sv-flow-grid3 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
.sv-flow-grid4 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }


/*
 * A column's items (zero specificity: an element's own sizing wins). Side by side they fit or fill
 * across (Width); one under another, Height Fill shares the column's free height (--sv-col-grow)
 * and Width places them across (align-self).
 */
:where(.sv-column > *) {
	flex-grow: calc(var(--sv-in-row, 0) * var(--sv-row-grow, 1) + (1 - var(--sv-in-row, 0)) * var(--sv-col-grow, 0));
	flex-basis: var(--sv-row-basis, var(--sv-flow-basis, auto));
	align-self: var(--sv-w-self, auto);
	min-inline-size: min(var(--sv-row-min, var(--sv-flow-min, 0px)), 100%);
	max-inline-size: 100%;
}

/*
 * Side by side or in a grid (a Grid's cells too), align-self places an element down: its Height.
 * The usual space above an element (a button's) would push it down.
 */
:where(.sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > * { align-self: var(--sv-h-self, auto); margin-block: 0; }
:where(.sv-container:is(.sv-container--grid-auto, .sv-container--grid-2, .sv-container--grid-3, .sv-container--grid-4) > .sv-column > *) { align-self: var(--sv-h-self, auto); }

/* In a grid, an Image's size slider measures against its cell (elsewhere: against the column). */
:is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > .sv-image { container-type: inline-size; inline-size: auto; }

/*
 * A column's Width and Height in its row (ADR 0029). Width Fit: the row gives it an auto track
 * and it stops being a size container; its images measure against the space it would fill
 * (container/style.css). Height Fit: only as tall as its content; vertical alignment then
 * moves the column.
 */
.sv-colw-fill { container-type: inline-size; }
.sv-colw-fit { container-type: normal; }
.sv-colh-fill { align-self: stretch; }
.sv-colh-fit { align-self: var(--sv-column-justify, flex-start); }

/*
 * Stretch (ADR 0030): the column fills, and what is in it grows to the column. Width: side by side
 * every element fills; buttons and Numbers boxes get the column's width (images keep their Size).
 * Height: the elements share the column's height (a card as tall as the row).
 */
.sv-colw-stretch { container-type: inline-size; }
.sv-colw-stretch > * { --sv-row-grow: 1; --sv-row-basis: 0%; --sv-row-min: initial; }
.sv-colw-stretch > .sv-button .sv-button__control { inline-size: 100%; }
.sv-colw-stretch > .sv-button .sv-button__group { display: flex; }
.sv-colw-stretch > .sv-button .sv-button__group > * { flex: 1 1 0; }
.sv-colh-stretch { align-self: stretch; }
.sv-colh-stretch:not(.sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > * { flex-grow: 1; }
.sv-colh-stretch:is(.sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) { align-items: stretch; }

/* In a column that fits its content, "all the space" (image size 10, the Fill shape) is the space
   it would fill. */
.sv-colw-fit :where(.sv-image--size-10:not(.sv-image--aspect-auto), .sv-image--aspect-fill) { inline-size: var(--sv-fit-base, 100cqi); max-inline-size: 100%; }

/*
 * Width and Height of an element (ADR 0031). Width Fit: as wide as its content, placed by its
 * alignment (across one under another, in a grid cell); Fill: the column's width, the cell's, or the
 * space left in a line. Height Fill: the free height of its column (shared with the other Fill
 * elements), the line's or the cell's height; Fit: its content's, placed by Vertical alignment.
 */
.sv-w-fit { --sv-row-grow: 0; --sv-row-basis: auto; --sv-row-min: 0px; --sv-w-self: var(--sv-justify, start); justify-self: var(--sv-justify, start); }
.sv-w-fill { --sv-row-grow: 1; --sv-row-basis: initial; --sv-row-min: initial; --sv-w-self: stretch; justify-self: stretch; }
.sv-h-fit { --sv-col-grow: 0; --sv-h-self: var(--sv-column-justify, flex-start); }
.sv-h-fill { --sv-col-grow: 1; --sv-h-self: stretch; }

/*
 * Cards (columns) and a box around the columns (rows), ADR 0026: the same looks as the
 * ready-made cards (Services). Light looks keep the page's text colors, even inside a dark
 * section; dark and colored ones switch the text colors and the accent (--sv-accent: small
 * labels, icons, text links), and make main buttons light.
 */
:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) {
	padding: var(--sv-space-md);
	border-radius: var(--sv-radius-md);
}

:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary) {
	padding: var(--sv-section-space-lg, var(--sv-space-lg)) var(--sv-section-space-md, var(--sv-space-md));
	border-radius: var(--sv-radius-lg);
}

/* A box around inner columns (in a column) has a card's room, not a section's; "Space inside" (sv-inset-*) wins. */
:where(.sv-column) > :is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary) {
	padding: var(--sv-space-md);
}

:is(.sv-card-soft, .sv-card-light, .sv-box-soft, .sv-box-light) {
	--sv-color-text: var(--sv-ink);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-color-muted: var(--sv-ink-muted);
	--sv-color-border: var(--sv-ink-border);
	color: var(--sv-color-text);
}

/* Main buttons' edge where the accent needs one there (ADR 0108). */
:is(.sv-card-soft, .sv-box-soft) { --sv-button-edge: var(--sv-button-edge-soft); }
:is(.sv-card-light, .sv-box-light) { --sv-button-edge: var(--sv-button-edge-page); }

.sv-card-soft { background-color: var(--sv-color-surface); }
.sv-box-soft { background-color: var(--sv-color-surface); }

.sv-card-light { border: 1px solid var(--sv-color-border); background-color: var(--sv-color-background); box-shadow: 0 1px 2px rgb(16 24 40 / 5%); }
.sv-box-light { border: 1px solid var(--sv-color-border); background-color: var(--sv-color-background); box-shadow: 0 1px 2px rgb(16 24 40 / 5%); }

.sv-card-outlined { border: 1px solid var(--sv-color-border); }
.sv-box-outlined { border: 1px solid var(--sv-color-border); }

.sv-card-dark { background-color: var(--sv-color-inverse); }
.sv-box-dark { background-color: var(--sv-color-inverse); }

:is(.sv-card-dark, .sv-box-dark) {
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 78%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: var(--sv-button-on-dark);
	--sv-button-main-text: var(--sv-button-on-dark-text);
	--sv-button-edge: var(--sv-button-edge-dark);
	color: var(--sv-color-text);
}

.sv-card-primary { background-color: var(--sv-color-primary); }
.sv-box-primary { background-color: var(--sv-color-primary); }

:is(.sv-card-primary, .sv-box-primary) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-primary));
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

.sv-card-secondary { background-color: var(--sv-color-secondary); }
.sv-box-secondary { background-color: var(--sv-color-secondary); }

:is(.sv-card-secondary, .sv-box-secondary) {
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-secondary) 25%, transparent);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-secondary));
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

/*
 * A custom color (ADR 0070) stands in for a look: dark colors get the Dark look's classes, light ones
 * Soft's, so each element's own touches for those looks apply; the fill is the color (set on the
 * element or its cards). Its text colors are the two the light/dark choice measured — white on dark
 * colors, near-black on light ones — whatever the color scheme (rules after the columns' below).
 */
.sv-card-custom { background-color: var(--sv-custom-card); }
.sv-box-custom { background-color: var(--sv-custom-box); }

/*
 * Glass (ADR 0089): a custom color that blurs what is behind it, only where it is chosen (without the
 * variable there is no filter). Its own: a box inside a glass column doesn't turn glass too.
 */
@property --sv-custom-glass {
	syntax: "*";
	inherits: false;
}

:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom) {
	-webkit-backdrop-filter: var(--sv-custom-glass);
	backdrop-filter: var(--sv-custom-glass);
}

/*
 * A gradient of the site's (ADR 0105) as a custom background: the site's --sv-gradient-<id> over a transparent
 * fill, only on the element that chose it (so it follows Your colors).
 */
@property --sv-custom-gradient {
	syntax: "*";
	inherits: false;
}

:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom)[style*="--sv-custom-gradient"] {
	background-image: var(--sv-custom-gradient);
	/* Under a border too: no strip of its far end at the edges. */
	background-origin: border-box;
}

/* Side line (Quote, Numbers, ADR 0031): a line on the start side, in the accent. */
.sv-card-line {
	padding-inline-start: 1.25rem;
	border-inline-start: 4px solid var(--sv-accent, var(--sv-color-primary));
}

/* When the mouse is over a card: a shadow, or the main or accent color. */
/*
 * Shadow (ADR 0090): under a column, a row's box, an element's own box (`shadow`) or each of its cards
 * that has a look (`cardShadow`); on a picture or a button, under the picture or the button. Feather, Soft,
 * Cloud, or a haze in the accent color — only where chosen, and only its own (--sv-drop doesn't pass to
 * what is inside; --sv-card-drop goes to the element's cards). Glass's light edge (--sv-custom-edge) shares the
 * box-shadow; the hover lift still wins.
 */
@property --sv-drop {
	syntax: "*";
	inherits: false;
}

@property --sv-custom-edge {
	syntax: "*";
	inherits: false;
}

.sv-shadow-feather { --sv-drop: 0 1px 4px rgb(15 23 42 / 4%); }
.sv-shadow-soft { --sv-drop: 0 4px 14px rgb(15 23 42 / 7%); }
.sv-shadow-cloud { --sv-drop: 0 10px 30px rgb(15 23 42 / 8%); }
.sv-shadow-haze { --sv-drop: 0 8px 28px color-mix(in srgb, var(--sv-color-primary) 14%, transparent); }
.sv-cardshadow-feather { --sv-card-drop: 0 1px 4px rgb(15 23 42 / 4%); }
.sv-cardshadow-soft { --sv-card-drop: 0 4px 14px rgb(15 23 42 / 7%); }
.sv-cardshadow-cloud { --sv-card-drop: 0 10px 30px rgb(15 23 42 / 8%); }
.sv-cardshadow-haze { --sv-card-drop: 0 8px 28px color-mix(in srgb, var(--sv-color-primary) 14%, transparent); }

/* Who wears it: the element's own box (a picture, a button or a newsletter's field: theirs), each card with a look, glass's edge. */
:is(.sv-shadow-feather, .sv-shadow-soft, .sv-shadow-cloud, .sv-shadow-haze):not(.sv-image, .sv-button, .sv-newsletter),
[style*="--sv-custom-edge"] {
	box-shadow: var(--sv-custom-edge, 0 0 #0000), var(--sv-drop, 0 0 #0000);
}

:is(.sv-cardshadow-feather, .sv-cardshadow-soft, .sv-cardshadow-cloud, .sv-cardshadow-haze) :is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-line, .sv-card-primary, .sv-card-secondary, .sv-card-custom, .sv-card-turns) {
	box-shadow: var(--sv-custom-edge, 0 0 #0000), var(--sv-card-drop);
}

:is(.sv-image.sv-shadow-feather .sv-image__frame, .sv-button.sv-shadow-feather .sv-button__control) { box-shadow: 0 1px 4px rgb(15 23 42 / 4%); }
:is(.sv-image.sv-shadow-soft .sv-image__frame, .sv-button.sv-shadow-soft .sv-button__control) { box-shadow: 0 4px 14px rgb(15 23 42 / 7%); }
:is(.sv-image.sv-shadow-cloud .sv-image__frame, .sv-button.sv-shadow-cloud .sv-button__control) { box-shadow: 0 10px 30px rgb(15 23 42 / 8%); }
:is(.sv-image.sv-shadow-haze .sv-image__frame, .sv-button.sv-shadow-haze .sv-button__control) { box-shadow: 0 8px 28px color-mix(in srgb, var(--sv-color-primary) 14%, transparent); }
/* A Newsletter's: under its field (with the button inside, the field holding both; newsletter/style.css, ADR 0172). */
.sv-newsletter.sv-shadow-feather { --sv-newsletter-field-drop: 0 1px 4px rgb(15 23 42 / 4%); }
.sv-newsletter.sv-shadow-soft { --sv-newsletter-field-drop: 0 4px 14px rgb(15 23 42 / 7%); }
.sv-newsletter.sv-shadow-cloud { --sv-newsletter-field-drop: 0 10px 30px rgb(15 23 42 / 8%); }
.sv-newsletter.sv-shadow-haze { --sv-newsletter-field-drop: 0 8px 28px color-mix(in srgb, var(--sv-color-primary) 14%, transparent); }

.sv-cardhover-lift { border-radius: var(--sv-radius-md); transition: box-shadow 0.25s ease, translate 0.25s ease; }
.sv-cardhover-lift:is(:hover, :focus-within) { box-shadow: 0 18px 40px -16px rgb(16 24 40 / 28%), 0 2px 6px rgb(16 24 40 / 6%); translate: 0 -4px; }

.sv-cardhover-primary { border-radius: var(--sv-radius-md); transition: background-color 0.25s ease, color 0.25s ease; }
.sv-cardhover-primary:is(:hover, :focus-within) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-primary));
	--sv-button-edge: initial;
	background-color: var(--sv-color-primary);
	color: var(--sv-color-text);
}

.sv-cardhover-secondary { border-radius: var(--sv-radius-md); transition: background-color 0.25s ease, color 0.25s ease; }
.sv-cardhover-secondary:is(:hover, :focus-within) {
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-secondary));
	--sv-button-edge: initial;
	background-color: var(--sv-color-secondary);
	color: var(--sv-color-text);
}

/* No card style, background or space inside: give the content room before a color fills it (as Services' plain cards). */
:is(.sv-cardhover-primary, .sv-cardhover-secondary, .sv-cardhover-lift):not(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-card-turns, .sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse, .sv-inset-none, .sv-inset-sm, .sv-inset-md, .sv-inset-lg, .sv-inset-xl, .sv-inset-custom) {
	margin: calc(var(--sv-space-sm) * -1);
	padding: var(--sv-space-sm);
}

/* A column's background color (ADR 0026): readable text and accents, as on the cards; it wins over a card's color. */
.sv-column:is(.sv-bg-background, .sv-bg-surface) {
	--sv-color-text: var(--sv-ink);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-color-muted: var(--sv-ink-muted);
	--sv-color-border: var(--sv-ink-border);
	color: var(--sv-color-text);
}

.sv-column.sv-bg-background {
	background-color: var(--sv-color-background);
}

.sv-column.sv-bg-surface {
	background-color: var(--sv-color-surface);
}

.sv-column.sv-bg-inverse {
	background-color: var(--sv-color-inverse);
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 78%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: var(--sv-button-on-dark);
	--sv-button-main-text: var(--sv-button-on-dark-text);
	--sv-button-edge: var(--sv-button-edge-dark);
	color: var(--sv-color-text);
}

.sv-column.sv-bg-primary {
	background-color: var(--sv-color-primary);
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-primary));
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

.sv-column.sv-bg-secondary {
	background-color: var(--sv-color-secondary);
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-secondary) 25%, transparent);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-secondary));
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

/* A column's custom background color (ADR 0070): its own fill, after the column's named ones. */
.sv-column.sv-bg-custom {
	background-color: var(--sv-custom-bg);
}

/*
 * Text on custom colors (ADR 0070), after every named look so it wins: white on dark colors, with
 * light main buttons in the color's own text (a color equal to the accent never hides them), and labels,
 * links, icons and outline buttons (--sv-accent) white too; near-black text on light ones, where labels,
 * links and icons keep the site's accent color as on the Soft look (ADR 0090).
 */
:is(.sv-card-custom.sv-card-dark, .sv-box-custom.sv-box-dark, .sv-bg-custom.sv-bg-inverse, .sv-section:has(> .sv-section__bg--text-light), .sv-column:has(> .sv-column__bg--text-light)) {
	--sv-color-text: #fff;
	--sv-color-muted: color-mix(in srgb, #fff 78%, transparent);
	--sv-color-border: color-mix(in srgb, #fff 12%, transparent);
	--sv-accent: #fff;
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: #fff;
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

.sv-card-custom.sv-card-dark { --sv-button-main-text: var(--sv-custom-card); }
.sv-box-custom.sv-box-dark { --sv-button-main-text: var(--sv-custom-box); }
.sv-bg-custom.sv-bg-inverse { --sv-button-main-text: var(--sv-custom-bg); }
/*
 * A gradient has no one color, and a see-through one (ADR 0080, glass) shows what is behind it: their light main
 * buttons take the site's dark color for their words (ADR 0105) — the color itself would leave them nearly invisible.
 */
:is(.sv-card-custom.sv-card-dark, .sv-box-custom.sv-box-dark, .sv-bg-custom.sv-bg-inverse):is([style*="--sv-custom-gradient"], [style*="--sv-custom-card:color-mix"], [style*="--sv-custom-box:color-mix"], [style*="--sv-custom-bg:color-mix"]) { --sv-button-main-text: var(--sv-color-inverse); }
:is(.sv-section:has(> .sv-section__bg--text-light), .sv-column:has(> .sv-column__bg--text-light)) { --sv-button-main-text: #10131c; }

:is(.sv-card-custom.sv-card-soft, .sv-box-custom.sv-box-soft, .sv-bg-custom.sv-bg-surface, .sv-section:has(> .sv-section__bg--text-dark), .sv-column:has(> .sv-column__bg--text-dark)) {
	--sv-color-text: #10131c;
	--sv-color-muted: color-mix(in srgb, #10131c 72%, transparent);
	--sv-color-border: color-mix(in srgb, #10131c 14%, transparent);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

/*
 * A solid custom color whose edge the renderers worked out (ADR 0108: --sv-custom-button-edge, a color or transparent):
 * main buttons keep the accent on it, with that edge. Without it (see-through, glass, a gradient, a dark color as close
 * to the accent as its own areas, or gradient buttons) the rules above stand.
 */
:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom)[style*="--sv-custom-button-edge"] {
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-button-edge: var(--sv-custom-button-edge);
}

/* A light custom color the accent doesn't read on (ADR 0108): accent words, icons and Outline buttons in its readable shade. */
:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom)[style*="--sv-custom-accent"] {
	--sv-accent: var(--sv-custom-accent);
}

/*
 * "When the mouse is over it: Accent color" on a card or column with a custom color: the hover's colors win over the
 * custom color's text (above), so it turns white-on-accent like any other card — labels, icons and main buttons in
 * the accent's own text color. The photo looks (Service card on the photo, Team member on the photo) keep their own.
 */
:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom).sv-cardhover-primary:is(:hover, :focus-within):not(.sv-service-card--look-top-open, .sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade, .sv-team-member--arrange-overlay, .sv-image-text--arrange-overlay) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-primary));
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom).sv-cardhover-secondary:is(:hover, :focus-within):not(.sv-service-card--look-top-open, .sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade, .sv-team-member--arrange-overlay, .sv-image-text--arrange-overlay) {
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-button-fill, var(--sv-color-secondary));
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

/*
 * Card colors: Take turns (ADR 0126) — lists of cards (Services, Articles, Projects, Team): card by card, the Soft look, the Dark look, then a muted shade of the accent with white words
 * (--sv-color-turn). Zero-specificity names, so hovers and other looks still win as they do over a card's color.
 */
:where(.sv-card-turns) {
	padding: var(--sv-space-md);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-tile-paint);
}

:where(.sv-card-turns):nth-of-type(3n + 1) {
	--sv-tile-paint: var(--sv-color-surface);
	--sv-color-text: var(--sv-ink);
	--sv-color-muted: var(--sv-ink-muted);
	--sv-color-border: var(--sv-ink-border);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-button-edge: var(--sv-button-edge-soft);
	color: var(--sv-color-text);
}

:where(.sv-card-turns):nth-of-type(3n + 2) {
	--sv-tile-paint: var(--sv-color-inverse);
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 78%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: var(--sv-button-on-dark);
	--sv-button-main-text: var(--sv-button-on-dark-text);
	--sv-button-edge: var(--sv-button-edge-dark);
	color: var(--sv-color-text);
}

:where(.sv-card-turns):nth-of-type(3n) {
	--sv-tile-paint: var(--sv-color-turn, var(--sv-color-inverse));
	--sv-color-text: #fff;
	/* An accent-colored card: its soft text is its text color, never see-through (ADR 0102). */
	--sv-color-muted: #fff;
	--sv-color-border: color-mix(in srgb, #fff 16%, transparent);
	--sv-accent: #fff;
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: #fff;
	--sv-button-main-text: var(--sv-color-turn, var(--sv-color-inverse));
	--sv-button-edge: initial;
	color: var(--sv-color-text);
}

/*
 * Main buttons on dark or colored cards, columns and sections are light (--sv-button-main-*, set with
 * the colors above; button/style.css). Outline buttons there fill with that light look when pointed at
 * (button/style.css, from the same variables).
 */

/* Rounded corners (the site-wide Corners setting scales sm/md/lg), after the boxes and hovers so they win over their corners. */
.sv-round-none { border-radius: 0; }
.sv-round-sm { border-radius: var(--sv-radius-sm); }
.sv-round-md { border-radius: var(--sv-radius-md); }
.sv-round-lg { border-radius: var(--sv-radius-lg); }
.sv-round-full { border-radius: 9999px; }
.sv-round-custom { border-radius: var(--sv-custom-round); }

/* Four corners of one's own (ADR 0141): each in reading order, so they mirror on right-to-left pages. */
.sv-round-custom[style*="--sv-custom-round-ss"] {
	border-start-start-radius: var(--sv-custom-round-ss);
	border-start-end-radius: var(--sv-custom-round-se);
	border-end-end-radius: var(--sv-custom-round-ee);
	border-end-start-radius: var(--sv-custom-round-es);
}

/*
 * Picture shapes (ADR 0113), after the corners so a shape wins over them. The element's photo box takes the shape —
 * Image and About their frame (the photo, its words and its arrow together), Team member and Image & text their
 * photo. Corner shapes set the four logical corners (they mirror on right-to-left pages); drawn shapes are masks: the
 * Persian arch a tall drawing as wide as the photo (its curve never stretches), Blob and Star drawn to the photo's box
 * (the Star square).
 */
.sv-pshape-arch { --sv-pic-ss: 9999px; --sv-pic-se: 9999px; --sv-pic-ee: 0px; --sv-pic-es: 0px; }
.sv-pshape-capsule { --sv-pic-ss: 9999px; --sv-pic-se: 9999px; --sv-pic-ee: 9999px; --sv-pic-es: 9999px; }
.sv-pshape-leaf { --sv-pic-ss: 42% 34%; --sv-pic-se: 0.5rem; --sv-pic-ee: 42% 34%; --sv-pic-es: 0.5rem; }

.sv-pshape-persian {
	--sv-pic-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cpath d='M0 1000V52C0 24 26 9 50 0c24 9 50 24 50 52v948z'/%3E%3C/svg%3E");
	--sv-pic-mask-size: 100% auto;
	--sv-pic-mask-place: top center;
	--sv-pic-ring-size: calc(100% - 4px) auto;
	--sv-pic-ring-place: center 2px;
}

.sv-pshape-blob {
	--sv-pic-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M52 3c21-2 40 12 45 33 5 20-4 33-2 51 2 19-11 34-31 36-19 2-30-9-46-12C2 107-3 91 3 72 9 53 2 43 7 28 12 13 31 5 52 3z'/%3E%3C/svg%3E");
	--sv-pic-mask-size: 100% 100%;
	--sv-pic-mask-place: center;
	--sv-pic-ring-size: calc(100% - 4px) calc(100% - 4px);
	--sv-pic-ring-place: center;
}

.sv-pshape-star {
	--sv-pic-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 0l11.5 22.3 23.9-7.7-7.7 23.9L100 50 77.7 61.5l7.7 23.9-23.9-7.7L50 100 38.5 77.7l-23.9 7.7 7.7-23.9L0 50l22.3-11.5-7.7-23.9 23.9 7.7z'/%3E%3C/svg%3E");
	--sv-pic-mask-size: 100% 100%;
	--sv-pic-mask-place: center;
	--sv-pic-ring-size: calc(100% - 4px) calc(100% - 4px);
	--sv-pic-ring-place: center;
}

:is(.sv-pshape-arch, .sv-pshape-capsule, .sv-pshape-leaf) :is(.sv-image__frame, .sv-team-member__photo) {
	border-start-start-radius: var(--sv-pic-ss);
	border-start-end-radius: var(--sv-pic-se);
	border-end-end-radius: var(--sv-pic-ee);
	border-end-start-radius: var(--sv-pic-es);
}

:is(.sv-pshape-persian, .sv-pshape-blob, .sv-pshape-star) :is(.sv-image__frame, .sv-team-member__photo) {
	border-radius: 0;
	-webkit-mask: var(--sv-pic-mask) var(--sv-pic-mask-place) / var(--sv-pic-mask-size) no-repeat;
	mask: var(--sv-pic-mask) var(--sv-pic-mask-place) / var(--sv-pic-mask-size) no-repeat;
}

/* The Star is square, whatever the proportions chosen. */
.sv-pshape-star :is(.sv-image__img, .sv-team-member__photo) {
	aspect-ratio: 1;
	object-fit: cover;
}

/*
 * Behind the picture (ADR 0113): a Block (the photo's own silhouette in a soft color), an Outline or Dots, set off toward
 * the end and the bottom (mirrored on right-to-left pages), behind the photo's box — Image the element itself, About its
 * picture, Team member and Image & text the photo's place — which keeps room for it. Its color: the one chosen, else a
 * soft tint of the accent for the Block and the accent for Outline and Dots.
 */
.sv-pbackc-tint { --sv-pback-color: color-mix(in srgb, var(--sv-color-primary) 18%, var(--sv-color-background)); }
.sv-pbackc-primary { --sv-pback-color: var(--sv-color-primary); }
.sv-pbackc-surface { --sv-pback-color: var(--sv-color-surface); }
.sv-pbackc-inverse { --sv-pback-color: var(--sv-color-inverse); }
.sv-pbackc-custom { --sv-pback-color: var(--sv-custom-pbackc); }

:is(.sv-pback-block, .sv-pback-outline, .sv-pback-dots) {
	--sv-pback-off: 1.25rem;
	--sv-pback-x: var(--sv-pback-off);
}

:where([dir="rtl"]) :is(.sv-pback-block, .sv-pback-outline, .sv-pback-dots) {
	--sv-pback-x: calc(-1 * var(--sv-pback-off));
}

@media (width <= 767px) {
	:is(.sv-pback-block, .sv-pback-outline, .sv-pback-dots) {
		--sv-pback-off: 0.875rem;
	}
}

:is(.sv-pback-block, .sv-pback-outline, .sv-pback-dots):is(.sv-image),
:is(.sv-pback-block, .sv-pback-outline, .sv-pback-dots) :is(.sv-about__image, .sv-team-member__media) {
	position: relative;
	isolation: isolate;
	margin-block-end: var(--sv-pback-off);
	margin-inline-end: var(--sv-pback-off);
}

.sv-pback-block:is(.sv-image),
.sv-pback-block :is(.sv-about__image, .sv-team-member__media) {
	filter: drop-shadow(var(--sv-pback-x) var(--sv-pback-off) 0 var(--sv-pback-color, color-mix(in srgb, var(--sv-color-primary) 18%, var(--sv-color-background))));
}

:is(.sv-pback-outline, .sv-pback-dots):is(.sv-image)::before,
:is(.sv-pback-outline, .sv-pback-dots) :is(.sv-about__image, .sv-team-member__media)::before {
	position: absolute;
	z-index: -1;
	inset-block: var(--sv-pback-off) calc(-1 * var(--sv-pback-off));
	inset-inline: var(--sv-pback-off) calc(-1 * var(--sv-pback-off));
	content: "";
	pointer-events: none;
}

/* The Outline follows the photo's shape: its corners, or a ring of its drawing. */
.sv-pback-outline:is(.sv-image)::before,
.sv-pback-outline :is(.sv-about__image, .sv-team-member__media)::before {
	border: 2px solid var(--sv-pback-color, var(--sv-color-primary));
	border-radius: inherit;
}

.sv-pback-outline .sv-team-member__media::before { border-radius: var(--sv-radius-md); }
:is(.sv-team-member--shape-circle, .sv-image-text--shape-circle).sv-pback-outline .sv-team-member__media::before,
.sv-pback-outline .sv-team-member--shape-circle .sv-team-member__media::before { border-radius: 50%; }

:is(.sv-pshape-arch, .sv-pshape-capsule, .sv-pshape-leaf).sv-pback-outline:is(.sv-image)::before,
:is(.sv-pshape-arch, .sv-pshape-capsule, .sv-pshape-leaf).sv-pback-outline :is(.sv-about__image, .sv-team-member__media)::before {
	border-start-start-radius: var(--sv-pic-ss);
	border-start-end-radius: var(--sv-pic-se);
	border-end-end-radius: var(--sv-pic-ee);
	border-end-start-radius: var(--sv-pic-es);
}

:is(.sv-pshape-persian, .sv-pshape-blob, .sv-pshape-star).sv-pback-outline:is(.sv-image)::before,
:is(.sv-pshape-persian, .sv-pshape-blob, .sv-pshape-star).sv-pback-outline :is(.sv-about__image, .sv-team-member__media)::before {
	border: 0;
	border-radius: 0;
	background: var(--sv-pback-color, var(--sv-color-primary));
	-webkit-mask: linear-gradient(#000 0 0) bottom / 100% var(--sv-pic-ring-base, 2px) no-repeat, var(--sv-pic-mask) var(--sv-pic-mask-place) / var(--sv-pic-mask-size) no-repeat, var(--sv-pic-mask) var(--sv-pic-ring-place) / var(--sv-pic-ring-size) no-repeat;
	-webkit-mask-composite: source-over, xor;
	mask: linear-gradient(#000 0 0) bottom / 100% var(--sv-pic-ring-base, 2px) no-repeat add, var(--sv-pic-mask) var(--sv-pic-mask-place) / var(--sv-pic-mask-size) no-repeat exclude, var(--sv-pic-mask) var(--sv-pic-ring-place) / var(--sv-pic-ring-size) no-repeat;
}

/* Blob and Star end in their drawing: no line along the bottom. */
:is(.sv-pshape-blob, .sv-pshape-star) { --sv-pic-ring-base: 0px; }

/* Dots: a square of dots behind the photo's lower end corner. */
.sv-pback-dots:is(.sv-image)::before,
.sv-pback-dots :is(.sv-about__image, .sv-team-member__media)::before {
	inset-block-start: 38%;
	inset-inline-start: 38%;
	background: radial-gradient(var(--sv-pback-color, var(--sv-color-primary)) 1.6px, transparent 1.9px) 0 0 / 12px 12px;
}

/* Space inside (columns), after the cards so it wins over their room. */
.sv-inset-none { padding: 0; }
.sv-inset-sm { padding: var(--sv-space-step-sm, var(--sv-space-sm)); }
.sv-inset-md { padding: var(--sv-space-step-md, var(--sv-space-md)); }
.sv-inset-lg { padding: var(--sv-space-step-lg, var(--sv-space-lg)); }
.sv-inset-xl { padding: var(--sv-space-step-xl, var(--sv-space-xl)); }
.sv-inset-custom { padding: var(--sv-custom-inset); }

/* Space inside the words (ADR 0145): Hero, Call to action and About draw it around their words' side only. */
.sv-tinset-none { --sv-text-inset: 0px; }
.sv-tinset-sm { --sv-text-inset: var(--sv-space-sm); }
.sv-tinset-md { --sv-text-inset: var(--sv-space-md); }
.sv-tinset-lg { --sv-text-inset: var(--sv-space-lg); }
.sv-tinset-custom { --sv-text-inset: var(--sv-custom-tinset); }

@media (prefers-reduced-motion: reduce) {
	:is(.sv-cardhover-lift, .sv-cardhover-primary, .sv-cardhover-secondary) {
		transition: none;
	}

	.sv-cardhover-lift:is(:hover, :focus-within) {
		translate: none;
	}
}

/*
 * Text style: one of the site's type styles, with its font — the heading styles in the site's heading
 * font (bold), Large, Body and Small in its body font (ADR 0194) — so text styled as a heading looks like the site’s
 * headings. Line heights follow the language (--sv-leading, core.css).
 */
.sv-type-display { font-family: var(--sv-font-heading); font-size: var(--sv-size-display); 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.05 * var(--sv-leading, 1)); }
.sv-type-h1 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h1); 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.1 * var(--sv-leading, 1)); }
.sv-type-h2 { 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)); }
.sv-type-h3 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h3); 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.2 * var(--sv-leading, 1)); }
.sv-type-h4 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h4); 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.3 * var(--sv-leading, 1)); }
.sv-type-large { font-family: var(--sv-font-body); font-size: var(--sv-size-large); font-weight: 400; line-height: calc(1.55 * var(--sv-leading-body, 1)); }
.sv-type-body { font-family: var(--sv-font-body); font-size: var(--sv-size-body); font-weight: 400; line-height: calc(1.6 * var(--sv-leading-body, 1)); }
.sv-type-small { font-family: var(--sv-font-body); font-size: var(--sv-size-small); font-weight: 400; line-height: calc(1.5 * var(--sv-leading-body, 1)); }
/* A size of one's own (ADR 0082): the element keeps its own font, only the size changes. */
.sv-type-custom { font-size: var(--sv-custom-type); }

/* Weight (ADR 0082), after Text style so it wins over the style's own weight. */
.sv-weight-light { font-weight: 300; }
.sv-weight-normal { font-weight: 400; }
.sv-weight-medium { font-weight: 500; }
.sv-weight-semibold { font-weight: 600; }
.sv-weight-bold { font-weight: 700; }

/* Smaller screens: a padding choice also ends a half/full-screen height set for larger ones. */
@media (max-width: 1024px) {
	.sv-t-align-start { --sv-justify: start; --sv-line-margin: 0; text-align: start; }
	.sv-t-align-center { --sv-justify: center; --sv-line-margin: auto; text-align: center; }
	.sv-t-align-end { --sv-justify: end; --sv-line-margin: auto 0; text-align: end; }

	.sv-t-pad-none { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-none, var(--sv-space-none)); padding-block: var(--sv-pad); }
	.sv-t-pad-sm { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-sm, var(--sv-space-sm)); padding-block: var(--sv-pad); }
	.sv-t-pad-md { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-md, var(--sv-space-md)); padding-block: var(--sv-pad); }
	.sv-t-pad-lg { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-lg, var(--sv-space-lg)); padding-block: var(--sv-pad); }
	.sv-t-pad-xl { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-xl, var(--sv-space-xl)); padding-block: var(--sv-pad); }
	.sv-t-pad-half { display: grid; align-content: center; min-block-size: 50svh; }
	.sv-t-pad-screen { display: grid; align-content: center; min-block-size: 100svh; }

	/* Text style per device (ADR 0082). */
	.sv-t-type-display { font-family: var(--sv-font-heading); font-size: var(--sv-size-display); 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.05 * var(--sv-leading, 1)); }
	.sv-t-type-h1 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h1); 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.1 * var(--sv-leading, 1)); }
	.sv-t-type-h2 { 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)); }
	.sv-t-type-h3 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h3); 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.2 * var(--sv-leading, 1)); }
	.sv-t-type-h4 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h4); 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.3 * var(--sv-leading, 1)); }
	.sv-t-type-large { font-family: var(--sv-font-body); font-size: var(--sv-size-large); font-weight: 400; line-height: calc(1.55 * var(--sv-leading-body, 1)); }
	.sv-t-type-body { font-family: var(--sv-font-body); font-size: var(--sv-size-body); font-weight: 400; line-height: calc(1.6 * var(--sv-leading-body, 1)); }
	.sv-t-type-small { font-family: var(--sv-font-body); font-size: var(--sv-size-small); font-weight: 400; line-height: calc(1.5 * var(--sv-leading-body, 1)); }
	.sv-t-type-custom { font-size: var(--sv-custom-type-t); }
	/* A weight chosen for every screen stays. */
	.sv-weight-light { font-weight: 300; }
	.sv-weight-normal { font-weight: 400; }
	.sv-weight-medium { font-weight: 500; }
	.sv-weight-semibold { font-weight: 600; }
	.sv-weight-bold { font-weight: 700; }

	/* Spacing lists per device (ADR 0081): sizes and Custom. */
	.sv-t-pad-custom { min-block-size: 0; --sv-pad: var(--sv-custom-pad-t); --sv-pad-x: var(--sv-custom-pad-inline-t); padding-block: var(--sv-pad); }
	.sv-t-above-none { margin-block-start: 0; }
	.sv-t-above-sm { margin-block-start: var(--sv-space-step-sm, var(--sv-space-sm)); }
	.sv-t-above-md { margin-block-start: var(--sv-space-step-md, var(--sv-space-md)); }
	.sv-t-above-lg { margin-block-start: var(--sv-space-step-lg, var(--sv-space-lg)); }
	.sv-t-above-xl { margin-block-start: var(--sv-space-step-xl, var(--sv-space-xl)); }
	.sv-t-above-custom { margin-block-start: var(--sv-custom-above-t); }
	.sv-t-below-none { margin-block-end: 0; }
	.sv-t-below-sm { margin-block-end: var(--sv-space-step-sm, var(--sv-space-sm)); }
	.sv-t-below-md { margin-block-end: var(--sv-space-step-md, var(--sv-space-md)); }
	.sv-t-below-lg { margin-block-end: var(--sv-space-step-lg, var(--sv-space-lg)); }
	.sv-t-below-xl { margin-block-end: var(--sv-space-step-xl, var(--sv-space-xl)); }
	.sv-t-below-custom { margin-block-end: var(--sv-custom-below-t); }
	.sv-t-around-none { padding-block: 0; }
	.sv-t-around-sm { padding-block: var(--sv-space-step-sm, var(--sv-space-xs)); }
	.sv-t-around-md { padding-block: var(--sv-space-step-md, var(--sv-space-sm)); }
	.sv-t-around-lg { padding-block: var(--sv-space-step-lg, var(--sv-space-md)); }
	.sv-t-around-xl { padding-block: var(--sv-space-step-xl, var(--sv-space-lg)); }
	.sv-t-around-custom { padding-block: var(--sv-custom-around-t); }
	.sv-t-gap-none { gap: 0; }
	.sv-t-gap-sm { gap: var(--sv-space-step-sm, var(--sv-space-xs)); }
	.sv-t-gap-md { gap: var(--sv-space-step-md, var(--sv-space-sm)); }
	.sv-t-gap-lg { gap: var(--sv-space-step-lg, var(--sv-space-md)); }
	.sv-t-gap-xl { gap: var(--sv-space-step-xl, var(--sv-space-lg)); }
	.sv-t-gap-custom { gap: var(--sv-custom-gap-t); }
	.sv-t-colgap-none { --sv-colgap: 0px; column-gap: 0px; }
	.sv-t-colgap-sm { --sv-colgap: var(--sv-space-step-sm, var(--sv-space-sm)); column-gap: var(--sv-space-step-sm, var(--sv-space-sm)); }
	.sv-t-colgap-md { --sv-colgap: var(--sv-space-step-md, var(--sv-space-md)); column-gap: var(--sv-space-step-md, var(--sv-space-md)); }
	.sv-t-colgap-lg { --sv-colgap: var(--sv-space-step-lg, var(--sv-space-lg)); column-gap: var(--sv-space-step-lg, var(--sv-space-lg)); }
	.sv-t-colgap-xl { --sv-colgap: var(--sv-space-step-xl, var(--sv-space-xl)); column-gap: var(--sv-space-step-xl, var(--sv-space-xl)); }
	.sv-t-colgap-custom { --sv-colgap: var(--sv-custom-colgap-t); column-gap: var(--sv-custom-colgap-t); }
	.sv-t-rowgap-sm { --sv-rowgap: var(--sv-section-space-sm, var(--sv-space-sm)); }
	.sv-t-rowgap-md { --sv-rowgap: var(--sv-section-space-md, var(--sv-space-md)); }
	.sv-t-rowgap-lg { --sv-rowgap: var(--sv-section-space-lg, var(--sv-space-lg)); }
	.sv-t-rowgap-xl { --sv-rowgap: var(--sv-section-space-xl, var(--sv-space-xl)); }
	.sv-t-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap-t); }

	.sv-section.sv-t-height-none { min-block-size: 0; }
	.sv-section.sv-t-height-sm { min-block-size: 320px; }
	.sv-section.sv-t-height-md { min-block-size: 480px; }
	.sv-section.sv-t-height-lg { min-block-size: 640px; }
	.sv-section.sv-t-height-half { min-block-size: 50svh; }
	.sv-section.sv-t-height-screen { min-block-size: 100svh; }
	.sv-section.sv-t-height-custom { min-block-size: var(--sv-custom-height-t); }

	.sv-section.sv-t-frame-none { margin-block: 0; margin-inline: 0; }
	.sv-section.sv-t-frame-sm { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-t-frame-md { margin-block: 20px; margin-inline: 20px; }
	.sv-section.sv-t-frame-lg { margin-block: 32px; margin-inline: 32px; }
	.sv-section.sv-t-frame-custom { margin-block: var(--sv-custom-frame-block-t); margin-inline: var(--sv-custom-frame-inline-t); }

	.sv-t-boxgap-none { --sv-box-gap: 0px; }
	.sv-t-boxgap-sm { --sv-box-gap: var(--sv-section-space-sm, var(--sv-space-sm)); }
	.sv-t-boxgap-md { --sv-box-gap: var(--sv-section-space-md, var(--sv-space-md)); }
	.sv-t-boxgap-lg { --sv-box-gap: var(--sv-section-space-lg, var(--sv-space-lg)); }
	.sv-t-boxgap-custom { --sv-box-gap: var(--sv-custom-boxgap-t); }

	.sv-t-cols-keep { --sv-fit-on: 1; display: grid; grid-template-columns: var(--sv-cols); }
	.sv-t-cols-two { --sv-fit-on: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-t-cols-stack { --sv-fit-on: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
	.sv-t-cols-reverse { --sv-fit-on: 0; display: flex; flex-direction: column-reverse; }

	.sv-t-flow-vertical { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: initial; display: flex; flex-flow: column nowrap; align-content: normal; align-items: stretch; justify-content: var(--sv-column-justify, flex-start); }
	.sv-t-flow-horizontal { --sv-in-row: 1; --sv-flow-basis: 0%; --sv-flow-min: 10rem; --sv-row-self: auto; display: flex; flex-flow: row wrap; align-content: var(--sv-column-justify, flex-start); align-items: var(--sv-column-justify, flex-start); justify-content: var(--sv-justify, start); }
	.sv-t-flow-grid2 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-t-flow-grid3 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-t-flow-grid4 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	:is(.sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4) > .sv-image { container-type: inline-size; inline-size: auto; }
	:is(.sv-t-flow-vertical, .sv-t-flow-horizontal) > .sv-image { container-type: normal; }
	:is(.sv-t-flow-vertical, .sv-t-flow-horizontal) > .sv-image:not(.sv-image--size-10, .sv-image--aspect-fill) { inline-size: fit-content; }
	:where(.sv-t-flow-vertical) > * { align-self: var(--sv-w-self, auto); }
	:where(.sv-t-flow-horizontal, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4) > * { align-self: var(--sv-h-self, auto); }
}

@media (max-width: 767px) {
	/*
	 * Height on phones (ADR 0075): Small, Medium and Large a quarter less. The tablet choice is restated
	 * after the larger screens' so it still wins on phones; a phone's own choice comes last.
	 */
	.sv-section.sv-height-sm { min-block-size: 240px; }
	.sv-section.sv-height-md { min-block-size: 360px; }
	.sv-section.sv-height-lg { min-block-size: 480px; }
	.sv-section.sv-t-height-none { min-block-size: 0; }
	.sv-section.sv-t-height-sm { min-block-size: 240px; }
	.sv-section.sv-t-height-md { min-block-size: 360px; }
	.sv-section.sv-t-height-lg { min-block-size: 480px; }
	.sv-section.sv-t-height-half { min-block-size: 50svh; }
	.sv-section.sv-t-height-screen { min-block-size: 100svh; }
	.sv-section.sv-t-height-custom { min-block-size: var(--sv-custom-height-t); }
	.sv-section.sv-m-height-none { min-block-size: 0; }
	.sv-section.sv-m-height-sm { min-block-size: 240px; }
	.sv-section.sv-m-height-md { min-block-size: 360px; }
	.sv-section.sv-m-height-lg { min-block-size: 480px; }
	.sv-section.sv-m-height-half { min-block-size: 50svh; }
	.sv-section.sv-m-height-screen { min-block-size: 100svh; }
	.sv-section.sv-m-height-custom { min-block-size: var(--sv-custom-height-m); }

	/* Space around on phones (ADR 0076): smaller; the tablet choice restated so it still wins, the phone's last. */
	.sv-section.sv-frame-sm { margin-block: 8px; margin-inline: 8px; }
	.sv-section.sv-frame-md { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-frame-lg { margin-block: 16px; margin-inline: 16px; }
	.sv-section.sv-t-frame-none { margin-block: 0; margin-inline: 0; }
	.sv-section.sv-t-frame-sm { margin-block: 8px; margin-inline: 8px; }
	.sv-section.sv-t-frame-md { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-t-frame-lg { margin-block: 16px; margin-inline: 16px; }
	.sv-section.sv-t-frame-custom { margin-block: var(--sv-custom-frame-block-t); margin-inline: var(--sv-custom-frame-inline-t); }
	.sv-section.sv-m-frame-none { margin-block: 0; margin-inline: 0; }
	.sv-section.sv-m-frame-sm { margin-block: 8px; margin-inline: 8px; }
	.sv-section.sv-m-frame-md { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-m-frame-lg { margin-block: 16px; margin-inline: 16px; }
	.sv-section.sv-m-frame-custom { margin-block: var(--sv-custom-frame-block-m); margin-inline: var(--sv-custom-frame-inline-m); }

	.sv-m-boxgap-none { --sv-box-gap: 0px; }
	.sv-m-boxgap-sm { --sv-box-gap: var(--sv-section-space-sm, var(--sv-space-sm)); }
	.sv-m-boxgap-md { --sv-box-gap: var(--sv-section-space-md, var(--sv-space-md)); }
	.sv-m-boxgap-lg { --sv-box-gap: var(--sv-section-space-lg, var(--sv-space-lg)); }
	.sv-m-boxgap-custom { --sv-box-gap: var(--sv-custom-boxgap-m); }

	.sv-m-align-start { --sv-justify: start; --sv-line-margin: 0; text-align: start; }
	.sv-m-align-center { --sv-justify: center; --sv-line-margin: auto; text-align: center; }
	.sv-m-align-end { --sv-justify: end; --sv-line-margin: auto 0; text-align: end; }

	.sv-m-pad-none { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-none, var(--sv-space-none)); padding-block: var(--sv-pad); }
	.sv-m-pad-sm { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-sm, var(--sv-space-sm)); padding-block: var(--sv-pad); }
	.sv-m-pad-md { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-md, var(--sv-space-md)); padding-block: var(--sv-pad); }
	.sv-m-pad-lg { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-lg, var(--sv-space-lg)); padding-block: var(--sv-pad); }
	.sv-m-pad-xl { min-block-size: 0; --sv-pad-x: initial; --sv-pad: var(--sv-section-space-xl, var(--sv-space-xl)); padding-block: var(--sv-pad); }
	.sv-m-pad-half { display: grid; align-content: center; min-block-size: 50svh; }
	.sv-m-pad-screen { display: grid; align-content: center; min-block-size: 100svh; }

	/* Text style per device (ADR 0082). */
	.sv-m-type-display { font-family: var(--sv-font-heading); font-size: var(--sv-size-display); 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.05 * var(--sv-leading, 1)); }
	.sv-m-type-h1 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h1); 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.1 * var(--sv-leading, 1)); }
	.sv-m-type-h2 { 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)); }
	.sv-m-type-h3 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h3); 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.2 * var(--sv-leading, 1)); }
	.sv-m-type-h4 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h4); 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.3 * var(--sv-leading, 1)); }
	.sv-m-type-large { font-family: var(--sv-font-body); font-size: var(--sv-size-large); font-weight: 400; line-height: calc(1.55 * var(--sv-leading-body, 1)); }
	.sv-m-type-body { font-family: var(--sv-font-body); font-size: var(--sv-size-body); font-weight: 400; line-height: calc(1.6 * var(--sv-leading-body, 1)); }
	.sv-m-type-small { font-family: var(--sv-font-body); font-size: var(--sv-size-small); font-weight: 400; line-height: calc(1.5 * var(--sv-leading-body, 1)); }
	.sv-m-type-custom { font-size: var(--sv-custom-type-m); }
	/* A weight chosen for every screen stays. */
	.sv-weight-light { font-weight: 300; }
	.sv-weight-normal { font-weight: 400; }
	.sv-weight-medium { font-weight: 500; }
	.sv-weight-semibold { font-weight: 600; }
	.sv-weight-bold { font-weight: 700; }
	.sv-t-type-custom { font-size: var(--sv-custom-type-t); }

	/* The tablet's Custom spacing is restated so it still wins on phones; a phone's own comes last. */
	.sv-t-pad-custom { min-block-size: 0; --sv-pad: var(--sv-custom-pad-t); --sv-pad-x: var(--sv-custom-pad-inline-t); padding-block: var(--sv-pad); }
	.sv-t-above-custom { margin-block-start: var(--sv-custom-above-t); }
	.sv-t-below-custom { margin-block-end: var(--sv-custom-below-t); }
	.sv-t-around-custom { padding-block: var(--sv-custom-around-t); }
	.sv-t-gap-custom { gap: var(--sv-custom-gap-t); }
	.sv-t-colgap-custom { --sv-colgap: var(--sv-custom-colgap-t); column-gap: var(--sv-custom-colgap-t); }
	.sv-t-rowgap-sm { --sv-rowgap: var(--sv-section-space-sm, var(--sv-space-sm)); }
	.sv-t-rowgap-md { --sv-rowgap: var(--sv-section-space-md, var(--sv-space-md)); }
	.sv-t-rowgap-lg { --sv-rowgap: var(--sv-section-space-lg, var(--sv-space-lg)); }
	.sv-t-rowgap-xl { --sv-rowgap: var(--sv-section-space-xl, var(--sv-space-xl)); }
	.sv-t-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap-t); }

	/* Spacing lists per device (ADR 0081): sizes and Custom. */
	.sv-m-pad-custom { min-block-size: 0; --sv-pad: var(--sv-custom-pad-m); --sv-pad-x: var(--sv-custom-pad-inline-m); padding-block: var(--sv-pad); }
	.sv-m-above-none { margin-block-start: 0; }
	.sv-m-above-sm { margin-block-start: var(--sv-space-step-sm, var(--sv-space-sm)); }
	.sv-m-above-md { margin-block-start: var(--sv-space-step-md, var(--sv-space-md)); }
	.sv-m-above-lg { margin-block-start: var(--sv-space-step-lg, var(--sv-space-lg)); }
	.sv-m-above-xl { margin-block-start: var(--sv-space-step-xl, var(--sv-space-xl)); }
	.sv-m-above-custom { margin-block-start: var(--sv-custom-above-m); }
	.sv-m-below-none { margin-block-end: 0; }
	.sv-m-below-sm { margin-block-end: var(--sv-space-step-sm, var(--sv-space-sm)); }
	.sv-m-below-md { margin-block-end: var(--sv-space-step-md, var(--sv-space-md)); }
	.sv-m-below-lg { margin-block-end: var(--sv-space-step-lg, var(--sv-space-lg)); }
	.sv-m-below-xl { margin-block-end: var(--sv-space-step-xl, var(--sv-space-xl)); }
	.sv-m-below-custom { margin-block-end: var(--sv-custom-below-m); }
	.sv-m-around-none { padding-block: 0; }
	.sv-m-around-sm { padding-block: var(--sv-space-step-sm, var(--sv-space-xs)); }
	.sv-m-around-md { padding-block: var(--sv-space-step-md, var(--sv-space-sm)); }
	.sv-m-around-lg { padding-block: var(--sv-space-step-lg, var(--sv-space-md)); }
	.sv-m-around-xl { padding-block: var(--sv-space-step-xl, var(--sv-space-lg)); }
	.sv-m-around-custom { padding-block: var(--sv-custom-around-m); }
	.sv-m-gap-none { gap: 0; }
	.sv-m-gap-sm { gap: var(--sv-space-step-sm, var(--sv-space-xs)); }
	.sv-m-gap-md { gap: var(--sv-space-step-md, var(--sv-space-sm)); }
	.sv-m-gap-lg { gap: var(--sv-space-step-lg, var(--sv-space-md)); }
	.sv-m-gap-xl { gap: var(--sv-space-step-xl, var(--sv-space-lg)); }
	.sv-m-gap-custom { gap: var(--sv-custom-gap-m); }
	.sv-m-colgap-none { --sv-colgap: 0px; column-gap: 0px; }
	.sv-m-colgap-sm { --sv-colgap: var(--sv-space-step-sm, var(--sv-space-sm)); column-gap: var(--sv-space-step-sm, var(--sv-space-sm)); }
	.sv-m-colgap-md { --sv-colgap: var(--sv-space-step-md, var(--sv-space-md)); column-gap: var(--sv-space-step-md, var(--sv-space-md)); }
	.sv-m-colgap-lg { --sv-colgap: var(--sv-space-step-lg, var(--sv-space-lg)); column-gap: var(--sv-space-step-lg, var(--sv-space-lg)); }
	.sv-m-colgap-xl { --sv-colgap: var(--sv-space-step-xl, var(--sv-space-xl)); column-gap: var(--sv-space-step-xl, var(--sv-space-xl)); }
	.sv-m-colgap-custom { --sv-colgap: var(--sv-custom-colgap-m); column-gap: var(--sv-custom-colgap-m); }
	.sv-m-rowgap-sm { --sv-rowgap: var(--sv-section-space-sm, var(--sv-space-sm)); }
	.sv-m-rowgap-md { --sv-rowgap: var(--sv-section-space-md, var(--sv-space-md)); }
	.sv-m-rowgap-lg { --sv-rowgap: var(--sv-section-space-lg, var(--sv-space-lg)); }
	.sv-m-rowgap-xl { --sv-rowgap: var(--sv-section-space-xl, var(--sv-space-xl)); }
	.sv-m-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap-m); }

	.sv-m-cols-keep { --sv-fit-on: 1; display: grid; grid-template-columns: var(--sv-cols); }
	.sv-m-cols-two { --sv-fit-on: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-m-cols-stack { --sv-fit-on: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
	.sv-m-cols-reverse { --sv-fit-on: 0; display: flex; flex-direction: column-reverse; }

	.sv-m-flow-vertical { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: initial; display: flex; flex-flow: column nowrap; align-content: normal; align-items: stretch; justify-content: var(--sv-column-justify, flex-start); }
	.sv-m-flow-horizontal { --sv-in-row: 1; --sv-flow-basis: 0%; --sv-flow-min: 10rem; --sv-row-self: auto; display: flex; flex-flow: row wrap; align-content: var(--sv-column-justify, flex-start); align-items: var(--sv-column-justify, flex-start); justify-content: var(--sv-justify, start); }
	.sv-m-flow-grid2 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-m-flow-grid3 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-m-flow-grid4 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	:is(.sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4) > .sv-image { container-type: inline-size; inline-size: auto; }
	:is(.sv-m-flow-vertical, .sv-m-flow-horizontal) > .sv-image { container-type: normal; }
	:is(.sv-m-flow-vertical, .sv-m-flow-horizontal) > .sv-image:not(.sv-image--size-10, .sv-image--aspect-fill) { inline-size: fit-content; }
	:where(.sv-m-flow-vertical) > * { align-self: var(--sv-w-self, auto); }
	:where(.sv-m-flow-horizontal, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4) > * { align-self: var(--sv-h-self, auto); }
}

/*
 * Spacing's Sides (ADR 0109): the room only above the content or only below it, on every device — after every
 * device's Spacing so it wins (Top and bottom, the default, has no rule).
 */
.sv-padon-top { padding-block-end: 0; }
.sv-padon-bottom { padding-block-start: 0; }

/*
 * Visibility (ADR 0110): hidden on desktop (d), tablets (t) and/or phones (m) for visitors. The editor's canvas keeps
 * them, faded (canvas.css), so they can still be selected: its elements carry data-sv-node, visitors' pages never do.
 */
@media (min-width: 1025px) {
	:is(.sv-vis-d, .sv-vis-dt, .sv-vis-dm, .sv-vis-dtm):not([data-sv-node]) { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	:is(.sv-vis-t, .sv-vis-dt, .sv-vis-tm, .sv-vis-dtm):not([data-sv-node]) { display: none !important; }
}

@media (max-width: 767px) {
	:is(.sv-vis-m, .sv-vis-dm, .sv-vis-tm, .sv-vis-dtm):not([data-sv-node]) { display: none !important; }
}

/*
 * Responsive settings (ADR 0115). Tablets (up to 1024px) and phones (up to 767px), phones last so they win; a phone
 * without its own value follows the tablet's.
 * - Size: a picture's width on this screen (Image: its scale; Image & text, Team member: the photo's place; About: its
 *   picture's scale).
 * - Show as: Tabs above, or an Accordion (each picture under its tab; tabs/view.js moves them, phones by default).
 * - Per row: the cards of a grid on this screen.
 * - Order: a column first or last.
 * - Full-width button: on every screen size (desktop too), turned off again per screen size.
 * - Photo focus: which part of a section's or column's photo stays in view.
 */
.sv-button.sv-fullw-on .sv-button__control,
.sv-fullw-on .sv-button .sv-button__control {
	inline-size: 100%;
}

.sv-button.sv-fullw-on .sv-button__group,
.sv-fullw-on .sv-button .sv-button__group {
	display: flex;
}

.sv-fullw-off .sv-button__control {
	inline-size: auto;
}

/*
 * The photo's Size on every screen, and how buttons sit (ADR 0157: Hero and Hero slider, whose stylesheets use these):
 * side by side, or one under another lined up by the Alignment.
 */
.sv-bflow-horizontal { --sv-bflow: row; --sv-bflow-items: normal; }
.sv-bflow-vertical { --sv-bflow: column; --sv-bflow-items: var(--sv-justify, start); }
.sv-psize-full { --sv-psize-media: 100%; }
.sv-psize-75 { --sv-psize-media: 75%; }
.sv-psize-60 { --sv-psize-media: 60%; }
.sv-psize-50 { --sv-psize-media: 50%; }

@media (max-width: 1024px) {
	.sv-t-psize-full { --sv-image-scale: 1; --sv-team-media: 100%; --sv-psize-media: 100%; }
	.sv-t-psize-75 { --sv-image-scale: 0.75; --sv-team-media: 75%; --sv-psize-media: 75%; }
	.sv-t-psize-60 { --sv-image-scale: 0.6; --sv-team-media: 60%; --sv-psize-media: 60%; }
	.sv-t-psize-50 { --sv-image-scale: 0.5; --sv-team-media: 50%; --sv-psize-media: 50%; }

	/* The Team section's members (each sets its own photo size): the section's size on this screen. */
	.sv-team:is(.sv-t-psize-full, .sv-t-psize-75, .sv-t-psize-60, .sv-t-psize-50) .sv-team-member { --sv-team-media: var(--sv-psize-media); }

	.sv-image:is(.sv-t-psize-full, .sv-t-psize-75, .sv-t-psize-60, .sv-t-psize-50):not(.sv-image--aspect-fill) {
		--sv-w-self: var(--sv-justify, start);
		inline-size: fit-content;
	}

	.sv-image:is(.sv-t-psize-full, .sv-t-psize-75, .sv-t-psize-60, .sv-t-psize-50):not(.sv-image--aspect-fill, .sv-image--aspect-auto) .sv-image__frame {
		display: block;
		inline-size: calc(40px + (var(--sv-fit-base, 100cqi) - 40px) * var(--sv-image-scale, 1));
	}

	.sv-image--aspect-auto:is(.sv-t-psize-full, .sv-t-psize-75, .sv-t-psize-60, .sv-t-psize-50),
	.sv-image--aspect-auto:is(.sv-t-psize-full, .sv-t-psize-75, .sv-t-psize-60, .sv-t-psize-50) .sv-image__frame {
		max-inline-size: min(100%, calc(40px + (var(--sv-fit-base, 100cqi) - 40px) * var(--sv-image-scale, 1)));
	}

	.sv-tabs.sv-t-tshow-top { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.sv-tabs.sv-t-tshow-top > .sv-tabs__side { display: grid; order: 0; }
	.sv-tabs.sv-t-tshow-top .sv-tabs__list { order: 0; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
	.sv-tabs.sv-t-tshow-top .sv-tabs__head { justify-self: center; text-align: center; }
	.sv-tabs.sv-t-tshow-top .sv-tabs__panels { justify-self: center; inline-size: 100%; }
	.sv-tabs.sv-t-tshow-accordion { grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-md); }
	.sv-tabs.sv-t-tshow-accordion :is(.sv-tabs__side, .sv-tabs__list) { order: 0; }
	.sv-tabs.sv-t-tshow-accordion .sv-tabs__list { grid-template-columns: minmax(0, 1fr); }
	.sv-tabs.sv-t-tshow-accordion .sv-tabs__list > .sv-tabs__panel { grid-area: auto; margin-block: 0.25rem 0.75rem; }
	.sv-tabs.sv-t-tshow-accordion .sv-tabs__list > .sv-tabs__panel:not([data-open]),
	.sv-tabs.sv-t-tshow-accordion .sv-tabs__panels:empty { display: none; }
	/* Tabs as you scroll (ADR 0117), wherever their pictures go under the tabs (also phones): every picture shows. */
	.sv-tabs.sv-tabs--layout-scroll .sv-tabs__list > .sv-tabs__panel:not([data-open]) { display: block; opacity: 1; visibility: visible; }

	.sv-t-prow-1 { --sv-prow: 1; }
	.sv-t-prow-2 { --sv-prow: 2; }
	.sv-t-prow-3 { --sv-prow: 3; }

	:is(.sv-services, .sv-service-cards, .sv-team, .sv-testimonials, .sv-image-grid):is(.sv-t-prow-1, .sv-t-prow-2, .sv-t-prow-3),
	:is(.sv-t-prow-1, .sv-t-prow-2, .sv-t-prow-3) :is(.sv-posts__grid, .sv-pricing__plans) {
		grid-template-columns: repeat(var(--sv-prow), minmax(0, 1fr));
	}

	.sv-gallery:is(.sv-t-prow-1, .sv-t-prow-2, .sv-t-prow-3) { --sv-gallery-columns: var(--sv-prow); }
	.sv-icon-list:is(.sv-t-prow-1, .sv-t-prow-2, .sv-t-prow-3) { --sv-icon-list-columns: var(--sv-prow); }
	.sv-price-list:is(.sv-t-prow-1, .sv-t-prow-2, .sv-t-prow-3) { --sv-price-list-columns: var(--sv-prow); }

	.sv-t-order-first { order: -1; }
	.sv-t-order-last { order: 99; }

	.sv-t-bflow-horizontal { --sv-bflow: row; --sv-bflow-items: normal; }
	.sv-t-bflow-vertical { --sv-bflow: column; --sv-bflow-items: var(--sv-justify, start); }

	.sv-button.sv-t-fullw-on .sv-button__control,
	.sv-t-fullw-on .sv-button .sv-button__control { inline-size: 100%; }
	.sv-button.sv-t-fullw-on .sv-button__group,
	.sv-t-fullw-on .sv-button .sv-button__group { display: flex; }
	.sv-t-fullw-off .sv-button__control { inline-size: auto; }

	.sv-t-pfocus-left > :is(.sv-section__bg, .sv-column__bg) :is(img, video) { object-position: 0 50%; }
	.sv-t-pfocus-center > :is(.sv-section__bg, .sv-column__bg) :is(img, video) { object-position: 50% 50%; }
	.sv-t-pfocus-right > :is(.sv-section__bg, .sv-column__bg) :is(img, video) { object-position: 100% 50%; }
}

@media (max-width: 767px) {
	.sv-m-psize-full { --sv-image-scale: 1; --sv-team-media: 100%; --sv-psize-media: 100%; }
	.sv-m-psize-75 { --sv-image-scale: 0.75; --sv-team-media: 75%; --sv-psize-media: 75%; }
	.sv-m-psize-60 { --sv-image-scale: 0.6; --sv-team-media: 60%; --sv-psize-media: 60%; }
	.sv-m-psize-50 { --sv-image-scale: 0.5; --sv-team-media: 50%; --sv-psize-media: 50%; }

	/* The Team section's members (each sets its own photo size): the section's size on this screen. */
	.sv-team:is(.sv-m-psize-full, .sv-m-psize-75, .sv-m-psize-60, .sv-m-psize-50) .sv-team-member { --sv-team-media: var(--sv-psize-media); }

	.sv-image:is(.sv-m-psize-full, .sv-m-psize-75, .sv-m-psize-60, .sv-m-psize-50):not(.sv-image--aspect-fill) {
		--sv-w-self: var(--sv-justify, start);
		inline-size: fit-content;
	}

	.sv-image:is(.sv-m-psize-full, .sv-m-psize-75, .sv-m-psize-60, .sv-m-psize-50):not(.sv-image--aspect-fill, .sv-image--aspect-auto) .sv-image__frame {
		display: block;
		inline-size: calc(40px + (var(--sv-fit-base, 100cqi) - 40px) * var(--sv-image-scale, 1));
	}

	.sv-image--aspect-auto:is(.sv-m-psize-full, .sv-m-psize-75, .sv-m-psize-60, .sv-m-psize-50),
	.sv-image--aspect-auto:is(.sv-m-psize-full, .sv-m-psize-75, .sv-m-psize-60, .sv-m-psize-50) .sv-image__frame {
		max-inline-size: min(100%, calc(40px + (var(--sv-fit-base, 100cqi) - 40px) * var(--sv-image-scale, 1)));
	}

	.sv-tabs.sv-m-tshow-top > .sv-tabs__side { display: grid; order: 0; }
	.sv-tabs.sv-m-tshow-top .sv-tabs__head { justify-self: center; text-align: center; }
	.sv-tabs:is(.sv-m-tshow-top, .sv-t-tshow-top:not(.sv-m-tshow-accordion)) .sv-tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-tabs.sv-m-tshow-accordion .sv-tabs__list { grid-template-columns: minmax(0, 1fr); }

	.sv-m-prow-1 { --sv-prow: 1; }
	.sv-m-prow-2 { --sv-prow: 2; }
	.sv-m-prow-3 { --sv-prow: 3; }

	:is(.sv-services, .sv-service-cards, .sv-team, .sv-testimonials, .sv-image-grid):is(.sv-m-prow-1, .sv-m-prow-2, .sv-m-prow-3),
	:is(.sv-m-prow-1, .sv-m-prow-2, .sv-m-prow-3) :is(.sv-posts__grid, .sv-pricing__plans) {
		grid-template-columns: repeat(var(--sv-prow), minmax(0, 1fr));
	}

	.sv-gallery:is(.sv-m-prow-1, .sv-m-prow-2, .sv-m-prow-3) { --sv-gallery-columns: var(--sv-prow); }
	.sv-icon-list:is(.sv-m-prow-1, .sv-m-prow-2, .sv-m-prow-3) { --sv-icon-list-columns: var(--sv-prow); }
	.sv-price-list:is(.sv-m-prow-1, .sv-m-prow-2, .sv-m-prow-3) { --sv-price-list-columns: var(--sv-prow); }

	.sv-m-order-first { order: -1; }
	.sv-m-order-last { order: 99; }

	.sv-m-bflow-horizontal { --sv-bflow: row; --sv-bflow-items: normal; }
	.sv-m-bflow-vertical { --sv-bflow: column; --sv-bflow-items: var(--sv-justify, start); }

	.sv-button.sv-m-fullw-on .sv-button__control,
	.sv-m-fullw-on .sv-button .sv-button__control { inline-size: 100%; }
	.sv-button.sv-m-fullw-on .sv-button__group,
	.sv-m-fullw-on .sv-button .sv-button__group { display: flex; }
	.sv-m-fullw-off .sv-button__control { inline-size: auto; }

	.sv-m-pfocus-left > :is(.sv-section__bg, .sv-column__bg) :is(img, video) { object-position: 0 50%; }
	.sv-m-pfocus-center > :is(.sv-section__bg, .sv-column__bg) :is(img, video) { object-position: 50% 50%; }
	.sv-m-pfocus-right > :is(.sv-section__bg, .sv-column__bg) :is(img, video) { object-position: 100% 50%; }
}

/*
 * Photo movement (ADR 0116): a section's or column's photo moves a little slower than the page as it passes — CSS
 * scroll-driven animation, a photo a little larger than its box so no edge shows. Browsers without it, and visitors
 * who ask for less motion, see the photo still; the editing canvas keeps it still too (canvas.css). The timeline is
 * the section's (or column's) own way through the screen: the photo's box clips, which would make it its own scroller.
 */
.sv-pmove-subtle { --sv-pmove: 0.04; }
.sv-pmove-strong { --sv-pmove: 0.09; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		:is(.sv-pmove-subtle, .sv-pmove-strong):has(> :is(.sv-section__bg, .sv-column__bg)) {
			view-timeline: --sv-pmove block;
		}

		:is(.sv-pmove-subtle, .sv-pmove-strong) > :is(.sv-section__bg, .sv-column__bg) > :is(.sv-section__bg-img, .sv-section__bg-video, .sv-column__bg-img, .sv-column__bg-video) {
			scale: calc(1 + 2 * var(--sv-pmove));
			animation: sv-photo-move linear both;
			animation-timeline: --sv-pmove;
			animation-range: cover;
		}
	}
}

@keyframes sv-photo-move {
	from {
		translate: 0 calc(var(--sv-pmove) * -100%);
	}

	to {
		translate: 0 calc(var(--sv-pmove) * 100%);
	}
}

/*
 * Things that stay in view (ADR 0117) stop just under a header that stays at the top (--sv-header-space, from the
 * header's view.js; nothing while it is hidden) or the admin bar, plus a small space.
 */
:is(.sv-stick-on, .sv-cstack-on) {
	--sv-stick-top: calc(max(var(--sv-header-space, 0px), var(--wp-admin--admin-bar--height, 0px)) + var(--sv-space-sm));
}

/*
 * Stay in view: the column, as tall as its content, stays while the row goes by — only while the row's columns sit side
 * by side (--sv-fit-on, set wherever a row's columns are set). Browsers without style queries scroll it as usual.
 */
@container style(--sv-fit-on: 1) {
	.sv-stick-on {
		position: sticky;
		inset-block-start: var(--sv-stick-top);
		align-self: start;
		transition: inset-block-start 0.3s ease;
	}
}

/*
 * Stacking cards: one under another (a flex column, so the element is their sticky box), each stopping 1rem lower than
 * the one before and covering it; after the last the pile leaves together. Not for a carousel (cards in a track).
 */
.sv-cstack-on:is(.sv-service-cards, .sv-services, .sv-team, .sv-testimonials):not(:has(> .sv-carousel)) {
	display: flex;
	flex-direction: column;
	gap: var(--sv-space-lg);
}

.sv-cstack-on > :is(.sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) {
	position: sticky;
	inset-block-start: calc(var(--sv-stick-top) + var(--sv-stack-i, 0) * 1rem);
	inline-size: 100%;
	max-inline-size: 56rem;
	align-self: center;
}

:where(.sv-cstack-on > :is(.sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item)) {
	box-shadow: 0 -0.5rem 1.5rem -1rem rgb(15 23 42 / 22%);
}

.sv-cstack-on > :nth-child(2 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 1; }
.sv-cstack-on > :nth-child(3 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 2; }
.sv-cstack-on > :nth-child(4 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 3; }
.sv-cstack-on > :nth-child(5 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 4; }
.sv-cstack-on > :nth-child(6 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 5; }
.sv-cstack-on > :nth-child(7 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 6; }
.sv-cstack-on > :nth-child(8 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 7; }
.sv-cstack-on > :nth-child(n + 9 of .sv-service-cards__item, .sv-services__item, .sv-team__member, .sv-testimonials__item) { --sv-stack-i: 8; }

/*
 * Stay in place (ADR 0180): the section stays where it is while the sections after it slide up over it (sections are
 * positioned, so a later one paints over an earlier one). It stays just under a header that stays at the top
 * (--sv-header-space, ADR 0117) — the first section under a header over it (ADR 0056) at the very top, the header staying
 * over it. A section taller than the screen gets its own --sv-pin-top from pin.js (its foot at the screen's foot).
 * Visitors' pages only: the canvas scrolls as usual.
 */
.sv-section.sv-pin-on:not([data-sv-node]) {
	--sv-pin-under: max(var(--sv-header-space, 0px), var(--wp-admin--admin-bar--height, 0px));
	position: sticky;
	inset-block-start: var(--sv-pin-top, var(--sv-pin-under));
	transition: inset-block-start 0.3s ease;
}

:root:has(.sv-site-header[data-overlay]) .sv-page > .sv-section.sv-pin-on:first-child {
	--sv-pin-under: var(--wp-admin--admin-bar--height, 0px);
}

/* Keyboard focus inside a covered section brings it back: it stops staying, so the browser scrolls to it (ADR 0102). */
.sv-section.sv-pin-on:not([data-sv-node]):has(:focus-visible) {
	position: relative;
	inset-block-start: auto;
}

/*
 * The sections after it get the page's color behind them, so nothing shows through one without a background of its own
 * (zero specificity: its own color, gradient or picture wins; a boxed section keeps its margin clear, so the section
 * that stays shows around the box). The first of them gets a short, light shadow on its top edge.
 */
:where(.sv-section.sv-pin-on:not([data-sv-node]) ~ .sv-section) {
	background-color: var(--sv-color-background);
}

:where(.sv-section.sv-pin-on:not([data-sv-node]) + .sv-section) {
	box-shadow: 0 -0.5rem 1.5rem -1rem rgb(15 23 42 / 18%);
}

/*
 * More settings per device (ADR 0120): Space inside, an element's Width, Line length, Vertical alignment and Content
 * position — tablets (phones follow), then phones; after the desktop rules so they win. --sv-inset-d is the device's
 * own room, for elements whose box has a default room of its own (their stylesheets).
 */
@media (max-width: 1024px) {
	.sv-t-inset-none { --sv-inset-d: 0px; padding: var(--sv-inset-d); }
	.sv-t-inset-sm { --sv-inset-d: var(--sv-space-step-sm, var(--sv-space-sm)); padding: var(--sv-inset-d); }
	.sv-t-inset-md { --sv-inset-d: var(--sv-space-step-md, var(--sv-space-md)); padding: var(--sv-inset-d); }
	.sv-t-inset-lg { --sv-inset-d: var(--sv-space-step-lg, var(--sv-space-lg)); padding: var(--sv-inset-d); }
	.sv-t-inset-xl { --sv-inset-d: var(--sv-space-step-xl, var(--sv-space-xl)); padding: var(--sv-inset-d); }
	.sv-t-inset-custom { --sv-inset-d: var(--sv-custom-inset-t); padding: var(--sv-inset-d); }
	.sv-t-w-fit { --sv-row-grow: 0; --sv-row-basis: auto; --sv-row-min: 0px; --sv-w-self: var(--sv-justify, start); justify-self: var(--sv-justify, start); }
	.sv-t-w-fill { --sv-row-grow: 1; --sv-row-basis: initial; --sv-row-min: initial; --sv-w-self: stretch; justify-self: stretch; }
	.sv-t-measure-full { max-inline-size: none; }
	.sv-t-measure-narrow { max-inline-size: 30rem; margin-inline: var(--sv-line-margin, 0); }
	.sv-t-measure-normal { max-inline-size: 40rem; margin-inline: var(--sv-line-margin, 0); }
	.sv-t-measure-wide { max-inline-size: 50rem; margin-inline: var(--sv-line-margin, 0); }
	.sv-t-measure-custom { max-inline-size: var(--sv-custom-measure-t); margin-inline: var(--sv-line-margin, 0); }
	.sv-t-valign-start { --sv-column-justify: flex-start; }
	.sv-t-valign-center { --sv-column-justify: center; }
	.sv-t-valign-end { --sv-column-justify: flex-end; }
	.sv-t-valign-between { --sv-column-justify: space-between; }
	.sv-t-place-top { --sv-place: start; }
	.sv-t-place-middle { --sv-place: center; }
	.sv-t-place-bottom { --sv-place: end; }
}

@media (max-width: 767px) {
	.sv-m-inset-none { --sv-inset-d: 0px; padding: var(--sv-inset-d); }
	.sv-m-inset-sm { --sv-inset-d: var(--sv-space-step-sm, var(--sv-space-sm)); padding: var(--sv-inset-d); }
	.sv-m-inset-md { --sv-inset-d: var(--sv-space-step-md, var(--sv-space-md)); padding: var(--sv-inset-d); }
	.sv-m-inset-lg { --sv-inset-d: var(--sv-space-step-lg, var(--sv-space-lg)); padding: var(--sv-inset-d); }
	.sv-m-inset-xl { --sv-inset-d: var(--sv-space-step-xl, var(--sv-space-xl)); padding: var(--sv-inset-d); }
	.sv-m-inset-custom { --sv-inset-d: var(--sv-custom-inset-m); padding: var(--sv-inset-d); }
	.sv-m-w-fit { --sv-row-grow: 0; --sv-row-basis: auto; --sv-row-min: 0px; --sv-w-self: var(--sv-justify, start); justify-self: var(--sv-justify, start); }
	.sv-m-w-fill { --sv-row-grow: 1; --sv-row-basis: initial; --sv-row-min: initial; --sv-w-self: stretch; justify-self: stretch; }
	.sv-m-measure-full { max-inline-size: none; }
	.sv-m-measure-narrow { max-inline-size: 30rem; margin-inline: var(--sv-line-margin, 0); }
	.sv-m-measure-normal { max-inline-size: 40rem; margin-inline: var(--sv-line-margin, 0); }
	.sv-m-measure-wide { max-inline-size: 50rem; margin-inline: var(--sv-line-margin, 0); }
	.sv-m-measure-custom { max-inline-size: var(--sv-custom-measure-m); margin-inline: var(--sv-line-margin, 0); }
	.sv-m-valign-start { --sv-column-justify: flex-start; }
	.sv-m-valign-center { --sv-column-justify: center; }
	.sv-m-valign-end { --sv-column-justify: flex-end; }
	.sv-m-valign-between { --sv-column-justify: space-between; }
	.sv-m-place-top { --sv-place: start; }
	.sv-m-place-middle { --sv-place: center; }
	.sv-m-place-bottom { --sv-place: end; }
}

/* Space inside the words per device (ADR 0145): tablets (phones follow), then phones. */
@media (max-width: 1024px) {
	.sv-t-tinset-none { --sv-text-inset: 0px; }
	.sv-t-tinset-sm { --sv-text-inset: var(--sv-space-sm); }
	.sv-t-tinset-md { --sv-text-inset: var(--sv-space-md); }
	.sv-t-tinset-lg { --sv-text-inset: var(--sv-space-lg); }
	.sv-t-tinset-custom { --sv-text-inset: var(--sv-custom-tinset-t); }
}

@media (max-width: 767px) {
	.sv-m-tinset-none { --sv-text-inset: 0px; }
	.sv-m-tinset-sm { --sv-text-inset: var(--sv-space-sm); }
	.sv-m-tinset-md { --sv-text-inset: var(--sv-space-md); }
	.sv-m-tinset-lg { --sv-text-inset: var(--sv-space-lg); }
	.sv-m-tinset-custom { --sv-text-inset: var(--sv-custom-tinset-m); }
}