/*
 * The AR/VR Innovation Lab section, /{locale}/arvr.
 *
 * Built on the site's design language (DESIGN.md): the #283b3c slate band
 * under the header, the #2c6e6b accent, the tinted surface, Barlow Condensed
 * capitals for display lines over Source Sans Pro, 4px corners, cards with a
 * hairline border and no shadow until hover. The section's own moment is the lab's
 * photographs: a mosaic that breaks out of the slate band into the page.
 *
 * Everything is scoped under .arvr so nothing here reaches the rest of the
 * site's old stylesheet.
 */
.arvr {
	--arvr-slate: #283b3c;
	--arvr-slate-deep: #1f3031;
	--arvr-ink: #1d3b3c;
	--arvr-accent: #2c6e6b;
	--arvr-accent-deep: #22585a;
	--arvr-accent-soft: #e9f1ef;
	--arvr-mint: #9ec8bd;
	--arvr-surface: #f4f6f5;
	--arvr-line: #e3e9e7;
	--arvr-line-strong: #cfdbd8;
	--arvr-body: #4a5b5c;
	--arvr-muted: #61716f;
	--arvr-white: #fff;
	--arvr-on-slate: rgba(255, 255, 255, .78);
	--arvr-radius: 4px;
	--arvr-radius-sm: 3px;
	--arvr-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--arvr-ease: cubic-bezier(.23, 1, .32, 1);
	--arvr-gutter: clamp(16px, 4vw, 32px);
	--arvr-band: clamp(48px, 7vw, 88px);

	font-family: "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
	color: var(--arvr-body);
	background: var(--arvr-surface);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.arvr *, .arvr *::before, .arvr *::after { box-sizing: border-box; }
.arvr img { max-width: 100%; height: auto; }
.arvr a { color: var(--arvr-accent); text-underline-offset: 3px; }
.arvr a:hover { color: var(--arvr-accent-deep); }
.arvr a:focus-visible, .arvr button:focus-visible, .arvr summary:focus-visible {
	outline: 3px solid var(--arvr-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.arvr-sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.arvr-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--arvr-gutter); }

/* ---- headings ---- */
.arvr h1, .arvr h2, .arvr h3 { color: var(--arvr-ink); font-weight: 800; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.arvr-h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; }
.arvr-lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--arvr-body); max-width: 62ch; margin: 14px 0 0; }
.arvr-lead p { margin: 0 0 8px; }
.arvr-band { padding-block: var(--arvr-band); }
.arvr-band--white { background: var(--arvr-white); }
.arvr-band__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(24px, 3vw, 36px); }
.arvr-band__head > div { max-width: 70ch; }
.arvr-more { font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; }
.arvr-more:hover { text-decoration: underline; }

/* ---- hero (home) and page head (inner pages) ---- */
/* The site header is position:absolute, 90px tall, over whatever follows:
   these bands pad for it, as the Programs page does. */
.arvr-hero {
	position: relative;
	background: var(--arvr-slate);
	color: var(--arvr-white);
	padding: 124px 0 0;
	overflow: visible;
}
.arvr-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(110% 80% at 15% -10%, rgba(255, 255, 255, .08), transparent 60%);
}
.arvr-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: end;
}
.arvr-hero__text { padding-bottom: clamp(48px, 7vw, 96px); }
.arvr-crumb { font-size: 13.5px; color: rgba(255, 255, 255, .66); margin: 0 0 22px; }
.arvr-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.arvr-crumb li + li::before { content: "/"; margin-inline-end: 6px; color: rgba(255, 255, 255, .4); }
.arvr-crumb a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.arvr-crumb a:hover { color: var(--arvr-white); text-decoration: underline; }
.arvr-hero h1 {
	color: var(--arvr-white);
	font-size: clamp(36px, 5.6vw, 68px);
	line-height: 1.02;
	letter-spacing: -.03em;
	max-width: 12ch;
}
.arvr-hero__intro { color: var(--arvr-on-slate); font-size: clamp(16px, 1.5vw, 19px); margin: 22px 0 0; max-width: 46ch; }
.arvr-hero__intro p { margin: 0 0 6px; }
.arvr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding: 0; list-style: none; }
.arvr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 22px; border-radius: 999px;
	font-weight: 700; font-size: 15px; text-decoration: none;
	transition: background-color .2s var(--arvr-ease), color .2s var(--arvr-ease), border-color .2s var(--arvr-ease);
}
.arvr .arvr-btn--primary { background: var(--arvr-mint); color: var(--arvr-slate-deep); }
.arvr .arvr-btn--primary:hover { background: #b6d7ce; color: var(--arvr-slate-deep); }
.arvr .arvr-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .5); color: var(--arvr-white); }
.arvr .arvr-btn--ghost:hover { border-color: var(--arvr-white); color: var(--arvr-white); background: rgba(255, 255, 255, .06); }

