/**
 * The five landing sections.
 * ============================================================================
 *
 * Structure only. Every colour, radius, face and step of spacing is a theme
 * token, so these sections take the palette of whatever demo or shop they land
 * in — the pricing card on a jeweller's page is gold-edged and the same card on
 * an analytics page is blue, with no rule in here mentioning either.
 *
 * Where a token could be missing the fallback is a neutral, never a colour: a
 * fallback that names a hue is a colour from some other design waiting to
 * appear on a page that never asked for it.
 */

/* ===========================================================================
   Shared: the head of a section
   =========================================================================== */

.urartu-lsec {
	container-type: inline-size;
}

.urartu-lsec__head {
	max-width: 46rem;
	margin: 0 auto var(--sp-8, 40px);
	text-align: center;
}

/* Ranged left, and then it is not a column in the middle of the page. */
.urartu-lsec__head--start {
	margin-inline: 0;
	text-align: start;
}

.urartu-lsec__title {
	margin: 0 0 var(--sp-3, 12px);
	font-family: var(--u-font-display, inherit);
	font-size: var(--fs-title, clamp(1.5rem, 1.32rem + .8vw, 2.25rem));
	font-weight: var(--u-display-weight, 700);
	letter-spacing: var(--u-display-track, -.02em);
	line-height: 1.15;
	color: var(--u-surface-fg, #241F1C);
	text-wrap: balance;
}

.urartu-lsec__standfirst {
	margin: 0;
	font-family: var(--u-font-body, inherit);
	font-size: var(--fs-lead, 1.125rem);
	line-height: 1.6;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
	text-wrap: pretty;
}

/* ===========================================================================
   1. Pricing
   =========================================================================== */

.urartu-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6, 24px);
	align-items: start;
}

.urartu-pricing__tier {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3, 12px);
	padding: var(--sp-8, 32px);
	background-color: var(--u-surface, #fff);
	border: 1px solid var(--u-border, rgba(36, 31, 28, .14));
	border-radius: var(--u-media-radius, 0);
}

/*
 * The marked tier.
 *
 * Lifted rather than recoloured: a filled card in the accent makes the two
 * beside it look disabled, and on a light accent it makes its own text
 * unreadable. A heavier edge and a shadow say "this one" without touching the
 * ink on any of the three.
 */
.urartu-pricing__tier.is-featured {
	position: relative;
	border-color: var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	border-width: 2px;
	box-shadow: var(--u-shadow-2, 0 12px 32px -20px rgba(0, 0, 0, .28));
}

