/* ==========================================================================
   Shutterrific — design tokens
   Source: Shutterrific Style Guide (Design Foundations & Brand System)
   ========================================================================== */

@font-face {
	font-family: 'Brown Sugar';
	src: url('../fonts/brown-sugar-regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colour */
	--sr-ink: #1a1a18;
	--sr-paper: #faf8f5;
	--sr-stone: #6b6560;
	--sr-pebble: #d9d4ce;
	--sr-brass: #b8976a;
	--sr-green: #767568;
	/* Warm off-whites used to break up consecutive light sections. Both sit in
	   the same warm family as the paper, so the page reads as one surface
	   catching different light rather than as separate colour bands. */
	--sr-sand: #f2ede6;
	--sr-sand-deep: #e8e0d5;

	/* Measured header height, used to clear the header where it overlaps the
	   hero. Matches the tall (unscrolled) state, which is the one that needs
	   clearing. */
	--sr-header-h: 81px;

	/* Spacing (8px incremental scale) */
	--sr-space-xs: 4px;
	--sr-space-sm: 8px;
	--sr-space-md: 12px;
	--sr-space-lg: 16px;
	--sr-space-xl: 24px;
	--sr-space-xxl: 32px;
	--sr-space-huge: 48px;
	--sr-space-giant: 64px;
	/* Stacked on mobile, consecutive sections contribute both their paddings,
	   so a 96px value reads as ~192px of empty paper between blocks. Scaled
	   up only once the layout is wide enough to carry it. */
	--sr-space-section: 56px;

	/* Type */
	--sr-font-heading: 'Playfair Display', serif;
	--sr-font-accent: 'Brown Sugar', 'Playfair Display', serif;
	--sr-font-body: 'DM Sans', sans-serif;

	/* Layout - full width, capped at 1920px */
	--sr-container-max: 1920px;
	--sr-gutter: 16px;
	--sr-radius: 2px;
}

@media (min-width: 700px) {
	:root {
		--sr-gutter: 32px;
		--sr-space-section: 96px;
	}
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--sr-paper);
	color: var(--sr-stone);
	font-family: var(--sr-font-body);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.sr-accent-font {
	font-family: var(--sr-font-accent);
	font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

/* Baseline visible focus ring for keyboard users - a safety net behind any
   component-specific focus treatment defined elsewhere in this file. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--sr-green);
	outline-offset: 2px;
}

/* Unqualified on purpose: every ul/ol in this hand-built theme is either
   nav/layout markup (wants no bullets) or .sr-prose editor content, which
   explicitly re-adds list-style itself. Avoids the classed-vs-unclassed
   <ul> bug (WP core menu/gallery markup often omits a class). */
ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
.sr-h1,
.sr-h2,
.sr-h3,
.sr-h4 {
	font-family: var(--sr-font-heading);
	color: var(--sr-ink);
	margin: 0;
}

.sr-h1,
h1 {
	font-weight: 600;
	font-size: clamp(2.75rem, 2rem + 3.5vw, 5.5rem);
	line-height: 1.05;
}

.sr-h2,
h2 {
	font-weight: 600;
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
	line-height: 1.1;
}

.sr-h3,
h3 {
	font-weight: 500;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
	line-height: 1.2;
}

.sr-h4,
h4 {
	font-weight: 500;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	line-height: 1.25;
}

.sr-body-lg {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.6;
}

.sr-caption {
	font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sr-green);
	font-weight: 600;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.sr-container {
	max-width: var(--sr-container-max);
	margin-inline: auto;
	padding-inline: var(--sr-space-xl);
}

.sr-section {
	padding-block: var(--sr-space-section);
}

/* Alternating surface. Long runs of pure paper read as unfinished, so content
   sections alternate between paper and a warm tint.
   The tint eases in and out across its own top and bottom edges rather than
   filling flat, so sections melt into one another instead of butting up as
   hard-edged stripes. The ramp is a fixed length (not a percentage of the
   section) so short and tall sections fade at the same rate, and its stops
   follow an ease-in-out curve: a straight linear ramp leaves a visible seam
   at both ends where the rate of change jumps.
   Each edge blends from --sr-edge-* into the fill. By default that is a
   zero-alpha copy of the fill, which keeps the interpolation inside the warm
   family - `transparent` is rgba(0,0,0,0) and drags the midpoint grey. When
   two tinted sections touch, the shared edge is set to the neighbour's colour
   instead, so the pair hand off directly rather than both dipping to paper. */
.sr-section--tint,
.sr-section--tint-deep {
	--sr-fill: var(--sr-sand);
	--sr-edge-top: rgba(242, 237, 230, 0);
	--sr-edge-bottom: rgba(242, 237, 230, 0);
	--sr-fade: clamp(160px, 20vw, 280px);
	background: linear-gradient(
		180deg,
		var(--sr-edge-top) 0,
		color-mix(in srgb, var(--sr-fill) 10%, var(--sr-edge-top)) calc(var(--sr-fade) * 0.25),
		color-mix(in srgb, var(--sr-fill) 50%, var(--sr-edge-top)) calc(var(--sr-fade) * 0.5),
		color-mix(in srgb, var(--sr-fill) 90%, var(--sr-edge-top)) calc(var(--sr-fade) * 0.75),
		var(--sr-fill) var(--sr-fade),
		var(--sr-fill) calc(100% - var(--sr-fade)),
		color-mix(in srgb, var(--sr-fill) 90%, var(--sr-edge-bottom)) calc(100% - var(--sr-fade) * 0.75),
		color-mix(in srgb, var(--sr-fill) 50%, var(--sr-edge-bottom)) calc(100% - var(--sr-fade) * 0.5),
		color-mix(in srgb, var(--sr-fill) 10%, var(--sr-edge-bottom)) calc(100% - var(--sr-fade) * 0.25),
		var(--sr-edge-bottom) 100%
	);
}

/* Deeper step for the one section that needs to carry more weight. Warm rather
   than the old grey pebble, which broke the family and read as a stripe. */
.sr-section--tint-deep {
	--sr-fill: var(--sr-sand-deep);
	--sr-edge-top: rgba(232, 224, 213, 0);
	--sr-edge-bottom: rgba(232, 224, 213, 0);
}

/* Touching tinted sections: the first runs flat to its bottom edge and the
   second eases from the first's colour, so the join is one continuous ramp
   of sand into deep sand (or back) with no trip through paper. */
.sr-section--tint:has(+ .sr-section--tint),
.sr-section--tint:has(+ .sr-section--tint-deep),
.sr-section--tint-deep:has(+ .sr-section--tint) {
	--sr-edge-bottom: var(--sr-fill);
}

.sr-section--tint + .sr-section--tint,
.sr-section--tint + .sr-section--tint-deep {
	--sr-edge-top: var(--sr-sand);
}

.sr-section--tint-deep + .sr-section--tint {
	--sr-edge-top: var(--sr-sand-deep);
}

.sr-hairline {
	border: none;
	border-top: 1px solid var(--sr-pebble);
	margin: 0;
}

/* ==========================================================================
   Buttons & links
   ========================================================================== */

/* Directional magnetic-circle hover button. Markup rendered by sr_button()
   in functions.php - keep the two in sync. */

.sr-btn {
	--btn-height: 3.25em;
	cursor: pointer;
	border-radius: calc(var(--btn-height) * 0.5);
	height: var(--btn-height);
	padding-inline: var(--sr-space-xl);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	position: relative;
	overflow: visible;
	font-family: var(--sr-font-body);
	font-weight: 600;
	font-size: 16px;
	border: 1px solid transparent;
}

.sr-btn__bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sr-btn__circle-wrap {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
}

.sr-btn__circle {
	pointer-events: none;
	border-radius: 50%;
	width: 115%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
	transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.sr-btn:hover .sr-btn__circle,
.sr-btn:focus-visible .sr-btn__circle {
	transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

.sr-btn__text {
	position: relative;
	white-space: nowrap;
	transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Primary: ink fill, green circle reveals, text goes ink on hover */
.sr-btn[data-theme='primary'] .sr-btn__bg {
	background: var(--sr-ink);
}

.sr-btn[data-theme='primary'] .sr-btn__text {
	color: var(--sr-paper);
}

.sr-btn[data-theme='primary'] .sr-btn__circle {
	background: var(--sr-green);
}

/* White rather than the palette's paper: against sage green pure white
   clears 4.5:1 (4.65) where paper lands just under it, and the difference
   is imperceptible next to the green. Focus-visible is included because the
   circle expands on keyboard focus too, not just hover. */
.sr-btn[data-theme='primary']:hover .sr-btn__text,
.sr-btn[data-theme='primary']:focus-visible .sr-btn__text {
	color: #fff;
}

/* Secondary: outlined, ink circle reveals, text goes paper on hover */
.sr-btn[data-theme='secondary'] {
	border-color: var(--sr-ink);
}

.sr-btn[data-theme='secondary'] .sr-btn__text {
	color: var(--sr-ink);
}

.sr-btn[data-theme='secondary'] .sr-btn__circle {
	background: var(--sr-ink);
}

.sr-btn[data-theme='secondary']:hover .sr-btn__text,
.sr-btn[data-theme='secondary']:focus-visible .sr-btn__text {
	color: var(--sr-paper);
}

/* Light: paper fill, for use on dark backgrounds (e.g. the CTA banner) */
.sr-btn[data-theme='light'] .sr-btn__bg {
	background: var(--sr-paper);
}

.sr-btn[data-theme='light'] .sr-btn__text {
	color: var(--sr-ink);
}

.sr-btn[data-theme='light'] .sr-btn__circle {
	background: var(--sr-green);
}

.sr-btn[data-theme='light']:hover .sr-btn__text,
.sr-btn[data-theme='light']:focus-visible .sr-btn__text {
	color: #fff;
}

.sr-link {
	color: var(--sr-ink);
}

.sr-link:hover,
.sr-link:focus-visible {
	color: var(--sr-green);
}

.sr-link,
.sr-nav a,
.sr-footer a,
.sr-prose a {
	text-decoration: none;
}

/* Desktop / mouse: a plain, simple colour hover - no motion. */
@media (hover: hover) and (pointer: fine) {
	.sr-footer a:hover {
		color: var(--sr-green);
	}

	.sr-prose a:hover {
		color: var(--sr-green);
	}
}

/* Touch devices only: the animated underline, and bigger tap targets -
   this is where it earns its keep (no hover state to fall back on, so the
   link needs to read clearly as tappable and the links want a larger,
   easier target). Desktop/mouse gets the plain hover above instead. */
@media (hover: none) {
	.sr-link,
	.sr-footer a,
	.sr-prose a {
		position: relative;
		font-size: 1.0625em;
	}

	.sr-link::before,
	.sr-footer a::before,
	.sr-prose a::before {
		content: '';
		position: absolute;
		bottom: -0.0625em;
		left: 0;
		width: 100%;
		height: 0.0625em;
		background-color: currentColor;
		transform-origin: left;
		transform: scaleX(1) rotate(0.001deg);
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

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

.sr-header {
	position: relative;
	z-index: 10;
	background: var(--sr-paper);
	border-bottom: 1px solid var(--sr-pebble);
}

.sr-header {
	position: sticky;
	top: 0;
}

/* Sits above the mobile menu overlay (which is its sibling inside this same
   header), so the logo and the close button stay visible and tappable while
   the menu is open. */
.sr-header__inner {
	position: relative;
	z-index: 95;
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: var(--sr-space-lg);
	padding-block: var(--sr-space-md);
}

/* Mobile phone icon - left */
.sr-header__phone-icon {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--sr-ink);
}

.sr-header__phone-icon svg {
	width: 22px;
	height: 22px;
}

.sr-header__phone-icon::before {
	display: none;
}

/* Desktop text links - left, hidden on mobile. Content and structure (incl.
   the dropdown children) come from the "Header - Left" menu, editable at
   Appearance > Menus - see sr_menu_items() in functions.php. */
.sr-header__links {
	grid-column: 1;
	display: none;
}

/* Already inside the right-hand actions group, so it takes no grid column
   of its own and follows that group's own show/hide. */
.sr-header__links--right {
	grid-column: auto;
	display: flex;
}

.sr-header__links > ul {
	display: flex;
	gap: var(--sr-space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-header__links li {
	position: relative;
	padding-block: var(--sr-space-lg);
	margin-block: calc(var(--sr-space-lg) * -1);
}

.sr-header__links > ul > li > a {
	font-size: 15px;
	font-weight: 500;
	color: var(--sr-stone);
	text-decoration: none;
}

.sr-header__links > ul > li > a:hover,
.sr-header__links > ul > li > a:focus-visible {
	color: var(--sr-ink);
}

.sr-header__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	flex-direction: column;
	gap: var(--sr-space-sm);
	background: var(--sr-paper);
	border: 1px solid var(--sr-pebble);
	border-radius: var(--sr-radius);
	padding: var(--sr-space-md);
	min-width: 200px;
	box-shadow: 0 12px 24px rgba(26, 26, 24, 0.08);
	z-index: 20;
}

/* Invisible bridge over the visual gap above the dropdown, so moving the
   cursor down from the link to the panel never drops out of :hover. */
.sr-header__dropdown::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

.has-dropdown:hover .sr-header__dropdown,
.has-dropdown:focus-within .sr-header__dropdown {
	display: flex;
}

.sr-header__dropdown a {
	font-size: 14px;
	color: var(--sr-stone);
	text-decoration: none;
	white-space: nowrap;
	display: block;
	padding: var(--sr-space-xs) var(--sr-space-sm);
}

.sr-header__dropdown a:hover,
.sr-header__dropdown a:focus-visible {
	color: var(--sr-ink);
	background: var(--sr-pebble);
	border-radius: var(--sr-radius);
}

.sr-logo {
	grid-column: 2;
	justify-self: center;
	font-family: var(--sr-font-heading);
	font-weight: 600;
	font-size: 20px;
	color: var(--sr-ink);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.sr-logo img {
	max-height: 56px;
	width: auto;
	transition: max-height 0.25s ease;
}

/* Right-hand group: any secondary links sit beside the CTA button, both
   hidden on mobile where the hamburger panel carries the full menu. */
.sr-header__actions {
	grid-column: 4;
	display: none;
	align-items: center;
	gap: var(--sr-space-xl);
}

/* Hamburger toggle - mobile only, right */
.sr-nav-toggle {
	grid-column: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.sr-nav-toggle span:not(.sr-visually-hidden) {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--sr-ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

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

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

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

@media (min-width: 900px) {
	.sr-header__phone-icon,
	.sr-nav-toggle,
	.sr-nav {
		display: none;
	}

	.sr-header__links {
		display: flex;
	}

	.sr-logo img {
		max-height: 104px;
	}

	.sr-header.is-scrolled .sr-logo img {
		max-height: 68px;
	}

	.sr-header__actions {
		display: flex;
	}
}

/* Mobile menu - a full-screen overlay, only ever shown under 900px.
   Fixed to the viewport and sat below the header's own stacking level so the
   logo and close button stay visible and tappable over it. Uses dvh, with a
   vh fallback, so mobile browser chrome collapsing doesn't clip the footer
   block off the bottom. */
.sr-nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 90;
	flex-direction: column;
	background: var(--sr-paper);
	padding: 96px var(--sr-space-xl) var(--sr-space-xl);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sr-nav.is-open {
	display: flex;
}

/* Pushes the phone and CTA block to the bottom of the overlay however short
   the menu is. */
.sr-nav__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sr-space-xl);
	min-height: 100%;
}

.sr-nav__foot {
	display: flex;
	flex-direction: column;
	gap: var(--sr-space-lg);
	margin-top: auto;
	padding-top: var(--sr-space-xl);
	border-top: 1px solid var(--sr-pebble);
}

.sr-nav__phone {
	display: flex;
	flex-direction: column;
	gap: var(--sr-space-xs);
	text-decoration: none;
}

.sr-nav__phone-number {
	font-family: var(--sr-font-heading);
	font-size: 28px;
	color: var(--sr-ink);
	line-height: 1.1;
}

.sr-nav__cta {
	align-self: stretch;
}

.sr-nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--sr-space-lg);
}

.sr-nav ul ul {
	padding-left: var(--sr-space-lg);
	padding-top: var(--sr-space-lg);
	gap: var(--sr-space-md);
}

.sr-nav a {
	text-decoration: none;
	font-size: 20px;
	font-weight: 500;
	color: var(--sr-stone);
}

.sr-nav ul ul a {
	font-size: 17px;
}

.sr-nav a:hover,
.sr-nav a:focus-visible {
	color: var(--sr-ink);
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* The header is paper, so an untinted hero ran straight into it and read as
   one flat block. The hero and the trust strip below it share the sand tint
   so the top of the page opens on a distinct band, matching the alternating
   rhythm further down. */
.sr-hero {
	position: relative;
	/* Contains the -1 background layer so it paints over the sand but under
	   the hero content, without escaping into the sections above or below. */
	isolation: isolate;
	overflow: hidden;
	background: var(--sr-sand);
	padding-block: var(--sr-space-giant) var(--sr-space-section);
}

/* Optional photo wash behind the hero. Deliberately very low contrast: it is
   texture, not an image, and the headline has to stay comfortably readable. */
.sr-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.sr-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--sr-hero-bg-opacity, 0.08);
}

/* --------------------------------------------------------------------------
   Homepage hero: full height, with the header floating over it.
   Only the homepage does this - inner pages keep the solid header sitting
   above their hero, because they have no full-bleed image to float over.
   -------------------------------------------------------------------------- */

.home .sr-header {
	position: fixed;
	top: 0;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Solid again once scrolled, or the nav would sit unreadable over content.
   .is-scrolled is toggled in main.js with hysteresis. */
.home .sr-header.is-scrolled {
	background: var(--sr-paper);
	border-bottom-color: var(--sr-pebble);
}

.home .sr-hero {
	/* svh so mobile browser chrome does not push the hero taller than the
	   visible viewport. vh first as the fallback. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-top: calc(var(--sr-header-h) + var(--sr-space-xl));
}

.home .sr-hero > .sr-container {
	width: 100%;
}

@media (min-width: 900px) {
	:root {
		--sr-header-h: 129px;
	}
}

/* Full-bleed band so the tone runs edge to edge rather than stopping at the
   container width. Runs inverted: a dark beat between the tinted hero and the
   paper intro, which stops the whole top of the page reading as one tone. */
.sr-trust-band {
	background: var(--sr-ink);
}

/* Everything inside the band flips to light-on-dark. The hairlines come off:
   the band edge already does the separating, and an inset rule on dark reads
   as a stray line rather than structure. */
.sr-trust-band .sr-trust {
	border-top: 0;
	border-bottom: 0;
}

.sr-trust-band .sr-trust__label {
	color: var(--sr-paper);
}

.sr-trust-band .sr-trust__description {
	color: rgba(250, 248, 245, 0.62);
}

/* Beats the .sr-trust__label .sr-icon green treatment on specificity. */
.sr-trust-band .sr-trust__label .sr-icon {
	color: var(--sr-paper);
	border-color: rgba(250, 248, 245, 0.42);
}

@media (min-width: 900px) {
	.sr-hero {
		padding-block: var(--sr-space-section);
	}
}

/* No hero image to fill the gap - the section right after it already adds
   its own top padding, so don't stack two full section-gaps of empty
   space in between. */
.sr-hero--tight {
	padding-bottom: var(--sr-space-xl);
}

.sr-hero__eyebrow {
	display: block;
	margin-bottom: var(--sr-space-lg);
}

.sr-hero__heading {
	max-width: 16ch;
	margin-bottom: var(--sr-space-lg);
}

.sr-hero__subheading {
	margin-bottom: var(--sr-space-xl);
}

.sr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-space-lg);
}

.sr-hero__image {
	margin-top: var(--sr-space-xxl);
	border-radius: var(--sr-radius);
	overflow: hidden;
}

.sr-hero__image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (min-width: 900px) {
	.sr-hero__image img {
		aspect-ratio: 21 / 9;
	}
}

/* Split hero - copy left, video/image right (desktop); stacked (mobile) */
.sr-hero--split .sr-hero__split-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sr-space-xxl);
	align-items: center;
}

@media (min-width: 900px) {
	.sr-hero--split .sr-hero__split-inner {
		/* Even split rather than 1.2fr: the copy is capped by its own
		   measure anyway, so the extra share only widened the gap between
		   the two columns instead of being used. */
		grid-template-columns: 1fr 1fr;
		gap: var(--sr-space-giant);
	}
}

.sr-hero__visual {
	display: flex;
	justify-content: center;
}

@media (min-width: 900px) {
	.sr-hero__visual {
		justify-content: flex-end;
	}
}

/* The hero frame sets the crop; the player inside runs in cover mode and
   fills it, so position: relative here is what its absolute layers hang off.
   No max-width until the split layout kicks in: capping it while the hero is
   stacked would centre a narrower frame and inset the video further than the
   text above it. */
.sr-hero-video {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: calc(var(--sr-radius) * 4);
	overflow: hidden;
	box-shadow: 0 24px 48px rgba(26, 26, 24, 0.16);
	background: var(--sr-ink);
}

.sr-hero--split .sr-hero__image {
	margin-top: 0;
}

/* Capped by width, but the number is chosen for the resulting height: at a
   3:4 crop anything much wider than this makes a hero taller than most
   screens and pushes everything below it off the fold. */
@media (min-width: 900px) {
	.sr-hero-video,
	.sr-hero--split .sr-hero__image {
		max-width: 520px;
	}
}

.sr-hero--split .sr-hero__image img {
	aspect-ratio: 3 / 4;
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.sr-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sr-space-xl);
	padding-block: var(--sr-space-huge);
	border-top: 1px solid var(--sr-pebble);
	border-bottom: 1px solid var(--sr-pebble);
}

@media (min-width: 700px) {
	.sr-trust {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sr-trust__item {
	text-align: left;
}

.sr-trust__label {
	display: block;
	font-family: var(--sr-font-heading);
	font-weight: 500;
	font-size: 18px;
	color: var(--sr-ink);
	margin-bottom: var(--sr-space-xs);
}

.sr-trust__description {
	font-size: 14px;
	color: var(--sr-stone);
}

/* ==========================================================================
   Generic content sections (page-standard)
   ========================================================================== */

.sr-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sr-space-xxl);
}

@media (min-width: 700px) {
	.sr-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.sr-features:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sr-feature__image {
	border-radius: var(--sr-radius);
	overflow: hidden;
	margin-bottom: var(--sr-space-lg);
}

.sr-feature__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sr-faqs__heading {
	margin-bottom: var(--sr-space-xl);
}

.sr-faq {
	border-top: 1px solid var(--sr-pebble);
	padding-block: var(--sr-space-xl);
}

.sr-faq:last-child {
	border-bottom: 1px solid var(--sr-pebble);
}

.sr-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sr-space-lg);
	cursor: pointer;
	list-style: none;
}

.sr-faq__question::-webkit-details-marker {
	display: none;
}

.sr-faq__question::after {
	content: '';
	flex: none;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--sr-ink);
	border-bottom: 2px solid var(--sr-ink);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.sr-faq[open] .sr-faq__question::after {
	transform: rotate(-135deg);
}

.sr-faq__question:hover,
.sr-faq__question:focus-visible {
	color: var(--sr-green);
}

.sr-faq__answer {
	overflow: hidden;
	padding-top: var(--sr-space-md);
}

.sr-faq__answer p {
	margin: 0;
}

.sr-gallery {
	display: flex;
	gap: var(--sr-space-lg);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sr-space-sm);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.sr-gallery img {
	flex: 0 0 68%;
	scroll-snap-align: start;
	border-radius: var(--sr-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Replaced elements do not stretch to their grid track by default, so a
	   spanning image would otherwise sit at its intrinsic pixel width. */
	width: 100%;
}

/* Six-column track so three images sit per row at their natural size, but a
   short final row can widen to fill instead of leaving an orphan. Galleries
   are editor-managed, so the count is never guaranteed to divide by three. */
@media (min-width: 700px) {
	.sr-gallery {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		overflow-x: visible;
	}

	.sr-gallery img {
		flex: none;
		grid-column: span 2;
	}

	/* One image left over: let it run the full width. */
	.sr-gallery img:last-child:nth-child(3n + 1) {
		grid-column: span 6;
		aspect-ratio: 21 / 9;
	}

	/* Two left over: split the row between them. */
	.sr-gallery img:last-child:nth-child(3n + 2),
	.sr-gallery img:nth-last-child(2):nth-child(3n + 1) {
		grid-column: span 3;
		aspect-ratio: 3 / 2;
	}
}

/* ==========================================================================
   Contact / form
   ========================================================================== */

/* Placeholders are prompts, not content. Kept clearly lighter and italic so
   an example answer is never mistaken for a real submitted value. */
.sr-contact-form ::placeholder,
.gform_wrapper ::placeholder {
	color: var(--sr-stone);
	opacity: 0.65;
	font-style: italic;
}

/* Contact details on the left, form on the right. The details column sticks
   as the (taller) form column scrolls past it, so the phone number stays on
   screen for the whole length of the form. */
.sr-contact-split {
	display: grid;
	gap: var(--sr-space-giant);
}

@media (min-width: 900px) {
	.sr-contact-split {
		grid-template-columns: 1fr 1fr;
		/* start, not stretch: a full-height grid item has nowhere to stick to. */
		align-items: start;
	}

	.sr-contact-details {
		position: sticky;
		top: 160px;
	}
}

/* Stacked, the details column keeps its source order so the page heading and
   lead come before the form rather than after it. */

.sr-contact-details {
	display: flex;
	flex-direction: column;
	gap: var(--sr-space-xl);
}

/* The page heading and lead live in this column too, so the pair reads as
   one block and the form is the only thing in the other column. */
.sr-contact-intro {
	margin-bottom: var(--sr-space-lg);
}

.sr-contact-intro .sr-hero__subheading {
	margin-bottom: 0;
}

.sr-contact-detail {
	display: flex;
	flex-direction: column;
	gap: var(--sr-space-xs);
}

/* ==========================================================================
   Gravity Forms (Orbital theme)

   The palette - label, input and button colours, sizes and radii - is set in
   PHP via the gform_default_styles filter (see sr_gravity_forms_styles), not
   here: Gravity Forms prints a per-form inline <style> whose selector carries
   an ID, so it outranks this stylesheet for those properties. What is left
   here is only what that filter's whitelist has no key for. Scoped to the
   two-class .gform_wrapper.gform-theme so it outranks GF's own single-class
   defaults, which load after this file.
   ========================================================================== */

.gform_wrapper.gform-theme {
	--gf-ctrl-font-family: var(--sr-font-body);
	--gf-ctrl-label-font-family-primary: var(--sr-font-body);
	--gf-ctrl-label-font-weight-primary: 600;
	--gf-ctrl-label-letter-spacing-primary: 0.08em;
	--gf-ctrl-label-color-req: var(--sr-brass);
	--gf-ctrl-label-font-size-req: 0.75rem;
	--gf-ctrl-border-color-hover: var(--sr-stone);
	--gf-ctrl-border-color-focus: var(--sr-ink);
	--gf-color-danger: #a8433a;

	/* Matches .sr-btn's resting shape. The circle-reveal hover can't be
	   reproduced on a bare submit control, so it settles straight to the
	   colour that reveal ends on. */
	--gf-ctrl-btn-font-family: var(--sr-font-body);
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-font-weight: 600;
	/* The inline block pins --gf-ctrl-btn-size to the "lg" token, so the size
	   is set by redefining that token rather than the property consuming it -
	   the token itself is only referenced inline, never redeclared there. */
	--gf-ctrl-btn-size-lg: 3.25em;
	--gf-ctrl-btn-radius: 1.625em;
	--gf-ctrl-btn-padding-x: var(--sr-space-xl);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-bg-color-hover-primary: var(--sr-green);
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-bg-color-focus-primary: var(--sr-green);
	--gf-ctrl-btn-color-focus-primary: #fff;
	--gf-ctrl-btn-border-color-focus-primary: transparent;
}

.gform_wrapper.gform-theme .gfield_label {
	text-transform: uppercase;
	line-height: 1.4;
}

.gform_wrapper.gform-theme .gform_fields {
	row-gap: var(--sr-space-xl);
}

.gform_wrapper.gform-theme textarea {
	min-height: 160px;
	resize: vertical;
}

.gform_wrapper.gform-theme .gform_footer {
	margin-top: var(--sr-space-xl);
}

/* Pinned so the em-based size token resolves against the same 16px .sr-btn
   uses, rather than GF's smaller button font size. */
.gform_wrapper.gform-theme .gform_footer .gform_button {
	font-size: 16px;
}

.gform_confirmation_message {
	padding: var(--sr-space-xl);
	background: var(--sr-paper);
	border: 1px solid var(--sr-pebble);
	border-radius: var(--sr-radius);
	color: var(--sr-ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.sr-footer {
	background: var(--sr-ink);
	color: var(--sr-pebble);
	padding-block: var(--sr-space-huge);
}

.sr-footer a {
	color: var(--sr-paper);
	text-decoration: none;
}

.sr-footer a:hover {
	color: var(--sr-green);
}

.sr-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sr-space-xxl);
	margin-bottom: var(--sr-space-xxl);
}

/* The supplied logo is a single sage tone on transparent, so it can be
   driven to solid paper with a filter rather than needing a second asset. */
.sr-footer__logo {
	display: block;
	max-width: 260px;
	margin-bottom: var(--sr-space-lg);
}

/* Stacked footer: the mark is narrower than the column it sits in, so left
   alignment leaves it looking stranded against the full-width rows below. */
@media (max-width: 899px) {
	.sr-footer__logo {
		margin-inline: auto;
	}
}

.sr-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.92;
	transition: opacity 0.4s ease;
}

.sr-footer__logo:hover img,
.sr-footer__logo:focus-visible img {
	opacity: 1;
}

@media (min-width: 900px) {
	.sr-footer__logo {
		max-width: 320px;
	}
}

.sr-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-space-xl);
}