/* The photo mosaic sits on the band's floor and runs on past it. */
.arvr-mosaic {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
	margin-bottom: -64px;
	aspect-ratio: 16 / 11;
}
.arvr-mosaic figure { margin: 0; overflow: hidden; border-radius: var(--arvr-radius); background: var(--arvr-slate-deep); }
.arvr-mosaic figure:first-child { grid-row: 1 / span 2; }
.arvr-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arvr-mosaic--one { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.arvr-mosaic--two { grid-template-rows: 1fr; }
.arvr-mosaic--two figure:first-child { grid-row: auto; }

.arvr-pagehead { background: var(--arvr-slate); color: var(--arvr-white); padding: 124px 0 clamp(40px, 5vw, 64px); position: relative; }
.arvr-pagehead h1 { color: var(--arvr-white); font-size: clamp(30px, 4.2vw, 50px); line-height: 1.1; max-width: 22ch; }
.arvr-pagehead__sub { color: var(--arvr-on-slate); font-size: clamp(16px, 1.4vw, 18px); margin: 16px 0 0; max-width: 64ch; }
.arvr-pagehead__sub p { margin: 0 0 8px; }
.arvr-pagehead__meta { color: var(--arvr-mint); font-size: 14px; font-weight: 600; margin: 14px 0 0; }

/* ---- section menu ----
   Directly under the site header (absolute, 90px), on a deeper slate so the
   two read as one block; it stays on screen while the page scrolls. With the
   menu present, the band below needs no room for the header any more. */
.arvr-subnav {
	position: sticky; top: 0; z-index: 50;
	margin-top: 90px;
	background: var(--arvr-slate-deep);
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.arvr-subnav + .arvr-hero { padding-top: clamp(40px, 5vw, 64px); }
.arvr-subnav + .arvr-pagehead { padding-top: clamp(32px, 4vw, 52px); }
.arvr-subnav__list {
	display: flex; gap: 4px; align-items: center;
	list-style: none; margin: 0; padding: 0;
	overflow-x: auto; scrollbar-width: none;
}
.arvr-subnav__list::-webkit-scrollbar { display: none; }
.arvr-subnav__list > li { flex: 0 0 auto; position: relative; }
.arvr-subnav a, .arvr-subnav summary {
	display: flex; align-items: center; gap: 6px;
	min-height: 52px; padding: 0 14px;
	font-size: 14.5px; font-weight: 700; color: rgba(255, 255, 255, .86); text-decoration: none;
	cursor: pointer; list-style: none; white-space: nowrap;
}
.arvr-subnav summary::-webkit-details-marker { display: none; }
.arvr-subnav summary::after {
	content: ""; width: 7px; height: 7px; margin-inline-start: 2px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.arvr .arvr-subnav a:hover, .arvr-subnav summary:hover { color: var(--arvr-white); }
.arvr-subnav a[aria-current="page"] { color: var(--arvr-white); box-shadow: inset 0 -3px 0 var(--arvr-mint); }
.arvr .arvr-subnav__brand { color: var(--arvr-mint); padding-inline-start: 0; }
.arvr-subnav a:focus-visible, .arvr-subnav summary:focus-visible { outline-color: var(--arvr-mint); outline-offset: -3px; }
/* Phones: the menu scrolls sideways, and an opened group lays its links out
   in the same row. Wider screens: the menu wraps, and a group opens as a panel
   under its label. */
.arvr-subnav details > ul { list-style: none; margin: 0; padding: 0; }
.arvr-subnav details[open] { display: flex; }
.arvr-subnav details[open] > ul { display: flex; }
.arvr .arvr-subnav details[open] > ul a { color: var(--arvr-mint); }
@media (min-width: 768px) {
	.arvr-subnav__list { flex-wrap: wrap; overflow: visible; }
	.arvr-subnav details[open] { display: block; }
	.arvr-subnav details[open] > ul {
		position: absolute; top: 100%; inset-inline-start: 0; z-index: 60; min-width: 210px;
		flex-direction: column; padding: 6px;
		background: var(--arvr-white); border: 1px solid var(--arvr-line); border-radius: var(--arvr-radius-sm);
		box-shadow: 0 14px 34px rgba(24, 48, 46, .14);
	}
	.arvr .arvr-subnav details[open] > ul a { min-height: 44px; border-radius: 8px; color: var(--arvr-ink); padding: 0 12px; }
	.arvr .arvr-subnav details[open] > ul a:hover { background: var(--arvr-accent-soft); color: var(--arvr-accent); }
}

/* ---- the figures ---- */
.arvr-numbers { background: var(--arvr-white); border-bottom: 1px solid var(--arvr-line); padding: calc(64px + clamp(28px, 4vw, 44px)) 0 clamp(28px, 4vw, 44px); }
.arvr-numbers ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.arvr-numbers li { border-inline-start: 3px solid var(--arvr-mint); padding-inline-start: 18px; }
.arvr-numbers strong { display: block; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; font-weight: 800; color: var(--arvr-ink); letter-spacing: -.03em; }
.arvr-numbers span { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--arvr-muted); }
.arvr-numbers--none { padding: 64px 0 0; border: 0; background: transparent; }

/* ---- overview ---- */
.arvr-overview { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.arvr-overview__lead .arvr-prose { margin-top: 18px; }
.arvr-overview__img { margin: 28px 0 0; border-radius: var(--arvr-radius); overflow: hidden; background: var(--arvr-white); border: 1px solid var(--arvr-line); }
.arvr-overview__img img { display: block; width: 100%; }
.arvr-stack { display: grid; gap: 18px; }
.arvr-panel { background: var(--arvr-white); border: 1px solid var(--arvr-line); border-radius: var(--arvr-radius); padding: clamp(20px, 2.4vw, 28px); }
.arvr-panel h3 { font-size: 19px; line-height: 1.3; margin-bottom: 12px; }

/* ---- prose (page bodies from the CMS) ---- */
.arvr-prose { color: var(--arvr-body); font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }
.arvr-prose > :first-child { margin-top: 0; }
.arvr-prose p, .arvr-prose ul, .arvr-prose ol, .arvr-prose div { margin: 0 0 14px; }
.arvr-prose h2, .arvr-prose h3, .arvr-prose h4 { color: var(--arvr-ink); margin: 28px 0 10px; line-height: 1.3; }
.arvr-prose h3 { font-size: 20px; }
.arvr-prose strong { color: var(--arvr-ink); }
.arvr-prose img { display: block; max-width: 100%; height: auto; margin: 18px 0; border-radius: var(--arvr-radius-sm); }
.arvr-prose iframe { max-width: 100%; border: 0; border-radius: var(--arvr-radius-sm); }
.arvr-prose ul { padding-inline-start: 0; list-style: none; }
.arvr-prose ul li { position: relative; padding-inline-start: 28px; margin-bottom: 8px; }
.arvr-prose ul li::before {
	content: ""; position: absolute; inset-inline-start: 4px; top: .55em;
	width: 10px; height: 10px; border-radius: 3px; background: var(--arvr-mint);
}
.arvr-prose ol { padding-inline-start: 22px; }
.arvr-prose a { font-weight: 600; }

/* ---- cards ---- */
.arvr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); }
.arvr-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.arvr-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--arvr-white); border: 1px solid var(--arvr-line); border-radius: var(--arvr-radius);
	overflow: hidden;
	transition: border-color .25s var(--arvr-ease), box-shadow .25s var(--arvr-ease);
}
.arvr-card:has(.arvr-card__link):hover { border-color: var(--arvr-line-strong); box-shadow: 0 14px 34px rgba(24, 48, 46, .12); }
.arvr-card:focus-within { border-color: var(--arvr-accent); }
.arvr-card__media { aspect-ratio: 16 / 10; background: #dfe7e4; overflow: hidden; }
.arvr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--arvr-ease); }
.arvr-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.arvr-card__title { font-size: 18px !important; line-height: 1.35; font-weight: 700 !important; letter-spacing: -.005em; }
.arvr-card__title a { color: inherit; text-decoration: none; }
.arvr-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.arvr-card:hover .arvr-card__title a { color: var(--arvr-accent); }
.arvr-card__meta { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--arvr-muted); }
.arvr-card__text { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--arvr-body); }
.arvr-card__ext { font-size: 12px; margin-inline-start: 4px; }
@media (prefers-reduced-motion: no-preference) {
	.arvr-card:has(.arvr-card__link):hover .arvr-card__media img { transform: scale(1.04); }
}

