/* ==========================================================================
   Sales House — main stylesheet
   1. Tokens & base
   2. Buttons
   3. Decorative media (shared by both videos)
   4. Hero: navigation
   5. Hero: layout, headline, CTA
   6. About
   7. Fallback page template (index.php)
   8. Responsive: tablet
   9. Responsive: mobile (<= 700px)
   10. Reduced motion
   ========================================================================== */

/* 1. Tokens & base
   ========================================================================== */

:root {
	--sh-green: #8CC140;
	--sh-green-hover: #9ACD50;
	--sh-green-dark: #5D812B;
	/* Small green text: #5D812B is only 4.25:1 on the grey background, this is 5.3:1. */
	--sh-green-text: #507124;
	--sh-bg: #FFFFFF;
	--sh-bg-alt: #F7F8F5;
	--sh-heading: #2B3033;
	--sh-nav: #3A3A3A;
	--sh-body: #606660;
	--sh-btn-text: #1A1C1E;
	--sh-grey: #555454;
	--sh-rule: #D2D4D0;
	/* The dark green-grey of the secondary buttons (Contact us…), as a solid colour. */
	--sh-dark: #404B34;

	/* Sofia Sans by Lettersoup (Sofia): full Latin and Cyrillic, self-hosted (assets/css/fonts.css). */
	--sh-font-display: 'Sofia Sans Condensed', 'Arial Narrow', Arial, sans-serif;
	--sh-font: 'Sofia Sans', Arial, sans-serif;

	/* Shared left gutter of every section. */
	--sh-pad-x: clamp(20px, 9vw, 118px);

	/*
	 * One size for every main heading (the homepage headline, What we do and the first heading of
	 * each page), and one starting height below the bar, so the headings line up from page to page.
	 */
	--sh-title-top: min(clamp(40px, 9vw, 120px), 9vh);
	--sh-title-size: min(clamp(34px, 7.6vw, 80px), 9.2vh);

	/*
	 * Homepage footage (16:9) beside the navigation: 99% of the window's width, but never so
	 * large that the bottom of the globe's stand (92.9% down, so 0.5226 × the width) and the
	 * What we do heading level with it drop below the first screen on wide, short windows.
	 */
	--sh-video-w: min(99vw, calc((100svh - 0.19 * var(--sh-title-size) - 32px) / 0.5226));
}

@media (max-width: 700px) {
	:root {
		--sh-title-size: clamp(34px, 10vw, 56px);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	/* Light grey everywhere below the white hero (the hero stays white: the footage's own background is white). */
	background: var(--sh-bg-alt);
	color: var(--sh-body);
	font-family: var(--sh-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
video {
	max-width: 100%;
}

button {
	font: inherit;
	color: inherit;
}

[hidden] {
	display: none !important;
}

/* Two-tone focus ring: stays visible on white surfaces and over dark footage. */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--sh-btn-text);
	outline-offset: 3px;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.9);
}