.sr-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sr-space-lg);
	padding-top: var(--sr-space-xl);
	border-top: 1px solid #3a3a35;
	font-size: 13px;
	color: var(--sr-stone);
}

/* ==========================================================================
   Process steps
   ========================================================================== */

.sr-process {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sr-space-xxl);
	counter-reset: sr-step;
}

@media (min-width: 700px) {
	.sr-process {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sr-process__step {
	counter-increment: sr-step;
	border-top: 1px solid var(--sr-pebble);
	padding-top: var(--sr-space-lg);
}

.sr-process__step::before {
	content: counter(sr-step, decimal-leading-zero);
	display: block;
	font-family: var(--sr-font-heading);
	color: var(--sr-green);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: var(--sr-space-sm);
}

/* ==========================================================================
   Reviews row (global list, horizontal scroll-snap everywhere it appears)
   ========================================================================== */

.sr-reviews-row {
	display: flex;
	gap: var(--sr-space-lg);
	overflow-x: auto;
	/* Explicit, not inherited: leaving this out makes overflow-y compute to
	   auto alongside overflow-x, so the cards' reveal animation briefly
	   pops a vertical scrollbar on the row. */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sr-space-sm);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.sr-review-card {
	flex: 0 0 82%;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--sr-pebble);
	border-radius: var(--sr-radius);
	padding: var(--sr-space-xl);
}

@media (min-width: 600px) {
	.sr-review-card {
		flex-basis: 45%;
	}
}

@media (min-width: 1000px) {
	.sr-review-card {
		flex-basis: 30%;
	}
}

/* ==========================================================================
   Product cards
   ========================================================================== */

/* Mobile: horizontal snap-scroll row (no awkward vertical stack, and it
   reads as a "browse the range" gesture). Desktop: a real grid. */
.sr-products {
	display: flex;
	gap: var(--sr-space-lg);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sr-space-sm);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.sr-products .sr-product-card {
	flex: 0 0 78%;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.sr-products .sr-product-card {
		flex-basis: 46%;
	}
}

@media (min-width: 1000px) {
	.sr-products {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow-x: visible;
	}

	.sr-products .sr-product-card {
		flex: none;
	}
}

.sr-product-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--sr-radius);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--sr-pebble);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sr-product-card:hover,
.sr-product-card:focus-visible {
	box-shadow: 0 12px 24px rgba(26, 26, 24, 0.08);
	transform: translateY(-2px);
}