/* compact list cards (news, events) */
.arvr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.arvr-list .arvr-card { flex-direction: row; align-items: stretch; }
.arvr-list .arvr-card__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 120px; }
.arvr-list .arvr-card__title { font-size: 16.5px !important; }
.arvr-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.arvr-split h2 { font-size: clamp(22px, 2.4vw, 28px); }

/* programmes: image-led tiles */
.arvr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; }
/* The programme pictures carry their own lettering, so the name sits under
   the picture rather than over it. */
.arvr-tile {
	display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
	background: var(--arvr-white); border: 1px solid var(--arvr-line); border-radius: var(--arvr-radius);
	transition: border-color .25s var(--arvr-ease), box-shadow .25s var(--arvr-ease);
}
.arvr-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #dfe7e4; transition: transform .5s var(--arvr-ease); }
.arvr-tile span { display: block; padding: 14px 16px 16px; color: var(--arvr-ink); font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.arvr .arvr-tile:hover { border-color: var(--arvr-line-strong); box-shadow: 0 14px 34px rgba(24, 48, 46, .12); }
.arvr .arvr-tile:hover span { color: var(--arvr-accent); }
@media (prefers-reduced-motion: no-preference) {
	.arvr-tile:hover img { transform: scale(1.03); }
}

/* mentors */
.arvr-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); }
.arvr-person { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: start; position: relative;
	background: var(--arvr-white); border: 1px solid var(--arvr-line); border-radius: var(--arvr-radius); padding: 22px; }