.hero__title,
.about__title {
	margin: 0;
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* 2. Buttons
   Square, solid buttons. Primary (default) is brand green with dark text; secondary is a deep green-tinted neutral with white text.
   The entrance animation lives in assets/js/main.js.
   ========================================================================== */

.sh-btn {
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
	height: 51.2px;
	padding: 0 25.92px 0 25.78px;
	border: 0;
	border-radius: 0;
	background-color: var(--sh-green);
	color: var(--sh-btn-text);
	font-family: var(--sh-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .2s, background-color .2s;
}

/* Secondary: navigation Contact us, "The Team", and the attachment pickers. */
.sh-btn--secondary,
.sh-btn--nav,
.sh-btn--small {
	padding: 0 30.35px;
	background-color: rgba(38, 51, 24, .88);
	color: #FFFFFF;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

@media (hover: hover) {
	.sh-btn:hover {
		background-color: var(--sh-green-hover);
	}

	.sh-btn--secondary:hover,
	.sh-btn--nav:hover,
	.sh-btn--small:hover {
		background-color: rgba(58, 78, 36, .94);
	}
}

.sh-btn:focus-visible {
	outline: 2px solid var(--sh-green-dark);
	outline-offset: 3px;
	box-shadow: none;
}

/* Label and icon are animated separately from the button, so they must be transformable. */
.sh-btn__label,
.sh-btn .sh-icon {
	display: inline-block;
	flex: 0 0 auto;
}

/* Compact secondary button (contact form attachment pickers). */
.sh-btn--small {
	height: 38px;
	padding: 0 16px;
}

@media (max-width: 510.98px) {
	.sh-btn {
		height: 46px;
		padding: 0 calc(clamp(13px, 3.5vw, 20px) - .34px) 0 calc(clamp(13px, 3.5vw, 20px) + .34px);
		font-size: 13.5px;
		letter-spacing: 0.02em;
	}

	.sh-btn--secondary,
	.sh-btn--nav,
	.sh-btn--small {
		padding: 0 clamp(13px, 3.5vw, 20px);
	}

	.sh-btn--small {
		height: 38px;
	}
}

/* 3. Decorative media (shared by both videos)
   ========================================================================== */

.sh-media {
	position: relative;
	/* The hue overlay must only ever blend with this box. */
	isolation: isolate;
	overflow: hidden;
	/* Reserves the box before the video loads; main.js refines it from the real dimensions. */
	aspect-ratio: var(--sh-ratio, 16 / 9);
	/* Opaque neutral base: a hue blend over a neutral stays neutral, so no green rectangle can appear. */
	background-color: #FFFFFF;
}

.sh-media__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* Shifts the footage's coloured accents to Sales House green; neutral whites and greys keep zero saturation. */
.sh-media__tint {
	position: absolute;
	inset: 0;
	background: var(--sh-green);
	mix-blend-mode: hue;
	pointer-events: none;
}

/*
 * Fallback for engines that cannot render the hue blend. Safari is documented as
 * not painting the non-separable blend modes (hue, saturation, color, luminosity);
 * the overlay would then show as a solid green rectangle. WebKit on Apple platforms
 * (the only engine that parses `font: -apple-system-body`) and any browser without
 * mix-blend-mode get a hue-rotate filter on the footage instead. The angles are
 * tuned to the default videos: cyan accents in the Hero, orange accents in About.
 */
.hero__media {
	--sh-hue-shift: -100deg;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
	.sh-media__tint {
		display: none;
	}

	.sh-media__video {
		filter: hue-rotate(var(--sh-hue-shift, 0deg));
	}
}

@supports not (mix-blend-mode: hue) {
	.sh-media__tint {
		display: none;
	}

	.sh-media__video {
		filter: hue-rotate(var(--sh-hue-shift, 0deg));
	}
}

/* The video could not load: keep the box, show the poster (set inline by main.js) or a neutral surface. */
.sh-media.is-failed {
	background: linear-gradient(135deg, #F7F8F5 0%, #E8ECE2 100%) center / contain no-repeat;
}

.sh-media.is-failed .sh-media__video {
	visibility: hidden;
}

/* Pause / play control */
.sh-motion-toggle {
	position: absolute;
	z-index: 3;
	right: clamp(10px, 2vw, 24px);
	bottom: clamp(10px, 2vw, 24px);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sh-heading);
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.18s ease;
}

.sh-motion-toggle::before {
	content: "";
	position: absolute;
	inset: 5px;
	z-index: -1;
	border: 1px solid rgba(43, 48, 51, 0.3);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.94);
}

.sh-motion-toggle:hover,
.sh-motion-toggle:focus-visible {
	opacity: 1;
}

/*
 * Beside the navigation, the hero's pause control sits at the lower right of the footage itself
 * (just below the globe's stand, 0.44 × the footage's width from its top), not at the bottom of
 * the hero, which can be far lower on tablets.
 */
@media (min-width: 700.02px) {
	.hero__motion-toggle {
		top: calc(var(--sh-video-w) * 0.44);
		bottom: auto;
	}
}

.sh-motion-toggle[data-playing="true"] .sh-icon--play,
.sh-motion-toggle[data-playing="false"] .sh-icon--pause {
	display: none;
}

/* 4. Hero: navigation
   ========================================================================== */

.site-header {
	position: relative;
	/* Above the content and the video control, so the open mobile menu covers both. */
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 5vw, 56px);
	/* The vh cap only trims the top padding on short desktop viewports. */
	padding: min(clamp(20px, 3vw, 38px), 4vh) clamp(20px, 4vw, 48px) 0;
}

.site-logo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.site-logo__img {
	display: block;
	width: auto;
	height: clamp(56px, 9vh, 76px);
}

/* The 2026 logo, with the name beside the mark: shorter than the stacked one at the same legibility. */
.site-logo__img--wide {
	height: clamp(48px, 7.4vh, 64px);
}

.site-logo__text {
	color: var(--sh-heading);
	font-size: clamp(15px, 2.4vw, 19px);
	font-weight: 700;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	position: relative;
	display: block;
	padding: 14px 0;
	color: var(--sh-nav);
	font-size: clamp(12px, 2.4vw, 15px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.18s ease;
}

.site-nav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	height: 2px;
	background: var(--sh-green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.18s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	color: var(--sh-btn-text);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
	transform: scaleX(1);
}

/* Home: a house icon instead of a word (its accessible name is hidden text inside the link). */
.site-nav__link--icon {
	display: grid;
	place-items: center;
	min-width: 28px;
}

/* EN / BG switcher, after the links. */
.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
}

.lang-switch {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-switch__item + .lang-switch__item {
	border-left: 1px solid var(--sh-rule);
}

.lang-switch__link {
	display: block;
	padding: 10px 8px;
	color: var(--sh-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	transition: color 0.18s ease;
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
	color: var(--sh-btn-text);
}

/* The selected language. */
.lang-switch__link[aria-current] {
	color: var(--sh-green-text);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.site-header__contact {
	margin-left: auto;
}

.nav-toggle {
	display: none;
}

/* 4b. Fixed header and "back to top"
   With JavaScript the bar stays at the top of the window on every page: main.js adds
   .has-fixed-header to <html> and a spacer of the bar's height in its place, so the
   layout below never moves. The bar keeps one size; once the page is scrolled it only
   gains a white background. Without JavaScript it simply scrolls with the page.
   ========================================================================== */

.has-fixed-header {
	/* Anchored sections (#about…) stop below the bar; main.js sets its measured height. */
	scroll-padding-top: var(--sh-header-h, 124px);
}

/* Even padding above and below, so the bar looks the same at rest and once it has a background. */
.has-fixed-header .site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 100;
	padding-top: min(clamp(14px, 2vw, 24px), 3vh);
	padding-bottom: min(clamp(14px, 2vw, 24px), 3vh);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.has-fixed-header .site-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 0 rgba(43, 48, 51, 0.08), 0 12px 28px -20px rgba(26, 28, 30, 0.45);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.site-header__spacer {
	flex: none;
}

/* Phones: the WordPress toolbar (logged-in users only) scrolls away, so the bar sits at the very top. */
@media screen and (max-width: 600px) {
	.has-fixed-header .site-header {
		top: 0;
	}
}

/* Phones: a slimmer bar at all times (it never changes size), so it covers less of the small screen. */
@media (max-width: 700px) {
	.has-fixed-header .site-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.has-fixed-header .site-logo__img {
		height: 60px;
	}

	.has-fixed-header .site-logo__img--wide {
		height: 48px;
	}
}

/* Back to top: appears once the visitor has scrolled about a screen down. */
.sh-to-top {
	position: fixed;
	right: clamp(14px, 2.4vw, 32px);
	bottom: clamp(14px, 2.4vw, 32px);
	z-index: 90;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: rgba(38, 51, 24, 0.9);
	color: #FFFFFF;
	box-shadow: 0 10px 24px -12px rgba(26, 28, 30, 0.55);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, visibility 0s linear 0.2s;
}

.sh-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

@media (hover: hover) {
	.sh-to-top:hover {
		background-color: var(--sh-green);
		color: var(--sh-btn-text);
	}
}

.sh-to-top:focus-visible {
	outline: 2px solid var(--sh-btn-text);
	outline-offset: 3px;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.9);
}

/* 5. Hero: layout, headline, CTA
   ========================================================================== */

.hero {
	/* Where the globe's centre sits across the Hero (the footage's width is --sh-video-w). */
	--sh-globe-x: 76.5%;

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--sh-bg);
}

/* Decorative layer. Only this box clips, so focus rings elsewhere in the Hero are never cut. */
.hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero__media {
	position: absolute;
	top: 0;
	left: calc(var(--sh-globe-x) - var(--sh-video-w) / 2);
	width: var(--sh-video-w);
	/* Softens the footage's lower edge, below the globe's stand. */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}

.hero__scrim {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 70%;
	background: linear-gradient(
		90deg,
		#FFFFFF 0%,
		#FFFFFF 55%,
		rgba(255, 255, 255, 0.85) 78%,
		rgba(255, 255, 255, 0) 100%
	);
}

/*
 * Signal (main.js): green rings spreading from the globe, one channel logo at a time.
 * Above the scrim, so it stays clear on white; sized and placed exactly like the video box,
 * and faded towards the headline on the left and at the bottom, like the footage.
 */
.hero__signal {
	position: absolute;
	top: 0;
	left: calc(var(--sh-globe-x) - var(--sh-video-w) / 2);
	width: var(--sh-video-w);
	aspect-ratio: 16 / 9;
	pointer-events: none;
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0%, #000 30%),
		linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0%, #000 30%),
		linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
	mask-composite: intersect;
}

.hero__ring {
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid var(--sh-green);
	border-radius: 50%;
	opacity: 0;
	will-change: transform, opacity;
}

/*
 * Each logo rides on a small white sphere, lit from the upper left like the spheres in the footage:
 * bright in the middle where the logo sits, shaded towards the lower right, with a soft highlight
 * and a shadow beneath. Every measure follows the sphere's size (--d).
 */
.hero__chip {
	--d: calc(var(--chip, 72px) * var(--chip-scale, 1));

	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: var(--d);
	height: var(--d);
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, #FFFFFF 36%, #F2F4EF 56%, #DDE1D8 76%, #BCC2B5 100%);
	box-shadow:
		inset calc(var(--d) * -0.05) calc(var(--d) * -0.07) calc(var(--d) * 0.14) rgba(40, 46, 34, 0.2),
		inset calc(var(--d) * 0.03) calc(var(--d) * 0.03) calc(var(--d) * 0.06) rgba(255, 255, 255, 0.9),
		0 calc(var(--d) * 0.2) calc(var(--d) * 0.28) calc(var(--d) * -0.12) rgba(20, 24, 18, 0.5);
	opacity: 0;
	will-change: transform, opacity;
}

/* Gloss: a soft reflection of the light, over the logo as on a printed ball. */
.hero__chip::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(ellipse 30% 22% at 31% 20%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

/* Long, flat logos (the Viasat channels) use most of the width; square ones are held by the height. */
.hero__chip img {
	max-width: 84%;
	max-height: 56%;
	/* Printed on the surface: picks up the shading at the edges of the sphere. */
	mix-blend-mode: multiply;
}

/* Dissolves the bottom of the Hero into the light grey of the next section, without a seam. */
.hero__backdrop::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: clamp(60px, 10vh, 120px);
	background: linear-gradient(180deg, rgba(247, 248, 245, 0) 0%, var(--sh-bg-alt) 92%);
}

.hero__content {
	position: relative;
	z-index: 2;
}

.hero__title {
	padding:
		var(--sh-title-top)
		20px
		min(clamp(24px, 4vw, 44px), 5vh)
		var(--sh-pad-x);
	font-size: var(--sh-title-size);
}

/* Two lines, the sentence and button straight underneath, all from the same left edge. */
.hero__line {
	display: block;
	text-wrap: balance;
}

.hero__accent {
	color: var(--sh-green-dark);
}

.hero__cta {
	padding:
		0
		20px
		min(clamp(36px, 6vw, 80px), 7vh)
		var(--sh-pad-x);
}

.hero__support {
	max-width: 44ch;
	margin: 0 0 clamp(18px, 2.2vw, 28px);
	color: var(--sh-body);
	font-size: clamp(14px, 1.5vw, 18px);
	line-height: 1.5;
}

/* 6. About
   ========================================================================== */

.about {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	padding:
		clamp(48px, 8vw, 112px)
		0
		clamp(30px, 5vw, 70px)
		var(--sh-pad-x);
}

.about__text {
	flex: 1 1 420px;
	min-width: 0;
}

.about__title {
	font-size: var(--sh-title-size);
}

/*
 * The heading stays on one line. The text column's width depends on how the two columns
 * share the row, not only on the viewport, so the heading is also capped by the column
 * itself ("КАКВО ПРАВИМ" is about 6.4em wide).
 */
@supports (width: 1cqi) {
	.about__text {
		container-type: inline-size;
	}

	.about__title {
		font-size: min(var(--sh-title-size), calc(100cqi / 6.7));
	}
}

.about__title {
	white-space: nowrap;
}

.about__accent {
	color: var(--sh-green-dark);
}

/* Text, points and button start at the heading's left edge. */
.about__body {
	max-width: 520px;
	margin: 32px 0 0;
	color: var(--sh-body);
	font-size: clamp(14px, 1.6vw, 17px);
	line-height: 1.7;
}

/* Three short points: a green dash, a bold lead-in, one sentence. */
.about__points {
	display: grid;
	gap: 10px;
	max-width: 520px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.about__point {
	position: relative;
	padding-left: 24px;
	color: var(--sh-body);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
}

.about__point::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0;
	width: 12px;
	height: 2px;
	background: var(--sh-green);
}

.about__point-title {
	color: var(--sh-heading);
	font-weight: 700;
}

/* Connected TV: a short heading and paragraph under the points. */
.about__ctv {
	max-width: 520px;
	margin: 28px 0 0;
}

.about__ctv-title {
	margin: 0 0 6px;
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-size: clamp(19px, 1.9vw, 23px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.about__ctv-text {
	margin: 0;
	color: var(--sh-body);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
}

/* The "Let's talk" button. */
.about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8.76px;
	margin: 36px 0 0;
}

.about__visual {
	position: relative;
	display: flex;
	flex: 1 1 360px;
	justify-content: flex-end;
	min-width: 0;
}

/*
 * Illustration (template-parts/about.php): a TV cycling through the channel logos and a
 * smaller Connected TV screen. Decorative only; main.js swaps the active logo.
 */
.screens {
	position: relative;
	width: 100%;
	max-width: 620px;
	margin: 0 var(--sh-pad-x) 0 auto;
	padding-bottom: 40px;
}

.screens__tv {
	width: 86%;
}

.screens__tv-screen,
.screens__ctv-screen {
	position: relative;
	overflow: hidden;
	border: clamp(8px, 1vw, 12px) solid var(--sh-dark);
	border-radius: 10px;
	/* Plain white: some logo files have a white, not transparent, background. */
	background: #FFFFFF;
	box-shadow: 0 30px 60px -40px rgba(26, 28, 30, 0.7);
}

.screens__tv-screen {
	aspect-ratio: 16 / 9;
}

.screens__logo {
	position: absolute;
	inset: 0;
	max-width: 42%;
	max-height: 38%;
	margin: auto;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.screens__logo.is-active {
	opacity: 1;
	transform: none;
}

.screens__stand {
	display: block;
	width: 30%;
	height: 14px;
	margin: 0 auto;
	background: #343E2A;
	clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.screens__ctv {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 34%;
}

.screens__ctv-screen {
	aspect-ratio: 4 / 3;
	border-width: clamp(5px, 0.6vw, 7px);
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 20px 40px -24px rgba(26, 28, 30, 0.7);
}

.screens__ctv .screens__logo {
	max-width: 62%;
	max-height: 50%;
}

.screens__ctv-label {
	display: block;
	margin-top: 6px;
	color: var(--sh-green-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

/* 7. Fallback page template (index.php)
   ========================================================================== */

.sh-page {
	padding: clamp(40px, 7vw, 96px) var(--sh-pad-x) clamp(64px, 9vw, 128px);
}

.sh-page__entry {
	max-width: 760px;
}

.sh-page__actions {
	margin-top: clamp(24px, 3vw, 36px);
}

.sh-page__entry + .sh-page__entry {
	margin-top: 48px;
}

.sh-page__title {
	margin: 0 0 20px;
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-size: var(--sh-title-size);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sh-page__content a {
	color: var(--sh-green-text);
	text-decoration: underline;
}

/* Longer text written in the editor (the Privacy Policy): the size and colour of the page leads. */
.sh-page__content {
	color: var(--sh-body);
	font-size: clamp(14px, 1.6vw, 17px);
	line-height: 1.7;
}

.sh-page__content h2 {
	margin: 2em 0 0.5em;
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.sh-page__content p,
.sh-page__content ul {
	margin: 0 0 1em;
}

.sh-page__content ul {
	padding-left: 1.25em;
}

.sh-page__content li + li {
	margin-top: 0.4em;
}

.sh-page__content .sh-page__updated {
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

/* 7b. The Team page (page-team.php)
   ========================================================================== */

.site-nav__link[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Shell shared by the internal pages (Channels, The Team, Documents, Contact Us). */
.sh-subpage {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	background: linear-gradient(180deg, #FFFFFF 0%, #F7F8F5 360px, #F7F8F5 100%);
}

/* Content sits above the decorative streak. */
.sh-subpage > .site-main {
	position: relative;
	z-index: 1;
}

.channels,
.team,
.contact,
.documents {
	padding: clamp(40px, 7vw, 96px) var(--sh-pad-x) clamp(64px, 9vw, 128px);
}

/*
 * Beside the navigation (not on phones, where the homepage headline sits under the video):
 * each page's first heading starts exactly where WHERE starts on the homepage.
 */
@media (min-width: 700.02px) {
	.channels,
	.team,
	.contact,
	.documents,
	.sh-page {
		padding-top: var(--sh-title-top);
	}
}

.channels__title,
.team__title,
.contact__title,
.documents__title {
	margin: 0;
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-size: var(--sh-title-size);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.channels__lead,
.team__lead,
.contact__lead,
.documents__lead {
	max-width: 760px;
	margin: clamp(20px, 3vw, 32px) 0 0;
	color: var(--sh-body);
	font-size: clamp(14px, 1.6vw, 17px);
	line-height: 1.7;
}

/* Introduction on the left, team photograph on the right. */
/* Top-aligned, so the heading sits at the same height as on every other page. */
.team__intro {
	display: flex;
	align-items: flex-start;
	gap: clamp(28px, 5vw, 72px);
}

.team__intro-text {
	flex: 1 1 0;
	min-width: 0;
}

.team__photo {
	flex: 1 1 0;
	min-width: 0;
	max-width: 620px;
	overflow: hidden;
	border: 1px solid rgba(43, 48, 51, 0.08);
	border-radius: 10px;
	aspect-ratio: 3 / 2;
	background: #FFFFFF;
}

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

/*
 * Stand-in until there is a team photograph (page-team.php): the teams as spheres, after the
 * homepage video. Management is the globe in the middle; each team is a white sphere orbiting
 * it, with a small white sphere per person orbiting the team. main.js moves them (left, top,
 * stacking order and --s, the perspective scale); the page draws the starting point.
 */
.team__photo--orbit {
	position: relative;
	container-type: inline-size;
	background: radial-gradient(120% 100% at 30% 20%, #FFFFFF 0%, #F1F3EE 60%, #E6E9E2 100%);
}

/* Holds the picture (decorative); the pause control sits beside it, in the box's corner. */
.orbit__scene {
	position: absolute;
	inset: 0;
}

.orbit__toggle {
	z-index: 60;
}

.orbit__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(140, 193, 64, 0.28) 0%, rgba(140, 193, 64, 0) 70%);
	transform: translate(-50%, -50%);
}

/* Management: the globe from the video (assets/images/team-globe.jpg). */
.orbit__globe {
	position: absolute;
	z-index: 30;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	box-shadow: 0 1.6cqi 2.6cqi -1.4cqi rgba(26, 28, 30, 0.45);
	transform: translate(-50%, -50%);
}

.orbit__globe::before,
.orbit__globe::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.orbit__globe::before {
	background: #E8ECE2 url("../images/team-globe.jpg") center / cover no-repeat;
}

/* Light from the upper left, shade towards the lower right, as on the other spheres. */
.orbit__globe::after {
	background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45%, rgba(26, 28, 30, 0.16) 100%);
}

/* A team, and a person: glossy white spheres like the small ones around the globe in the video. */
.orbit__team,
.orbit__moon {
	position: absolute;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F6F7F4 34%, #DCDFD8 74%, #C4C9BF 100%);
	transform: translate(-50%, -50%) scale(var(--s, 1));
	will-change: transform;
}

.orbit__team {
	display: grid;
	place-items: center;
	box-shadow: 0 1.4cqi 2.2cqi -1.2cqi rgba(26, 28, 30, 0.45);
}

.orbit__moon {
	width: 4.6%;
	box-shadow: 0 0.8cqi 1.2cqi -0.6cqi rgba(26, 28, 30, 0.45);
}

.orbit__label {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	padding: 0.3em 0.75em 0.25em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 8px -3px rgba(26, 28, 30, 0.35);
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-size: max(11px, 2.5cqi);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

/* On a white sphere: the name alone, on up to two lines. */
.orbit__label--team {
	position: static;
	width: 86%;
	padding: 0;
	background: none;
	box-shadow: none;
	font-size: max(10px, 2.05cqi);
	line-height: 1.15;
	text-align: center;
	white-space: normal;
	transform: none;
}

/*
 * Portrait with a partial green frame. The outer box carries the accents
 * (an L at each bottom corner) just outside the photograph;
 * the inner frame does the rounding and clipping, so the accents are never cut off.
 */
.team-photo {
	--acc-gap: 7px;
	--acc-len: 18px;
	--acc-line: 2px;
	--photo-radius: 8px;

	position: relative;
	flex: none;
	border-radius: var(--photo-radius);
}

/* Bottom: two thin L-shaped corners, each drawn from a vertical and a horizontal stroke. */
.team-photo::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--acc-gap) - var(--acc-line));
	bottom: calc(-1 * var(--acc-gap) - var(--acc-line));
	left: calc(-1 * var(--acc-gap) - var(--acc-line));
	height: var(--acc-len);
	background:
		linear-gradient(var(--sh-green), var(--sh-green)) left bottom / var(--acc-line) var(--acc-len) no-repeat,
		linear-gradient(var(--sh-green), var(--sh-green)) left bottom / var(--acc-len) var(--acc-line) no-repeat,
		linear-gradient(var(--acc-right, var(--sh-green)), var(--acc-right, var(--sh-green))) right bottom / var(--acc-line) var(--acc-len) no-repeat,
		linear-gradient(var(--acc-right, var(--sh-green)), var(--acc-right, var(--sh-green))) right bottom / var(--acc-len) var(--acc-line) no-repeat;
	pointer-events: none;
}

.team-photo__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--photo-radius);
	aspect-ratio: 1 / 1;
	background: #E8ECE2;
}

.team-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shown when a person has no photograph yet. */
/* No photograph yet: the name fills the frame (first name, then the rest in green). */
.team-photo__name {
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	padding: 12px;
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-size: clamp(18px, 1.7vw, 23px);
	font-weight: 600;
	line-height: 1.12;
	text-align: center;
	text-wrap: balance;
}

.team-photo__name-rest {
	display: block;
	color: var(--sh-green-dark);
}

/* The teams (Management first): a heading, then the lead and the others. */
.team-group {
	--card-w: clamp(140px, 14.5vw, 200px);
	--card-gap: clamp(20px, 3vw, 44px);

	margin-top: clamp(56px, 7vw, 104px);
}

.team-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin-bottom: clamp(28px, 3.4vw, 44px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sh-rule);
}

.team-group__title {
	margin: 0;
	color: var(--sh-heading);
	font-family: var(--sh-font-display);
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.team-group__row,
.team-set__people {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.team__member {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--card-w);
}

/*
 * People who share a position: the position once, over a green line, and the people under it.
 * In a row with such a group, the people standing alone drop by the label's height, so all
 * photographs line up.
 */
.team-set {
	--label-h: 46px;

	display: grid;
	gap: 0;
	flex: 0 1 auto;
	min-width: 0;
	/* Beside the lead, never wrapping under them; the people wrap inside instead. */
	max-width: calc(100% - var(--card-w) - 2 * var(--card-gap));
}

/* The first person of each group (the lead; in Management, the first partner) stands a little
   apart: twice the usual space before the others. */
.team-group__row > :first-child {
	margin-inline-end: var(--card-gap);
}

.team-set__label {
	height: var(--label-h);
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sh-green);
	color: var(--sh-green-text);
	font-size: 13px;
	font-weight: 700;
	line-height: calc(var(--label-h) - 11px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* At most --cols people a row (set per group: a group of six makes two rows of three). */
.team-set__people {
	max-width: calc(var(--cols, 4) * var(--card-w) + (var(--cols, 4) - 1) * var(--card-gap));
	padding-top: 18px;
}

.team-group__row--sets > .team__member {
	margin-top: calc(46px + 18px);
}

.team-bubble {
	width: 100%;
}

/* Name and position under the photograph, always visible (no hover needed, also on touch screens). */
.team-bubble__caption {
	margin-top: 22px;
	text-align: center;
}

.team-bubble__name {
	margin: 0;
	color: var(--sh-heading);
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.team-bubble__role {
	margin: 4px 0 0;
	color: var(--sh-green-text);
	font-size: 14px;
	line-height: 1.35;
}

@media (max-width: 900px) {
	.team__intro {
		flex-direction: column;
		align-items: stretch;
	}

	.team__photo {
		flex: none;
		width: 100%;
	}

}

/* Phones: two people per row; a group of people sharing a position starts on its own row. */
@media (max-width: 600px) {
	.team-group {
		--card-gap: 18px;
	}

	.team-group__row > .team__member,
	.team-set__people > .team__member {
		width: calc((100% - var(--card-gap)) / 2);
	}

	.team-set {
		flex: 1 1 100%;
		max-width: none;
	}

	.team-set__people {
		max-width: none;
	}

	.team-set__label {
		height: auto;
		line-height: 1.35;
		white-space: normal;
	}

	.team-group__row--sets > .team__member {
		margin-top: 0;
	}

	.team-group__row > :first-child {
		margin-inline-end: 0;
	}
}

@media (max-width: 700px) {
	.channels,
	.team,
	.contact,
	.documents,
	.sh-page {
		padding-right: 20px;
		padding-left: 20px;
	}
}

/* 7c. Shared pieces: decorative streak, screen-reader text
   ========================================================================== */

/* Skip link: hidden until it receives keyboard focus, then shown above the fixed bar. */
.sh-skip-link {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
	left: 12px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--sh-dark);
	color: #FFFFFF;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
}

.sh-skip-link:focus {
	transform: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/*
 * Soft green diagonal streak through the right-hand third (template-parts/accent.php).
 * Static and decorative: it sits behind the content, ignores the pointer and is clipped
 * to its own box so it can never cause horizontal scrolling.
 */
.sh-accent {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 40%;
	min-width: 260px;
	overflow: hidden;
	pointer-events: none;
}

.sh-accent__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Thin grey rule: the one separator style used across the site. Always decorative. */
.sh-rule {
	height: 1px;
	border: 0;
	background: var(--sh-rule);
}

/* Homepage below the hero: the shared streak (template-parts/accent.php) behind What we do. */
.sh-home-rest {
	position: relative;
}

.sh-home-rest > .about {
	position: relative;
	z-index: 1;
}

/*
 * The streak fades in below the hero instead of starting with an edge. Beside the navigation
 * the section is pulled up into the hero (below), so the fade starts at the hero's lower edge.
 */
.sh-home-rest > .sh-accent {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--sh-about-pull, 0px), #000 calc(var(--sh-about-pull, 0px) + 260px));
	mask-image: linear-gradient(180deg, transparent 0, transparent var(--sh-about-pull, 0px), #000 calc(var(--sh-about-pull, 0px) + 260px));
}

/*
 * Beside the navigation: What we do moves up into the bottom of the Hero, so its heading always
 * shows on the first screen. --sh-about-top is where the heading starts: its letters end level
 * with the bottom of the globe's stand (0.5226 × the footage's width; the baseline sits 0.7875em
 * into the heading), never above the button in the Hero and, as long as that allows, never so
 * low that it falls below the window. main.js measures the button and sets --sh-about-min to its
 * lower edge plus a gap; without JavaScript the floor is 540px.
 */
@media (min-width: 700.02px) {
	.sh-home-rest {
		--sh-about-top: max(min(max(calc(0.5226 * var(--sh-video-w) - 0.7875 * var(--sh-title-size)), var(--sh-about-min, 540px)), calc(100svh - var(--sh-title-size) - 32px)), var(--sh-about-min, 0px));
		--sh-about-pull: calc(100svh + clamp(48px, 8vw, 112px) - var(--sh-about-top));

		margin-top: calc(-1 * var(--sh-about-pull));
	}

	/* The paragraph starts a little lower, leaving air below the stand. */
	.sh-home-rest .about {
		--sh-about-gap: clamp(32px, 3.5vw, 56px);
	}

	.sh-home-rest .about__body {
		margin-top: var(--sh-about-gap);
	}
}

/* Side by side: the screens start level with the paragraph, not beside the heading. */
@media (min-width: 921px) {
	.sh-home-rest .about {
		align-items: flex-start;
	}

	.sh-home-rest .about__visual {
		margin-top: calc(var(--sh-title-size) * 0.98 + var(--sh-about-gap));
	}
}

/* 7d. Our Channels (page-channels.php)
   Every logo sits on a white tile in an even grid, on the light grey page. Rows wrap
   evenly and a shorter last row is centred, never one logo on its own.
   ========================================================================== */

.partners__row {
	--logo-h: clamp(40px, 3.6vw, 56px);
	--cols: 11;
	--gap: clamp(10px, 1.1vw, 16px);
	--tile-pad: clamp(14px, 1.6vw, 22px);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Space under the heading, and between the groups. */
.partners__row--main {
	margin-top: clamp(40px, 5.5vw, 80px);
}

.partners__row--viasat {
	--cols: 6;

	margin-top: clamp(32px, 4vw, 56px);
}

.partners__rule {
	margin: clamp(32px, 4vw, 56px) 0;
}

/* Connected TV and streaming: three larger tiles. */
.partners__row--featured {
	--logo-h: clamp(64px, 7vw, 100px);
	--cols: 3;
	--tile-pad: clamp(18px, 2vw, 28px);

	max-width: 900px;
	margin: 0 auto;
}

.partners__item {
	position: relative;
	display: flex;
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	min-width: 0;
}

/* The tile: a link, or (without a working website) a plain, non-clickable item. */
.partner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(var(--logo-h) + 2 * var(--tile-pad));
	padding: var(--tile-pad) 10px;
	border: 1px solid #E2E5DE;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: 0 10px 22px -18px rgba(26, 28, 30, 0.45);
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.partner:hover,
a.partner:focus-visible {
	z-index: 3;
	border-color: #CBD0C5;
	box-shadow: 0 16px 28px -18px rgba(26, 28, 30, 0.5);
	transform: translateY(-2px);
}

.partner--static {
	cursor: default;
}

.partner__logo {
	display: block;
	width: auto;
	max-width: 78%;
	height: auto;
	max-height: var(--logo-h);
}

.partner__placeholder {
	display: block;
	color: var(--sh-heading);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

/* Full name: a small label under the tile on hover / keyboard focus. Only opacity changes. */
.partner__name {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	z-index: 4;
	padding: 5px 9px;
	background: rgba(26, 28, 30, 0.9);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%);
	pointer-events: none;
	transition: opacity 0.22s ease;
}

.partner:hover,
.partner:focus {
	z-index: 3;
}

.partner:hover .partner__name,
.partner:focus .partner__name {
	opacity: 1;
}

.partner__placeholder + .partner__name {
	display: none;
}

/* Touch screens (no hover): the name is an always-visible caption inside the tile. */
@media (hover: none) {
	.partner__name {
		position: static;
		display: block;
		max-width: 100%;
		margin-top: 8px;
		padding: 0;
		background: none;
		color: var(--sh-body);
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 0;
		text-align: center;
		white-space: normal;
		opacity: 1;
		transform: none;
	}
}

/* Laptops: 6 + 5 channels, Viasat 3 + 3. */
@media (max-width: 1540px) {
	.partners__row--main {
		--cols: 6;
	}

	.partners__row--viasat {
		--cols: 3;
	}
}

@media (max-width: 900px) {
	.partners__row--main {
		--cols: 4;
	}
}

@media (max-width: 600px) {
	.partners__row--main {
		--cols: 3;
	}

	.partners__row--viasat {
		--cols: 2;
	}
}

/* Phones: the three streaming tiles stack. */
@media (max-width: 480px) {
	.partners__row--featured {
		--cols: 1;

		max-width: 280px;
	}
}

/* 7e. Contact details (page-contact.php): email, phones, address with a map pin, office hours
   ========================================================================== */

.sh-details {
	display: grid;
	gap: 18px;
	margin: clamp(24px, 3vw, 36px) 0 0;
}

.sh-details__label {
	color: var(--sh-green-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sh-details__value {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 24px;
	margin: 4px 0 0;
	color: var(--sh-heading);
	font-size: clamp(16px, 1.7vw, 19px);
	line-height: 1.5;
}

/* Hours with a smaller note underneath. */
.sh-details__value--stack {
	flex-direction: column;
	gap: 0;
}

/* The address with its map pin beside it. */
.sh-details__value--address {
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
}

.sh-details__address {
	font-style: normal;
}

.sh-details__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--sh-rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.sh-details__link:hover,
.sh-details__link:focus-visible {
	color: var(--sh-green-text);
	text-decoration-color: currentColor;
}

/* Map pin beside the address: opens the location in Google Maps. */
.sh-details__pin {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -10px 0;
	border-radius: 50%;
	color: var(--sh-green-dark);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sh-details__pin:hover,
.sh-details__pin:focus-visible {
	background-color: var(--sh-green);
	color: var(--sh-btn-text);
}

.sh-details__note {
	display: block;
	margin-top: 2px;
	color: var(--sh-body);
	font-size: 14px;
}

@media (max-width: 700px) {
	.sh-accent {
		width: 55%;
		min-width: 0;
		opacity: 0.7;
	}
}

/* 7f. Contact Us page (page-contact.php)
   ========================================================================== */

.contact {
	display: flex;
	align-items: flex-start;
	gap: clamp(32px, 6vw, 96px);
}

.contact__intro {
	flex: 1 1 0;
	min-width: 0;
}

.contact__form {
	flex: 1.2 1 0;
	min-width: 0;
	max-width: 600px;
}

.sh-form {
	display: grid;
	gap: 18px;
}

.sh-form__label {
	display: block;
	margin-bottom: 6px;
	color: var(--sh-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.sh-form__required {
	color: var(--sh-green-text);
}

.sh-form__input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	/* #80867F: 3.7:1 against the white field and 3.5:1 against the grey page (WCAG 1.4.11 needs 3:1). */
	border: 1.5px solid #80867F;
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--sh-heading);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s ease;
}

.sh-form__input--textarea {
	min-height: 150px;
	resize: vertical;
}

.sh-form__input:hover {
	border-color: var(--sh-green-dark);
}

/* Focus: the green border plus a soft green ring, so it stands apart from hover and from the resting grey. */
.sh-form__input:focus {
	border-color: var(--sh-green-dark);
	outline: none;
	box-shadow: 0 0 0 3px rgba(93, 129, 43, 0.28);
}

.sh-form__input[aria-invalid="true"] {
	border-color: #B3261E;
}

.sh-form__input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.22);
}

.sh-form__error {
	margin: 6px 0 0;
	color: #B3261E;
	font-size: 13px;
	line-height: 1.4;
	/* Several refused attachments: one line each. */
	white-space: pre-line;
}

.sh-form__error:empty {
	display: none;
}

/* While empty: out of the layout but still in the accessibility tree, so screen readers announce it when it fills. */
.sh-form__status:empty {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.sh-form__status {
	padding: 12px 14px;
	border: 1.5px solid var(--sh-green-dark);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--sh-heading);
	font-size: 15px;
	line-height: 1.5;
}

.sh-form__status.is-error {
	border-color: #B3261E;
	color: #8C1D18;
}

.sh-form__hint {
	margin: 0;
	color: var(--sh-body);
	font-size: 13px;
}

.sh-form__privacy-link {
	color: var(--sh-green-text);
	text-decoration: underline;
}

.sh-form__submit {
	justify-self: start;
}

.sh-form__submit[disabled] {
	cursor: progress;
	opacity: 0.6;
}

.sh-form__admin-note {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1.5px dashed rgba(43, 48, 51, 0.4);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--sh-heading);
	font-size: 13px;
	line-height: 1.5;
}

/* Attachments */
.sh-form__attachments .sh-form__label {
	margin: 0 0 8px;
}

.sh-form__optional {
	color: var(--sh-body);
	font-weight: 400;
	letter-spacing: 0;
}

.sh-form__attach-actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* The real file inputs are visually hidden but stay focusable; their labels are the visible buttons. */
.sh-form__file {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.sh-form__file:focus-visible + .sh-btn {
	outline: 2px solid var(--sh-green-dark);
	outline-offset: 3px;
	background-color: rgba(58, 78, 36, .94);
}

.sh-form__attachments .sh-form__hint {
	margin-top: 10px;
}

.sh-form__files {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.sh-form__file-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 12px;
	border: 1px solid rgba(43, 48, 51, 0.18);
	border-radius: 6px;
	background: #FFFFFF;
	font-size: 14px;
}

.sh-form__file-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--sh-heading);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sh-form__file-size {
	flex: none;
	color: var(--sh-body);
	font-size: 13px;
}

.sh-form__file-remove {
	flex: none;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid rgba(43, 48, 51, 0.3);
	border-radius: 6px;
	background: transparent;
	color: var(--sh-heading);
	font-size: 13px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.sh-form__file-remove:hover,
.sh-form__file-remove:focus-visible {
	border-color: #B3261E;
	background: #B3261E;
	color: #FFFFFF;
}

/* Without JavaScript there is no managed list: show the browser's own file pickers instead. */
.no-js .sh-form__file {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

.no-js .sh-form__attach-actions .sh-btn {
	display: none;
}

/* Honeypot: off-screen for people, still present for bots. */
.sh-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 900px) {
	.contact {
		flex-direction: column;
		align-items: stretch;
	}

	.contact__form {
		flex: none;
		max-width: none;
	}
}

/* 7h. Documents page (page-documents.php)
   ========================================================================== */

.documents__list {
	display: grid;
	gap: 12px;
	max-width: 980px;
	margin: clamp(32px, 5vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

/* Same thin grey rule as elsewhere, before the last group of documents. */
.documents__separator {
	height: 1px;
	margin: clamp(12px, 2vw, 20px) 0;
	background: var(--sh-rule);
}

/* One row per document: type badge, title, action. */
.document {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 24px);
	padding: 14px clamp(14px, 2vw, 22px);
	border: 1px solid rgba(43, 48, 51, 0.12);
	border-left: 3px solid var(--sh-green);
	background: #FFFFFF;
}

.document__type {
	flex: none;
	min-width: 52px;
	padding: 5px 8px;
	background: rgba(140, 193, 64, 0.18);
	color: var(--sh-green-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
}

.document__text {
	flex: 1 1 auto;
	min-width: 0;
}

.document__desc {
	margin: 4px 0 0;
	color: var(--sh-body);
	font-size: 14px;
	line-height: 1.45;
}

.document__title {
	margin: 0;
	color: var(--sh-heading);
	font-size: clamp(15px, 1.5vw, 18px);
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 600px) {
	.document {
		flex-wrap: wrap;
	}

	.document__text {
		flex-basis: calc(100% - 80px);
	}

	.document__action {
		flex: 1 1 100%;
	}
}

/* 7g. Footer and copyright strip (footer.php, every page)
   ========================================================================== */

/* Keeps the footer at the bottom of the window on pages shorter than the screen. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.site-footer {
	margin-top: auto;
}

.sh-page {
	width: 100%;
}

.site-footer__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px clamp(24px, 5vw, 64px);
	padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 48px);
	background: var(--sh-green);
}

/* The footer logo is a transparent, dark monochrome asset: no white box, the green shows through. */
.site-footer__logo {
	padding: 10px 16px;
}

.site-footer__logo .site-logo__img {
	height: 56px;
}

/* The 2026 stacked logo carries the name under the mark: a little taller, so the name stays readable. */
.site-footer__logo .site-logo__img--stacked {
	height: 76px;
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px clamp(18px, 3vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dark text: white on this green would be too faint to read comfortably. */
.site-footer__link {
	display: block;
	padding: 10px 0;
	color: var(--sh-btn-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.site-copyright {
	padding: 12px 20px;
	background: #333333;
	color: #D6D6D6;
	text-align: center;
}

.site-copyright__text {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

@media (max-width: 700px) {
	.site-footer__main {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* 8. Responsive: tablet
   The lower bound is 700.02px rather than 701px so that fractional viewport widths
   (browser zoom, fractional display scaling) never fall between the mobile and tablet rules.
   ========================================================================== */

/*
 * Narrower desktop / tablet: the globe moves further right to keep the headline clear of it.
 */
@media (min-width: 700.02px) and (max-width: 1180px) {
	.hero {
		--sh-globe-x: 84.5%;
	}
}

/* Keeps logo, links and contact button on one row down to the mobile breakpoint. */
@media (min-width: 700.02px) and (max-width: 1360px) {
	.site-header {
		gap: 16px;
	}

	.site-nav__list {
		gap: 16px;
	}

	.site-nav__link {
		font-size: 13px;
	}
}

/*
 * Around this width the two About columns no longer fit side by side. Stacking
 * them explicitly (rather than leaving it to flex-wrap, whose tipping point shifts
 * with the scrollbar) keeps the text's right gutter in step with the layout.
 *
 * Plain block layout is used for the stack: as column flex items, the text (a size
 * container) and the ratio-sized video were measured wrongly, which made the video
 * overflow into the next section.
 */
@media (max-width: 920px) {
	.about {
		display: block;
	}

	.about__text {
		padding-right: var(--sh-pad-x);
	}

	.about__visual {
		display: block;
		margin-top: 40px;
	}

	/* Auto width, so the right margin is kept (with width: 100% it would be ignored). */
	.screens {
		width: auto;
		max-width: 560px;
		margin: 0 var(--sh-pad-x) 0 auto;
	}
}

/* 9. Responsive: mobile (<= 700px)
   ========================================================================== */

@media (max-width: 700px) {
	/* Navigation: logo, then hamburger and the single Contact us action at the far right; links in a stacked panel. */
	.site-header {
		gap: 10px;
	}

	.site-header__contact {
		margin-left: 0;
	}

	.site-nav__link--icon {
		justify-items: start;
	}

	.nav-toggle {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin-left: auto;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.nav-toggle__bar {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--sh-heading);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.site-nav {
		position: absolute;
		top: calc(100% + 10px);
		right: clamp(12px, 4vw, 48px);
		left: clamp(12px, 4vw, 48px);
		padding: 14px 22px;
		border: 1px solid rgba(43, 48, 51, 0.1);
		background: #FFFFFF;
		box-shadow: 0 18px 40px -18px rgba(26, 28, 30, 0.35);
		max-height: calc(100vh - 120px);
		max-height: calc(100svh - 120px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.js .site-nav {
		display: none;
	}

	.js .site-header.is-menu-open .site-nav {
		display: block;
	}

	/* In the menu panel the switcher sits under the links. */
	.lang-switch {
		margin-top: 12px;
		padding-top: 10px;
		border-top: 1px solid var(--sh-rule);
	}

	.lang-switch__link {
		padding: 14px 12px;
		font-size: 15px;
	}

	.lang-switch__item:first-child .lang-switch__link {
		padding-left: 0;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.site-nav__link {
		padding: 13px 0;
		color: var(--sh-btn-text);
		font-size: 15px;
	}

	.site-nav__link::after {
		right: auto;
		width: 22px;
	}

	/* Without JavaScript the hamburger cannot work: show the links inline instead. */
	.no-js .nav-toggle {
		display: none;
	}

	.no-js .site-nav {
		position: static;
		flex: 1 1 100%;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.no-js .site-nav__list {
		flex-flow: row wrap;
		gap: 0 22px;
	}

	/* Hero: navigation, then a dedicated media area, then the headline. */
	.hero__visual {
		position: relative;
		order: 1;
		margin-top: 12px;
	}

	.hero__content {
		order: 2;
	}

	/* In normal flow: its height is the video's height, so the headline can never overlap it. */
	.hero__backdrop {
		position: relative;
		inset: auto;
	}

	.hero__media {
		position: relative;
		top: auto;
		right: auto;
		left: -12%;
		width: 119%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
	}

	.hero__scrim,
	.hero__backdrop::after {
		display: none;
	}

	/*
	 * No bottom fade on phones: the hero's own background turns grey towards the next section.
	 * Only as tall as its content, so What we do follows right after the button.
	 */
	.hero {
		min-height: 0;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 78%, var(--sh-bg-alt) 100%);
	}

	/* Over the in-flow video: same box, same top-and-bottom fade, nothing to clear on the left. */
	.hero__signal {
		right: auto;
		left: -12%;
		width: 119%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
	}

	.hero__title {
		padding: 0 20px 28px;
	}

	.hero__cta {
		padding: 0 20px clamp(36px, 9vw, 56px);
	}

	.hero__motion-toggle {
		bottom: 18%;
	}

	/* About: same 20px left gutter as the mobile Hero headline. */
	.about {
		padding-left: 20px;
	}

	.about__text {
		padding-right: 20px;
	}

	.about__body {
		margin-top: 24px;
	}

	.screens {
		margin-right: 20px;
	}

	.about__actions {
		margin-top: 28px;
	}
}

/* Small phones: the Contact us button keeps its short label beside the envelope, a little more compact. */
@media (max-width: 480px) {
	.sh-btn--nav {
		gap: 6px;
		min-height: 44px;
		padding: 0 12px;
		font-size: 13px;
	}

	.site-header {
		gap: 8px;
	}
}

/* 10. Motion
   The decorative motion (videos, logo cycles, the hero signal, the team spheres and button
   entrances) is all started by main.js, which leaves it paused when the system asks for
   reduced motion; the pause/play control starts it on request. Smooth scrolling follows the
   same setting here.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}