.sr-product-card:hover .sr-product-card__image img,
.sr-product-card:focus-visible .sr-product-card__image img {
	transform: scale(1.04);
}

.sr-product-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sr-pebble);
}

.sr-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sr-product-card__body {
	padding: var(--sr-space-lg);
}

.sr-product-card__title {
	font-family: var(--sr-font-heading);
	font-weight: 500;
	font-size: 18px;
	color: var(--sr-ink);
}

/* ==========================================================================
   Section heading row (heading + optional "view all" link)
   ========================================================================== */

.sr-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sr-space-lg);
	flex-wrap: wrap;
	margin-bottom: var(--sr-space-xl);
}

/* ==========================================================================
   CTA banner
   ========================================================================== */

.sr-cta-banner {
	background: var(--sr-ink);
	color: var(--sr-paper);
	text-align: center;
	padding-block: var(--sr-space-section);
}

.sr-cta-banner h2 {
	color: var(--sr-paper);
}

.sr-cta-banner .sr-body-lg {
	color: var(--sr-pebble);
	margin-inline: auto;
	margin-top: var(--sr-space-lg);
	margin-bottom: var(--sr-space-xl);
}

/* ==========================================================================
   Brochure
   ========================================================================== */

.sr-brochure {
	display: block;
	width: 100%;
}