.arvr-person img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; display: block; }
.arvr-person h3 { font-size: 20px; }
.arvr-person h3 a { color: inherit; text-decoration: none; }
.arvr-person h3 a::after { content: ""; position: absolute; inset: 0; }
.arvr-person h3 a:hover { color: var(--arvr-accent); }
.arvr-person__role { margin: 4px 0 0; font-weight: 600; color: var(--arvr-accent); font-size: 14.5px; }
.arvr-person__bio { margin: 10px 0 0; font-size: 15px; }

/* gallery */
.arvr-gallery { background: var(--arvr-slate); color: var(--arvr-on-slate); }
.arvr-gallery .arvr-h2, .arvr-gallery h2, .arvr-gallery h3 { color: var(--arvr-white); }
.arvr-gallery .arvr-more { color: var(--arvr-mint); }
.arvr-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.arvr-album { position: relative; display: block; text-decoration: none; border-radius: var(--arvr-radius); overflow: hidden; background: var(--arvr-slate-deep); }
.arvr-album img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s var(--arvr-ease); }
.arvr-album__label { display: block; padding: 14px 16px 16px; }
.arvr-album__name { display: block; color: var(--arvr-white); font-weight: 700; line-height: 1.35; }
.arvr-album__count { display: block; color: var(--arvr-mint); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
	.arvr-album:hover img { transform: scale(1.04); }
}
.arvr-video { margin-top: clamp(28px, 4vw, 48px); max-width: 860px; }
.arvr-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--arvr-radius); overflow: hidden; background: #000; }
.arvr-video__frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.arvr-video h3 { margin-top: 14px; font-size: 18px; }

/* photo grid on an album page */
.arvr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.arvr-photos a { display: block; border-radius: var(--arvr-radius-sm); overflow: hidden; background: #dfe7e4; }
.arvr-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .4s var(--arvr-ease); }
@media (prefers-reduced-motion: no-preference) {
	.arvr-photos a:hover img { transform: scale(1.04); }
}

/* lightbox (public/js/arvr.js) */
.arvr-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.arvr-lightbox::backdrop { background: rgba(10, 18, 18, .92); }
.arvr-lightbox__inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 72px; }
.arvr-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.arvr-lightbox button {
	position: absolute; min-width: 48px; min-height: 48px; border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 16px;
}
.arvr-lightbox button:hover { background: rgba(255, 255, 255, .26); }
.arvr-lightbox button:focus-visible { outline: 3px solid var(--arvr-mint); outline-offset: 2px; }
.arvr-lightbox__close { top: 16px; inset-inline-end: 16px; }
.arvr-lightbox__prev { inset-inline-start: 16px; top: 50%; transform: translateY(-50%); }
.arvr-lightbox__next { inset-inline-end: 16px; top: 50%; transform: translateY(-50%); }
.arvr-lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .8); font-size: 14px; }