.urartu-pricing__badge {
	position: absolute;
	top: 0;
	inset-inline-start: var(--sp-8, 32px);
	transform: translateY(-50%);
	margin: 0;
	padding: 4px 12px;
	background-color: var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	color: var(--u-btn-fg, #fff);
	border-radius: var(--u-badge-radius, 2px);
	font-family: var(--u-font-body, inherit);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.urartu-pricing__name {
	margin: 0;
	font-family: var(--u-font-display, inherit);
	font-size: var(--fs-section, 1.375rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: var(--u-display-track, -.01em);
	color: var(--u-surface-fg, #241F1C);
}

.urartu-pricing__summary {
	margin: 0;
	font-size: var(--fs-small, .875rem);
	line-height: 1.5;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

.urartu-pricing__figure {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: var(--sp-2, 8px) 0 0;
}

.urartu-pricing__amount {
	font-family: var(--u-font-display, inherit);
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--u-surface-fg, #241F1C);
	font-variant-numeric: lining-nums tabular-nums;
}

.urartu-pricing__period {
	font-size: var(--fs-small, .875rem);
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

.urartu-pricing__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--u-btn-h, 48px);
	margin-top: var(--sp-2, 8px);
	padding-inline: var(--u-btn-px, 24px);
	border: 1px solid var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	border-radius: var(--u-btn-radius, 2px);
	background-color: transparent;
	color: var(--u-surface-fg, #241F1C);
	font-family: var(--u-font-body, inherit);
	font-size: var(--u-btn-fs, 15px);
	font-weight: var(--u-btn-fw, 600);
	letter-spacing: var(--u-btn-ls, .02em);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--dur-base, 220ms) var(--ease-standard, ease),
		color var(--dur-base, 220ms) var(--ease-standard, ease);
}

.urartu-pricing__cta--solid {
	background-color: var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	color: var(--u-btn-fg, #fff);
}

.urartu-pricing__cta:hover,
.urartu-pricing__cta:focus-visible {
	background-color: var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	color: var(--u-btn-fg, #fff);
}

.urartu-pricing__cta--solid:hover,
.urartu-pricing__cta--solid:focus-visible {
	background-color: var(--u-btn-bg-h, var(--u-btn-bg, #241F1C));
	color: var(--u-btn-fg-h, var(--u-btn-fg, #fff));
	filter: brightness(1.06);
}

.urartu-pricing__list {
	margin: var(--sp-4, 16px) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
	padding-top: var(--sp-4, 16px);
	font-size: var(--fs-small, .875rem);
	line-height: 1.5;
	color: var(--u-surface-fg, #241F1C);
}

/*
 * The tick is drawn, not a font icon.
 *
 * An icon font that fails to load leaves a row of empty boxes down a price
 * list, and a landing page is exactly where a shop cannot afford that. Two
 * borders and a rotation is a tick that cannot fail to arrive.
 */
.urartu-pricing__list li {
	position: relative;
	padding-inline-start: 26px;
}

.urartu-pricing__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: .45em;
	width: 6px;
	height: 11px;
	border: solid var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ===========================================================================
   2. Comparison table
   =========================================================================== */

.urartu-ctab__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.urartu-ctab__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--u-font-body, inherit);
	font-size: var(--fs-body, 1rem);
	line-height: 1.5;
}

.urartu-ctab__table th,
.urartu-ctab__table td {
	padding: var(--sp-4, 16px);
	text-align: start;
	vertical-align: middle;
	border-bottom: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-ctab__table thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
	border-bottom-width: 2px;
	white-space: nowrap;
}

.urartu-ctab__table tbody th {
	font-weight: 600;
	color: var(--u-surface-fg, #241F1C);
}

.urartu-ctab__table tbody td {
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

/* Our column is the one being argued for, so it carries the ink and a tint. */
.urartu-ctab__table .urartu-ctab__ours {
	background-color: color-mix(in srgb, var(--u-btn-bg, #241F1C) 5%, transparent);
	color: var(--u-surface-fg, #241F1C);
	font-weight: 600;
}

.urartu-ctab__table thead .urartu-ctab__ours {
	color: var(--u-surface-fg, #241F1C);
}

.urartu-ctab__mark {
	display: inline-block;
	width: 18px;
	height: 18px;
	position: relative;
}

.urartu-ctab__mark--yes::before {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 1px;
	width: 6px;
	height: 12px;
	border: solid var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* A cross, and quiet: the point of the row is our cell, not theirs. */
.urartu-ctab__mark--no::before,
.urartu-ctab__mark--no::after {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: 8px;
	width: 14px;
	height: 2px;
	background-color: var(--u-muted-fg, rgba(36, 31, 28, .5));
}

.urartu-ctab__mark--no::before { transform: rotate(45deg); }
.urartu-ctab__mark--no::after { transform: rotate(-45deg); }

/* A scrollable region has to be reachable by keyboard, and then it has to say
   so when it is focused. */
.urartu-ctab__scroll:focus-visible {
	outline: 2px solid var(--u-surface-fg, #241F1C);
	outline-offset: 4px;
}

/* ===========================================================================
   3. Steps
   =========================================================================== */

.urartu-steps__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.urartu-steps__list--row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6, 24px);
}

.urartu-steps__list--stack {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6, 24px);
	max-width: 44rem;
}

.urartu-steps__item {
	display: flex;
	gap: var(--sp-4, 16px);
	align-items: flex-start;
}

.urartu-steps__list--row .urartu-steps__item {
	flex-direction: column;
	gap: var(--sp-3, 12px);
}

.urartu-steps__num {
	flex: none;
	font-family: var(--u-font-display, inherit);
	font-size: var(--fs-section, 1.375rem);
	font-weight: var(--u-display-weight, 700);
	line-height: 1;
	color: var(--u-accent-ink, var(--u-btn-bg, var(--u-surface-fg, #241F1C)));
	font-variant-numeric: lining-nums tabular-nums;
}

/* Down the page the number is a marker in a margin, so it gets a rule to sit
   against and the body lines up with the one above it. */
.urartu-steps__list--stack .urartu-steps__item {
	padding-bottom: var(--sp-6, 24px);
	border-bottom: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-steps__list--stack .urartu-steps__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.urartu-steps__title {
	margin: 0 0 4px;
	font-family: var(--u-font-display, inherit);
	font-size: var(--fs-lead, 1.125rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: var(--u-display-track, -.01em);
	color: var(--u-surface-fg, #241F1C);
}

.urartu-steps__text {
	margin: 0;
	font-size: var(--fs-small, .9375rem);
	line-height: 1.6;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

/* ===========================================================================
   4. Questions
   =========================================================================== */

.urartu-faq__list {
	max-width: 46rem;
	margin-inline: auto;
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-lsec__head--start ~ .urartu-faq__list {
	margin-inline: 0;
}

.urartu-faq__item {
	border-bottom: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4, 16px);
	padding: var(--sp-5, 20px) 0;
	cursor: pointer;
	font-family: var(--u-font-body, inherit);
	font-size: var(--fs-lead, 1.0625rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--u-surface-fg, #241F1C);
	list-style: none;
}

/* Safari draws its own triangle through ::-webkit-details-marker. */
.urartu-faq__q::-webkit-details-marker {
	display: none;
}

.urartu-faq__q:focus-visible {
	outline: 2px solid var(--u-surface-fg, #241F1C);
	outline-offset: 2px;
}

/* A plus that becomes a minus. Two bars, one of which rotates away. */
.urartu-faq__sign {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.urartu-faq__sign::before,
.urartu-faq__sign::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 7px;
	width: 16px;
	height: 2px;
	background-color: var(--u-btn-bg, var(--u-surface-fg, #241F1C));
	transition: transform var(--dur-base, 220ms) var(--ease-standard, ease);
}

.urartu-faq__sign::after {
	transform: rotate(90deg);
}

.urartu-faq__item[open] .urartu-faq__sign::after {
	transform: rotate(0deg);
}

.urartu-faq__a {
	padding-bottom: var(--sp-5, 20px);
	font-size: var(--fs-body, 1rem);
	line-height: 1.65;
	color: var(--u-muted-fg, rgba(36, 31, 28, .68));
}

.urartu-faq__a p {
	margin: 0 0 .8em;
}

.urartu-faq__a p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {

	.urartu-faq__sign::before,
	.urartu-faq__sign::after {
		transition: none;
	}
}

/* ===========================================================================
   5. Logo strip
   =========================================================================== */

.urartu-logos--ruled {
	padding-block: var(--sp-8, 40px);
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
	border-bottom: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-logos__lead {
	margin: 0 0 var(--sp-6, 24px);
	text-align: center;
	font-family: var(--u-font-body, inherit);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--u-muted-fg, rgba(36, 31, 28, .58));
}

.urartu-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.urartu-logos__item {
	display: flex;
	align-items: center;
}

/*
 * A name set in type, which is what most landing pages are allowed to show.
 *
 * Quiet on purpose: this row is evidence, not a headline, and five customer
 * names at full contrast compete with the thing being sold.
 */
.urartu-logos__word {
	font-family: var(--u-font-display, inherit);
	font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: var(--u-display-track, -.01em);
	color: var(--u-muted-fg, rgba(36, 31, 28, .55));
}

.urartu-logos__img {
	display: block;
	max-height: 32px;
	width: auto;
	opacity: .7;
}

/* ===========================================================================
   Narrow
   ===========================================================================
   Container queries rather than viewport ones: these sections are dropped into
   columns as often as they are used full width, and a pricing table in a
   half-width column is narrow on a desktop too. */

@container (max-width: 900px) {

	.urartu-pricing__grid,
	.urartu-steps__list--row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 560px) {

	.urartu-pricing__grid,
	.urartu-steps__list--row {
		grid-template-columns: minmax(0, 1fr);
	}

	.urartu-logos__row {
		gap: 28px;
	}

	.urartu-pricing__tier {
		padding: var(--sp-6, 24px);
	}
}

/* Browsers without container queries still get a sensible narrow layout. */
@supports not (container-type: inline-size) {

	@media (max-width: 900px) {

		.urartu-pricing__grid,
		.urartu-steps__list--row {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 560px) {

		.urartu-pricing__grid,
		.urartu-steps__list--row {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}

/* ===========================================================================
   People
   ===========================================================================
   A portrait is optional and the grid does not care: with an image the card is
   a photograph over a name, without one it is initials in a tinted square. The
   second is what a demo uses, and what a real site uses for the colleague who
   will not send a photograph. */

.urartu-team__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-8, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.urartu-team__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.urartu-team__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.urartu-team__portrait,
.urartu-team__initials {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--sp-3, 12px);
	border-radius: var(--u-media-radius, 0);
	object-fit: cover;
}

/* Initials: the accent at a tenth, so a row of them reads as a pattern rather
   than as five coloured blocks. */
.urartu-team__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--u-btn-bg, #241F1C) 8%, transparent);
	color: var(--u-accent-ink, var(--u-btn-bg, var(--u-surface-fg, #241F1C)));
	font-family: var(--u-font-display, inherit);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: .02em;
}

.urartu-team--round .urartu-team__portrait,
.urartu-team--round .urartu-team__initials {
	border-radius: 999px;
}

.urartu-team__name {
	margin: 0;
	font-family: var(--u-font-display, inherit);
	font-size: var(--fs-lead, 1.125rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: var(--u-display-track, -.01em);
	color: var(--u-surface-fg, #241F1C);
}

.urartu-team__role {
	margin: 0;
	font-size: var(--fs-small, .875rem);
	font-weight: 600;
	color: var(--u-accent-ink, var(--u-btn-bg, var(--u-surface-fg, #241F1C)));
}

.urartu-team__bio {
	margin: 4px 0 0;
	font-size: var(--fs-small, .875rem);
	line-height: 1.6;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

/* ===========================================================================
   Programme
   ===========================================================================
   Two columns: when in the margin, what beside it, ruled between. A grid rather
   than a table because there is no second axis — this is a list with a label,
   and a table would announce columns that carry no meaning. */

.urartu-sched__list {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	max-width: 52rem;
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-lsec__head--start ~ .urartu-sched__list {
	margin-inline: 0;
}

.urartu-sched__item {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: var(--sp-6, 24px);
	padding: var(--sp-5, 20px) 0;
	border-bottom: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-sched__when {
	margin: 0;
	font-family: var(--u-font-mono, ui-monospace, monospace);
	font-size: var(--fs-small, .9375rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--u-accent-ink, var(--u-btn-bg, var(--u-surface-fg, #241F1C)));
	white-space: nowrap;
}

.urartu-sched__title {
	margin: 0;
	font-family: var(--u-font-display, inherit);
	font-size: var(--fs-lead, 1.0625rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: var(--u-display-track, -.01em);
	color: var(--u-surface-fg, #241F1C);
}

.urartu-sched__who {
	margin: 2px 0 0;
	font-size: var(--fs-small, .875rem);
	font-weight: 600;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

.urartu-sched__text {
	margin: 6px 0 0;
	font-size: var(--fs-small, .9375rem);
	line-height: 1.6;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

/* ===========================================================================
   Work
   =========================================================================== */

.urartu-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-8, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.urartu-cases__item {
	display: flex;
	flex-direction: column;
}

.urartu-cases__media {
	aspect-ratio: 4 / 3;
	margin-bottom: var(--sp-4, 16px);
	border-radius: var(--u-media-radius, 0);
	overflow: hidden;
	background-color: var(--u-sunken, rgba(36, 31, 28, .04));
}

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

.urartu-cases__client {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--u-muted-fg, rgba(36, 31, 28, .58));
}

.urartu-cases__title {
	margin: 0;
	font-family: var(--u-font-display, inherit);
	font-size: var(--fs-lead, 1.125rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: var(--u-display-track, -.01em);
	line-height: 1.3;
	color: var(--u-surface-fg, #241F1C);
}

.urartu-cases__title a {
	color: inherit;
	text-decoration: none;
}

.urartu-cases__title a:hover,
.urartu-cases__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.urartu-cases__text {
	margin: 8px 0 0;
	font-size: var(--fs-small, .9375rem);
	line-height: 1.6;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

/*
 * The number, and it is the thing a reader stops on.
 *
 * Pushed to the bottom of the card with margin-top:auto so that a row of three
 * lines its figures up whatever length the prose above them runs to — a column
 * of results at three different heights reads as three unrelated cards.
 */
.urartu-cases__figure {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: auto 0 0;
	padding-top: var(--sp-4, 16px);
}

.urartu-cases__number {
	font-family: var(--u-font-display, inherit);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: var(--u-display-weight, 700);
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--u-accent-ink, var(--u-btn-bg, var(--u-surface-fg, #241F1C)));
	font-variant-numeric: lining-nums tabular-nums;
}

.urartu-cases__figure-label {
	font-size: var(--fs-small, .8125rem);
	line-height: 1.4;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

/* ===========================================================================
   Narrow — the three above
   =========================================================================== */

@container (max-width: 900px) {

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

@container (max-width: 560px) {

	/* The column headings may wrap on a phone: kept on one line, the
	   comparison table ran off the right edge with its last column cut
	   mid-word, and nothing said it could be scrolled. */
	.urartu-ctab__table thead th {
		white-space: normal;
	}

	.urartu-ctab__table th,
	.urartu-ctab__table td {
		padding: var(--sp-3, 12px) var(--sp-2, 8px);
		font-size: var(--fs-sm, .875rem);
	}

	/* The cases stack, the people do not: a case card carries a photograph
	   and a paragraph and wants the width, while a team card is a square of
	   initials and a name — one per row made each square the height of the
	   screen, and eight partners a page of coloured tiles. */
	.urartu-cases__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.urartu-team__grid {
		gap: var(--sp-5, 20px);
	}

	/* The margin column becomes a line of its own: eight rems of "09:30" beside
	   two words of title is most of a phone's width spent on a label. */
	.urartu-sched__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

@supports not (container-type: inline-size) {

	@media (max-width: 900px) {

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

	@media (max-width: 560px) {

		.urartu-cases__grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.urartu-team__grid {
			gap: var(--sp-5, 20px);
		}

		.urartu-sched__item {
			grid-template-columns: minmax(0, 1fr);
			gap: 4px;
		}
	}
}