.sr-brochure__page {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Gallery lightbox (click any .sr-gallery image to open, prev/next/esc)
   ========================================================================== */

.sr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 26, 24, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	padding: var(--sr-space-xl);
}

.sr-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.sr-lightbox__img {
	max-width: 100%;
	max-height: 85vh;
	width: auto;
	height: auto;
	border-radius: var(--sr-radius);
	object-fit: contain;
}

.sr-lightbox__close,
.sr-lightbox__prev,
.sr-lightbox__next {
	position: absolute;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	color: var(--sr-paper);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sr-lightbox__close {
	top: var(--sr-space-xl);
	right: var(--sr-space-xl);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
}

.sr-lightbox__prev,
.sr-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 32px;
	line-height: 1;
}

.sr-lightbox__prev {
	left: var(--sr-space-xl);
}

.sr-lightbox__next {
	right: var(--sr-space-xl);
}

/* ==========================================================================
   Vimeo player - the theme's own controls over a chrome-less Vimeo embed.
   Playback state lives in data-vimeo-* attributes set by main.js, so every
   visible state below is driven by an attribute selector rather than a
   class the JS has to keep in sync.
   ========================================================================== */

.sr-vimeo {
	--sr-vimeo-accent: var(--sr-brass);
	--sr-vimeo-track: rgba(250, 248, 245, 0.24);
	--sr-vimeo-track-height: 3px;
	--sr-vimeo-thumb: 12px;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	isolation: isolate;
	overflow: hidden;
	background: var(--sr-ink);
	color: var(--sr-paper);
	border-radius: calc(var(--sr-radius) * 4);
}