/* who we serve + partners */
.arvr-serve { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.arvr-chips ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.arvr-chips li { padding: 10px 18px; border-radius: 999px; background: var(--arvr-accent-soft); color: var(--arvr-ink); font-weight: 700; font-size: 15px; }
.arvr-chips li::before { display: none; }
.arvr-logos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.arvr-logos li { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 14px;
	background: var(--arvr-white); border: 1px solid var(--arvr-line); border-radius: var(--arvr-radius-sm); }
.arvr-logos img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* contact */
.arvr-contact { background: var(--arvr-accent-deep); color: rgba(255, 255, 255, .86); }
.arvr-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
.arvr-contact h2, .arvr-contact h3 { color: var(--arvr-white); }
.arvr-contact .arvr-prose { color: rgba(255, 255, 255, .86); }
.arvr-contact .arvr-prose { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; }
.arvr-contact .arvr-prose h3 { margin-top: 0; font-size: 15px; letter-spacing: .02em; color: var(--arvr-mint); }
.arvr-contact .arvr-prose a { color: var(--arvr-white); }

/* ---- article ---- */
.arvr-article { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.arvr-article__figure { margin: 0 0 28px; border-radius: var(--arvr-radius); overflow: hidden; background: var(--arvr-white); border: 1px solid var(--arvr-line); }
.arvr-article__figure img { display: block; width: 100%; max-height: 560px; object-fit: contain; background: var(--arvr-white); }
.arvr-article__body { background: var(--arvr-white); border: 1px solid var(--arvr-line); border-radius: var(--arvr-radius); padding: clamp(22px, 3.4vw, 44px); }
.arvr-aside { position: sticky; top: 72px; display: grid; gap: 18px; }
.arvr-aside h2 { font-size: 17px !important; margin-bottom: 10px; }
.arvr-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.arvr-aside li a { display: block; padding: 8px 0; font-weight: 600; text-decoration: none; color: var(--arvr-ink); border-bottom: 1px solid var(--arvr-line); }
.arvr-aside li a:hover { color: var(--arvr-accent); }
.arvr-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.arvr-tags a { padding: 6px 12px; border-radius: 999px; background: var(--arvr-accent-soft); font-size: 14px; font-weight: 600; text-decoration: none; }
.arvr-empty { background: var(--arvr-white); border: 1px dashed var(--arvr-line-strong); border-radius: var(--arvr-radius); padding: 40px 24px; text-align: center; color: var(--arvr-muted); }
.arvr-pager { margin-top: 32px; display: flex; justify-content: center; }

/* ---- responsive ---- */
@media (max-width: 991px) {
	.arvr-hero__grid { grid-template-columns: 1fr; }
	.arvr-hero__text { padding-bottom: 8px; }
	.arvr-mosaic { margin-bottom: -48px; aspect-ratio: 16 / 10; }
	.arvr-overview, .arvr-article, .arvr-serve, .arvr-contact__grid { grid-template-columns: 1fr; }
	.arvr-aside { position: static; }
}
@media (max-width: 767px) {
	.arvr-hero, .arvr-pagehead { padding-top: 112px; }
	.arvr-subnav + .arvr-hero, .arvr-subnav + .arvr-pagehead { padding-top: 32px; }
	.arvr-split { grid-template-columns: 1fr; }
	.arvr-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; margin-bottom: -40px; }
	.arvr-mosaic figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
	.arvr-mosaic figure:not(:first-child) { aspect-ratio: 4 / 3; }
	.arvr-numbers { padding-top: calc(40px + 28px); }
	.arvr-person { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px; }
	.arvr-person img { width: 84px; height: 84px; }
	.arvr-list .arvr-card__media { flex-basis: 34%; min-height: 96px; }
	.arvr-lightbox__inner { padding: 64px 12px 72px; }
	.arvr-lightbox__prev, .arvr-lightbox__next { top: auto; bottom: 12px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.arvr *, .arvr *::before, .arvr *::after { transition-duration: .01ms !important; }
}
.arvr-tiles--spaced { margin-bottom: 40px; }

/* ---- the display voice, as on every other inner page ---- */
.arvr-hero h1, .arvr-pagehead h1, .arvr-h2, .arvr-split h2, .arvr-gallery h2 {
	font-family: var(--arvr-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0; line-height: .9;
}
.arvr-hero h1 { font-size: clamp(52px, 8vw, 120px); }
.arvr-pagehead h1 { font-size: clamp(40px, 5.6vw, 84px); max-width: 18ch; }
.arvr-h2 { font-weight: 600; font-size: clamp(36px, 4.2vw, 60px); line-height: .95; }
.arvr-split h2 { font-weight: 600; font-size: clamp(30px, 3vw, 42px); }
.arvr-numbers strong { font-family: var(--arvr-display); font-weight: 700; font-size: clamp(56px, 6vw, 88px); letter-spacing: 0; line-height: .85; }
.arvr-card__title { font-weight: 600 !important; }