.sr-vimeo--narrow {
	max-width: 420px;
	margin-inline: auto;
}

/* Fullscreen is a viewing surface, not a framed element in the layout. */
.sr-vimeo:fullscreen {
	border-radius: 0;
	background: #000;
}

/* Cover mode fills a parent that already has its own size (the hero frame),
   rather than deriving a height from the video's aspect ratio. */
.sr-vimeo[data-vimeo-update-size="cover"] {
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

/* The spacer is what gives the player its height in aspect-ratio mode: JS
   rewrites this padding to the video's real ratio once Vimeo reports it. */
.sr-vimeo__before {
	padding-top: 56.25%;
}

.sr-vimeo__iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
	pointer-events: none;
}

.sr-vimeo__poster {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s linear;
}

.sr-vimeo[data-vimeo-activated="true"][data-vimeo-loaded="true"] .sr-vimeo__poster {
	opacity: 0;
}

.sr-vimeo__dark {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--sr-ink);
	opacity: 0.33;
	pointer-events: none;
	transition: opacity 0.3s linear;
}

.sr-vimeo[data-vimeo-activated="false"][data-vimeo-playing="false"] .sr-vimeo__dark,
.sr-vimeo[data-vimeo-activated="true"][data-vimeo-loaded="true"] .sr-vimeo__dark {
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.sr-vimeo[data-vimeo-hover="true"]:hover .sr-vimeo__dark {
		opacity: 0.33;
	}
}

/* Play / pause ------------------------------------------------------------ */

.sr-vimeo__play,
.sr-vimeo__pause {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
}

.sr-vimeo__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: rgba(250, 248, 245, 0.16);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: opacity 0.3s linear, transform 0.3s ease;
}

.sr-vimeo__play:hover .sr-vimeo__btn,
.sr-vimeo__play:focus-visible .sr-vimeo__btn {
	transform: scale(1.06);
}

.sr-vimeo__btn-icon--play {
	width: 36%;
}

.sr-vimeo__btn-icon--pause {
	width: 44%;
}

.sr-vimeo[data-vimeo-playing="true"] .sr-vimeo__play {
	opacity: 0;
	pointer-events: none;
}

.sr-vimeo__pause {
	display: none;
}

.sr-vimeo[data-vimeo-playing="true"] .sr-vimeo__pause {
	display: flex;
}

/* The pause target stays clickable across the whole frame, but its circle
   only appears once the film is paused or the pointer is moving. */
.sr-vimeo__pause .sr-vimeo__btn {
	opacity: 0;
}

.sr-vimeo[data-vimeo-activated="true"][data-vimeo-playing="false"] .sr-vimeo__pause .sr-vimeo__btn,
.sr-vimeo[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover .sr-vimeo__pause .sr-vimeo__btn,
.sr-vimeo__pause:focus-visible .sr-vimeo__btn {
	opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
	.sr-vimeo[data-vimeo-activated="true"][data-vimeo-playing="true"] .sr-vimeo__pause .sr-vimeo__btn {
		opacity: 0;
	}
}

/* Loading ----------------------------------------------------------------- */

.sr-vimeo__loading {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--sr-vimeo-accent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s linear;
}

.sr-vimeo[data-vimeo-playing="true"] .sr-vimeo__loading {
	opacity: 1;
}

.sr-vimeo[data-vimeo-playing="true"][data-vimeo-loaded="true"] .sr-vimeo__loading {
	opacity: 0;
}

.sr-vimeo__loading-icon {
	width: 72px;
}

/* Interface --------------------------------------------------------------- */

.sr-vimeo__interface {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	padding: clamp(12px, 4%, 24px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s linear;
}

.sr-vimeo__interface * {
	pointer-events: auto;
}

.sr-vimeo[data-vimeo-activated="false"][data-vimeo-playing="false"] .sr-vimeo__interface,
.sr-vimeo[data-vimeo-activated="true"][data-vimeo-playing="false"] .sr-vimeo__interface,
.sr-vimeo[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover .sr-vimeo__interface,
.sr-vimeo:focus-within .sr-vimeo__interface {
	opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
	.sr-vimeo[data-vimeo-activated="true"][data-vimeo-playing="true"] .sr-vimeo__interface {
		opacity: 0;
	}
}

.sr-vimeo__controls {
	display: flex;
	align-items: center;
	gap: var(--sr-space-lg);
}

.sr-vimeo__duration {
	flex-shrink: 0;
	min-width: 40px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	user-select: none;
}

.sr-vimeo__control {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
}

.sr-vimeo__control-icon {
	position: absolute;
	width: 100%;
}

/* Each control holds both states of its icon; the data attribute picks one. */
.sr-vimeo__control .sr-vimeo__control-icon:nth-child(2),
.sr-vimeo[data-vimeo-muted="true"] [data-vimeo-control="mute"] .sr-vimeo__control-icon:nth-child(1),
.sr-vimeo[data-vimeo-fullscreen="true"] [data-vimeo-control="fullscreen"] .sr-vimeo__control-icon:nth-child(1) {
	display: none;
}

.sr-vimeo[data-vimeo-muted="true"] [data-vimeo-control="mute"] .sr-vimeo__control-icon:nth-child(2),
.sr-vimeo[data-vimeo-fullscreen="true"] [data-vimeo-control="fullscreen"] .sr-vimeo__control-icon:nth-child(2) {
	display: block;
}

/* Timeline ---------------------------------------------------------------- */

.sr-vimeo__timeline {
	position: relative;
	display: flex;
	align-items: center;
	flex-grow: 1;
	height: 22px;
}

.sr-vimeo__progress,
.sr-vimeo__scrubber {
	position: absolute;
	left: 0;
	width: 100%;
	margin: 0;
}

.sr-vimeo__progress {
	appearance: none;
	height: var(--sr-vimeo-track-height);
	border: none;
	border-radius: 999px;
	overflow: hidden;
	background: var(--sr-vimeo-track);
	color: var(--sr-vimeo-accent);
}

.sr-vimeo__progress::-webkit-progress-bar {
	background: var(--sr-vimeo-track);
}

.sr-vimeo__progress::-webkit-progress-value {
	background: var(--sr-vimeo-accent);
}

.sr-vimeo__progress::-moz-progress-bar {
	background: var(--sr-vimeo-accent);
}

/* The range sits on top of the progress bar with an invisible track, so the
   progress element draws the fill and the range only supplies the thumb and
   the pointer/keyboard interaction. */
.sr-vimeo__scrubber {
	appearance: none;
	height: 22px;
	background: transparent;
	cursor: pointer;
}

.sr-vimeo__scrubber::-webkit-slider-runnable-track {
	height: var(--sr-vimeo-track-height);
	background: transparent;
}

.sr-vimeo__scrubber::-webkit-slider-thumb {
	appearance: none;
	width: var(--sr-vimeo-thumb);
	height: var(--sr-vimeo-thumb);
	margin-top: calc((var(--sr-vimeo-track-height) - var(--sr-vimeo-thumb)) / 2);
	border-radius: 50%;
	background: var(--sr-vimeo-accent);
	cursor: pointer;
}

.sr-vimeo__scrubber::-moz-range-track {
	height: var(--sr-vimeo-track-height);
	background: transparent;
}

.sr-vimeo__scrubber::-moz-range-thumb {
	width: var(--sr-vimeo-thumb);
	height: var(--sr-vimeo-thumb);
	border: none;
	border-radius: 50%;
	background: var(--sr-vimeo-accent);
	cursor: pointer;
}

/* ==========================================================================
   Long-form prose (legal pages, body content)
   ========================================================================== */

.sr-prose {
	width: 100%;
}

.sr-prose h2 {
	margin-top: var(--sr-space-xxl);
	margin-bottom: var(--sr-space-md);
	font-size: 24px;
}

.sr-prose h2:first-child {
	margin-top: 0;
}

.sr-prose p {
	margin: 0 0 var(--sr-space-lg);
}

.sr-prose ul,
.sr-prose ol {
	margin: 0 0 var(--sr-space-lg);
	padding-left: 1.25em;
	list-style: disc;
}

.sr-prose ol {
	list-style: decimal;
}

.sr-prose li {
	margin-bottom: var(--sr-space-sm);
}

.sr-prose a {
	color: var(--sr-ink);
	text-decoration: underline;
	text-decoration-color: var(--sr-green);
}

.sr-prose strong {
	color: var(--sr-ink);
}

/* ==========================================================================
   Icons
   ========================================================================== */

.sr-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	flex-shrink: 0;
}

.sr-stars {
	display: flex;
	gap: 2px;
	color: var(--sr-green);
	font-size: 16px;
	margin-bottom: var(--sr-space-sm);
}

.sr-trust__label {
	display: flex;
	align-items: center;
	gap: var(--sr-space-sm);
}

.sr-trust__label .sr-icon {
	font-size: 14px;
	color: var(--sr-green);
	border: 1px solid var(--sr-green);
	border-radius: 50%;
	padding: 3px;
	box-sizing: content-box;
}

.sr-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #3a3a35;
	border-radius: 50%;
	font-size: 16px;
}

.sr-social:hover,
.sr-social:focus-visible {
	border-color: var(--sr-green);
}

.sr-social::before {
	display: none;
}

/* ==========================================================================
   Motion helper
   ========================================================================== */

.sr-has-gsap .sr-reveal {
	opacity: 0;
	transform: translateY(24px);
}