/* Mobile-first system tokens; brand values are injected by inc/assets.php. */
:root {
	/* Ascend-blue flame ramp: one hue, three stops (docs/art-direction.md
	   section 6). Deep is the contrast-safe end used on light surfaces, accent
	   is the identity core, hot is the flame tip reserved for dark surfaces. */
	--brand-accent: #4c8dff;
	--brand-accent-deep: #0a5be0;
	--brand-accent-hot: #a8d4ff;
	--brand-accent-dark: #173f73;
	--brand-ink-on-accent: #08111f;
	--brand-dark-bg: #0b0d0e;
	--brand-dark-surface: #15181b;
	--brand-dark-text: #f3f3f0;
	--brand-dark-muted: #9aa0a6;
	--ui-bg: #f3f0e8;
	--ui-surface: #ffffff;
	--ui-text: #111418;
	--ui-muted: #52606d;
	--ui-border: #d7dde4;
	/* Components consume these, never a --brand-* token directly, so light and
	   dark each pick the ramp stop that clears contrast on its own canvas:
	   #0A5BE0 is 5.14:1 on paper, #4C8DFF is 6.09:1 on the dark background.
	   -text carries the 4.5:1 cases, -graphic the 3:1 non-text marks. */
	--ui-accent-text: var(--brand-accent-deep);
	--ui-accent-graphic: var(--brand-accent-deep);
	--ui-link: var(--ui-accent-text);
	--content-width: 80rem;
	--reading-width: 45rem;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--radius-sm: 0.5rem;
	--radius-md: 0.875rem;
	--section-space: clamp(3.5rem, 9vw, 7rem);
	--section-gap: clamp(3rem, 6vw, 5rem);
	--overlay-strong: rgba(0, 0, 0, 0.85);
	--overlay-soft: rgba(0, 0, 0, 0.35);

	/* Editorial storyboard primitives — docs/art-direction.md sections 5-6 */
	--ui-paper: #f3f0e8;
	--ui-paper-text: #111418;
	--ui-ink: #111418;
	--graphic-border-width: 2px;
	--graphic-border-color: var(--ui-ink);
	--graphic-shadow-x: 6px;
	--graphic-shadow-y: 6px;
	--graphic-shadow-small-x: 3px;
	--graphic-shadow-small-y: 3px;
	--graphic-shadow-color: var(--ui-ink);
	--motion-fast: 160ms;
	--motion-medium: 280ms;
	--motion-slow: 400ms;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ui-bg: var(--brand-dark-bg);
		--ui-surface: var(--brand-dark-surface);
		--ui-text: var(--brand-dark-text);
		--ui-muted: var(--brand-dark-muted);
		--ui-border: #30363d;
		--ui-accent-text: var(--brand-accent);
		--ui-accent-graphic: var(--brand-accent);
		--ui-paper: #1a1d21;
		--ui-paper-text: var(--brand-dark-text);
		--ui-ink: #f3f3f0;
		--graphic-border-color: var(--ui-ink);
		--graphic-shadow-color: #000000;
	}
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	scroll-snap-type: y proximity;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* One section, one screen: anchoring to Hero, Služby, FAQ, or Kontakt always
   lands on a section that fills the viewport, rather than an arbitrary
   scroll position. `proximity`, not `mandatory`, so short scroll gestures
   still feel natural. Each section after the first carries its own
   --section-gap as margin-top (see .site-main > * + * below), so its own
   min-height is 100svh minus that gap — gap + section together still add up
   to exactly one viewport, so sections tile precisely instead of drifting
   taller than the screen. */
.work-hero,
.service-rail,
.faq-list,
.urgent-contact {
	scroll-snap-align: start;
}

.work-hero {
	min-height: 100svh;
}

.service-rail,
.faq-list,
.urgent-contact {
	min-height: calc(100svh - var(--section-gap));
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	background: var(--ui-bg);
	color: var(--ui-text);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	overflow-wrap: anywhere;
}

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

a {
	color: var(--ui-link);
	text-underline-offset: 0.18em;
}

h1,
h2,
h3 {
	font-family: var(--font-sans);
	line-height: 1.08;
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.5rem, 10vw, 4.75rem);
	font-weight: 700;
}

h2 {
	font-size: clamp(2rem, 7vw, 3.25rem);
	font-weight: 700;
}

h3 {
	font-size: clamp(1.25rem, 4vw, 1.625rem);
	font-weight: 600;
}

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

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--ui-surface);
	color: var(--ui-text);
	border-radius: var(--radius-sm);
}

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--brand-accent);
	outline-offset: 3px;
}

/* Buttons — 44x44 minimum tap target */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	touch-action: manipulation;
}

.button--primary {
	background: var(--brand-accent);
	color: var(--brand-ink-on-accent);
}

.button--secondary {
	background: transparent;
	color: var(--ui-text);
	border-color: var(--ui-border);
}

.button:hover {
	filter: brightness(1.06);
}

.button:active {
	transform: translateY(1px);
}

/* Shared editorial primitives — used across hero, services, process, about,
   trust. Keep one-off graphic values out of individual components. */

.editorial-frame {
	border: var(--graphic-border-width) solid var(--graphic-border-color);
}

.hard-shadow {
	box-shadow: var(--graphic-shadow-x) var(--graphic-shadow-y) 0 0 var(--graphic-shadow-color);
}

.hard-shadow--sm {
	box-shadow: var(--graphic-shadow-small-x) var(--graphic-shadow-small-y) 0 0 var(--graphic-shadow-color);
}

.technical-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.55em;
	border: 1px solid currentColor;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.index-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 0.15em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--ui-accent-graphic);
	line-height: 1;
}

.index-badge__num {
	font-size: clamp(2rem, 6vw, 3rem);
}

.diagnostic-line {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ui-accent-graphic);
	transform-origin: left center;
}

/* Short accent rule under the hero eyebrow. It draws itself once the hero
   panel reveals — "line drawing for a short diagnostic path" in
   docs/art-direction.md section 5.4. Full width with no JS, so the rule is
   never missing; the draw is the enhancement, not the content. */
.work-hero__rule {
	width: 3.5rem;
	margin-bottom: 1rem;
}

body.js .reveal .work-hero__rule {
	transform: scaleX(0);
	transition: transform var(--motion-slow) ease-out var(--motion-fast);
}

body.js .reveal.is-visible .work-hero__rule {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	body.js .reveal .work-hero__rule {
		transform: none;
		transition: none;
	}
}

/* Restrained cut-paper fragment: a flat panel behind copy or a photo crop,
   per docs/art-direction.md section 5.2. */
.cut-paper {
	background: var(--ui-paper);
	color: var(--ui-paper-text);
}

/* Reveal is opt-in progressive enhancement. Content is fully visible with no
   JS; body.js primes elements to fade/slide in once they enter the viewport
   (see assets/js/motion.js). Always inert under reduced motion. */
.reveal {
	opacity: 1;
	transform: none;
}

body.js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--motion-medium) ease-out, transform var(--motion-medium) ease-out;
}

body.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	body.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Stagger related panels slightly so a row reveals left-to-right rather than
   all at once. */
body.js .service-rail__item:nth-child(2) {
	transition-delay: var(--motion-fast);
}

body.js .service-rail__item:nth-child(3) {
	transition-delay: calc(var(--motion-fast) * 2);
}

body.js .service-rail__item:nth-child(4) {
	transition-delay: calc(var(--motion-fast) * 3);
}

body.js .service-rail__item:nth-child(5),
body.js .service-rail__item:nth-child(6) {
	transition-delay: calc(var(--motion-fast) * 3);
}

/* Layout containers */
.site-header,
.site-footer,
.site-main,
.urgent-contact {
	width: min(var(--content-width), 100%);
	margin-inline: auto;
	padding-left: max(1rem, env(safe-area-inset-left));
	padding-right: max(1rem, env(safe-area-inset-right));
}

/* Nice, consistent spacer between top-level sections regardless of each
   section's own internal padding, with a rule at the top of each section so
   the break reads as a deliberate line, not just whitespace. Services/FAQ
   already carry their own full ink border via .editorial-frame, so this is
   only visibly new on Hero and Kontakt, which had no border of their own. */
.site-main {
	counter-reset: section;
}

.site-main > *:not(.quick-nav) {
	counter-increment: section;
}

.site-main > * + *:not(.quick-nav) {
	position: relative;
	border-top: var(--graphic-border-width) solid var(--graphic-border-color);
	margin-top: var(--section-gap);
}

/* The spacer is a technical drawing detail, not just a gap: the section index
   sits astride the rule and cuts it, with a short accent tick closing the run
   at the other end. Numbered tags are the approved overlay vocabulary in
   docs/art-direction.md section 5.2 — the brand flame stays out of page
   decoration and is reserved for the mark. Pure CSS counters, so the sections
   themselves need no extra markup. */
.site-main > * + *:not(.quick-nav)::before {
	content: counter(section, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: max(1rem, env(safe-area-inset-left));
	transform: translateY(-50%);
	padding-inline: 0.5rem;
	background: var(--ui-bg);
	color: var(--ui-muted);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.16em;
	line-height: 1.4;
}

.site-main > * + *:not(.quick-nav)::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--graphic-border-width));
	right: max(1rem, env(safe-area-inset-right));
	width: 2.5rem;
	height: var(--graphic-border-width);
	background: var(--ui-accent-graphic);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.75rem 1rem;
	padding-block: 0.75rem;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--ui-bg) 70%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent);
	backdrop-filter: blur(1rem);
	-webkit-backdrop-filter: blur(1rem);
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	font-weight: 700;
	text-decoration: none;
	color: var(--ui-text);
	margin-right: auto;
}

/* The mark ships as light/dark PNG pairs (make art-logo) and the <picture>
   element swaps them on prefers-color-scheme, so neither a CSS filter nor
   duplicate markup is involved. --brand-mark-size lets each context set its
   own height while the intrinsic width/height attributes keep the box
   reserved. */
.brand-mark {
	display: block;
	flex-shrink: 0;
}

.brand-mark img {
	display: block;
	height: var(--brand-mark-size, 2rem);
	width: auto;
	transition: transform var(--motion-fast) ease-out;
}

.site-header__logo {
	--brand-mark-size: clamp(1.5rem, 4vw, 2rem);
}

/* The flame lifts a hair on hover and focus — a single state change, not a
   loop; docs/art-direction.md section 5.4 rules out anything that bobs. */
.site-header__logo:hover .brand-mark img,
.site-header__logo:focus-visible .brand-mark img {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.brand-mark img {
		transition: none;
	}

	.site-header__logo:hover .brand-mark img,
	.site-header__logo:focus-visible .brand-mark img {
		transform: none;
	}
}

.site-header__wordmark {
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
}

.language-switcher ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.language-switcher a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--ui-text);
	text-decoration: none;
}

.language-switcher a[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--ui-accent-graphic);
	text-decoration-thickness: 0.16rem;
}

.site-header__phone {
	padding-inline: 1rem;
}

/* Quick-nav: anchors straight to Služby and Kontakt. Sticky, not fixed, so it
   stays inside the same content column as everything else — bottom-right of
   the content area, not a viewport-wide overlay floating beside it — and it
   scrolls away naturally once .site-main ends instead of sitting on top of
   the footer. Offset by --section-gap, the same spacer used between
   sections, so it sits right above that gap instead of hard against the
   viewport edge. */
.quick-nav {
	position: sticky;
	bottom: calc(var(--section-gap) + env(safe-area-inset-bottom));
	z-index: 45;
	margin-left: auto;
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
}

.quick-nav__link[hidden] {
	display: none;
}

/* Neutral, page-toned styling regardless of .button--primary/--secondary —
   only one quick-nav link is ever visible at a time (see motion.js), so
   there's no hierarchy left to signal with colour; a blue accent button here
   just looked like an unrelated CTA floating over the page rather than a
   piece of it. */
.quick-nav__link,
.quick-nav__link.button--primary,
.quick-nav__link.button--secondary {
	background: var(--ui-surface);
	border-color: var(--graphic-border-color);
	color: var(--ui-text);
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.urgent-contact > * {
	min-width: 0;
}

.work-hero {
	display: flex;
	flex-direction: column;
	background: var(--ui-bg);
}

.work-hero__copy {
	order: 1;
	padding: clamp(1.75rem, 6vw, 3rem) max(1.25rem, env(safe-area-inset-right)) clamp(1.75rem, 6vw, 2.5rem)
		max(1.25rem, env(safe-area-inset-left));
	border: 0;
	border-bottom: var(--graphic-border-width) solid var(--graphic-border-color);
}

/* Two compact "notes" stacked below each other, not one panel-filling card —
   each sized to its content, wider than tall rather than square. */
.work-hero__about-group {
	order: 2;
	align-self: start;
	width: min(30rem, calc(100% - 2.5rem));
	margin: 1.5rem max(1.25rem, env(safe-area-inset-right)) 1.5rem max(1.25rem, env(safe-area-inset-left));
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.work-hero__about {
	padding: 1.5rem 1.75rem;
	background: var(--ui-paper);
	color: var(--ui-paper-text);
}

.work-hero__about .index-badge {
	margin-bottom: 0.75rem;
}

.work-hero__about .index-badge__num {
	font-size: 1.125rem;
}

.work-hero__about h2 {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	margin: 0 0 0.5rem;
}

.work-hero__about p {
	font-size: 0.875rem;
	margin: 0;
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ui-accent-text);
	margin: 0 0 0.5rem;
}

.work-hero__summary {
	font-size: 1.125rem;
	max-width: 48ch;
}

.work-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.work-hero__meta {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 1.5rem 0 0;
}

/* Section 02 — service rail. The section itself is a plain paper card
   (.cut-paper .editorial-frame .hard-shadow, applied in the template).
   One shared "covered" photo pans differently per card via --bg-pos, so the
   grid reads as one photo rather than six unrelated crops. The photo lives
   on ::before, oversized by inset:-15% with background-size:cover, instead
   of a plain background-size percentage pair on the item itself — cover
   always preserves the source's aspect ratio (cropping instead of
   stretching), where independent width/height percentages distorted the
   photo whenever a card's own aspect ratio didn't match the source's. The
   oversize is what reads as ~30% zoomed in. Hovering/focusing a card swaps
   that same pan position to "uncovered". */
.service-rail {
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-rail__inner {
	width: 100%;
	padding: 2rem 1.5rem;
}

.service-rail__heading {
	font-size: clamp(1.5rem, 6vw, 2rem);
}

.service-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.service-rail__item {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	color: #f3f3f0;
	border: 2px solid rgba(243, 243, 240, 0.4);
	transition: transform var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out,
		border-color var(--motion-fast) ease-out;
}

.service-rail__item::before,
.service-rail__item::after {
	content: "";
	position: absolute;
}

.service-rail__item::before {
	inset: -10% -40%;
	z-index: 0;
	background-image: var(--photo-services-covered-url);
	background-repeat: no-repeat;
	background-position: var(--bg-pos, 50% 50%);
	background-size: cover;
}

.service-rail__item::after {
	inset: 0;
	z-index: 1;
	background: rgba(11, 13, 14, 0.55);
}

.service-rail__item > * {
	position: relative;
	z-index: 2;
}

/* Each item pans to a different part of the shared photo, so the grid reads
   as one photo rather than six unrelated crops. 2 cols x 3 rows below
   36rem, 3 cols x 2 rows from 36rem — see the override further down. */
.service-rail__item:nth-child(1) {
	--bg-pos: 0% 0%;
}

.service-rail__item:nth-child(2) {
	--bg-pos: 100% 0%;
}

.service-rail__item:nth-child(3) {
	--bg-pos: 0% 50%;
}

.service-rail__item:nth-child(4) {
	--bg-pos: 100% 50%;
}

.service-rail__item:nth-child(5) {
	--bg-pos: 0% 100%;
}

.service-rail__item:nth-child(6) {
	--bg-pos: 100% 100%;
}

.service-rail__item:hover,
.service-rail__item:focus-within {
	border-color: var(--brand-accent);
	transform: translate(calc(-1 * var(--graphic-shadow-small-x)), calc(-1 * var(--graphic-shadow-small-y)));
	box-shadow: var(--graphic-shadow-small-x) var(--graphic-shadow-small-y) 0 0 var(--brand-accent);
}

.service-rail__item:hover::before,
.service-rail__item:focus-within::before {
	background-image: var(--photo-services-uncovered-url);
}

.service-rail__index {
	align-self: flex-start;
	border-color: rgba(243, 243, 240, 0.4);
	color: rgba(243, 243, 240, 0.75);
}

.service-rail__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
}

.service-icon {
	width: 100%;
	height: 100%;
	color: var(--brand-accent);
}

.service-rail__label {
	font-weight: 700;
	font-size: 1.0625rem;
}

.service-rail__description {
	color: rgba(243, 243, 240, 0.8);
	font-size: 0.9375rem;
	margin: 0;
}

/* Section 04 — urgent contact */
.urgent-contact {
	padding-block: var(--section-space);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2rem;
}

.urgent-contact__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.urgent-contact__phone {
	font-size: 1.25rem;
}

.urgent-contact__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.form-field label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.form-field input,
.form-field textarea {
	font: inherit;
	color: var(--ui-text);
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--radius-sm);
	padding: 0.75rem 1rem;
	min-height: 44px;
}

.form-field textarea {
	resize: vertical;
	min-height: 8rem;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
	outline: 3px solid var(--brand-accent);
	outline-offset: 1px;
}

.urgent-contact__form .button {
	align-self: flex-start;
}

/* Section 03 — FAQ. The section itself just centres its content in the
   viewport; the paper card (.cut-paper .editorial-frame .hard-shadow) is the
   inner wrapper, sized to its own content. One shared "covered" photo pans
   to a different vertical position per question via --bg-pos (same idea as
   Services), so the list reads as one photo rather than five identical
   crops. Hovering/focusing a question swaps its own slice to "uncovered",
   exactly like Services — the answer stays a plain solid tint, no photo.
   background-size:cover always preserves the source's aspect ratio (no
   distortion risk here the way independent width/height percentages would
   be), so no oversized ::before trick is needed the way Services required —
   cover applied directly is enough. The photo sits on .faq-list__question
   specifically, not the whole <details>: the question's own box never
   changes size when a visitor opens it, so the crop stays put instead of
   stretching. */
.faq-list {
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq-list__inner {
	width: min(var(--content-width), 100%);
	margin-inline: auto;
	padding: var(--section-space) max(1rem, env(safe-area-inset-left));
}

.faq-list__items {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-list__item {
	border: 2px solid rgba(243, 243, 240, 0.4);
	color: #f3f3f0;
	background: var(--brand-dark-surface);
}

.faq-list__question {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: 1rem 1.25rem;
	background-image: linear-gradient(rgba(11, 13, 14, 0.55), rgba(11, 13, 14, 0.55)), var(--photo-faq-gloves-covered-url);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center var(--bg-pos, 50%);
	background-size: 100% 100%, cover;
}

/* Each question pans to a different part of the shared photo, so the list
   reads as one photo rather than five identical crops. */
.faq-list__item:nth-of-type(1) .faq-list__question {
	--bg-pos: 25%;
}

.faq-list__item:nth-of-type(2) .faq-list__question {
	--bg-pos: 40%;
}

.faq-list__item:nth-of-type(3) .faq-list__question {
	--bg-pos: 55%;
}

.faq-list__item:nth-of-type(4) .faq-list__question {
	--bg-pos: 70%;
}

.faq-list__item:nth-of-type(5) .faq-list__question {
	--bg-pos: 85%;
}

.faq-list__question:hover,
.faq-list__question:focus-visible {
	background-image: linear-gradient(rgba(11, 13, 14, 0.55), rgba(11, 13, 14, 0.55)), var(--photo-faq-gloves-uncovered-url);
}

.faq-list__question::-webkit-details-marker {
	display: none;
}

.faq-list__question::after {
	content: "+";
	flex-shrink: 0;
	font-weight: 700;
	color: var(--ui-accent-text);
}

.faq-list__item[open] .faq-list__question::after {
	content: "\2212";
}

.faq-list__answer {
	margin: 0;
	padding: 0.75rem 1.25rem 1rem;
	color: rgba(243, 243, 240, 0.85);
	max-width: 65ch;
}

/* Section 08 — footer */
.site-footer {
	padding-block: 2rem;
	padding-bottom: max(2rem, env(safe-area-inset-bottom));
	background: var(--ui-bg);
	border-top: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.site-footer__contact {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.site-footer__contact a {
	color: var(--ui-text);
}

.site-footer__nav ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.site-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ui-muted);
	text-decoration: none;
}

.site-footer__legal {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	color: var(--ui-muted);
	font-size: 0.875rem;
	margin: 0;
}

.site-footer__legal .brand-mark {
	--brand-mark-size: 1.25rem;
}

[id] {
	scroll-margin-top: 6rem;
}

@media (min-width: 36rem) {
	.service-rail__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Grid is 3 cols x 2 rows from here up, instead of 2 cols x 3 rows below —
	   the pan positions need re-mapping to match. */
	.service-rail__item:nth-child(1) {
		--bg-pos: 0% 0%;
	}

	.service-rail__item:nth-child(2) {
		--bg-pos: 50% 0%;
	}

	.service-rail__item:nth-child(3) {
		--bg-pos: 100% 0%;
	}

	.service-rail__item:nth-child(4) {
		--bg-pos: 0% 100%;
	}

	.service-rail__item:nth-child(5) {
		--bg-pos: 50% 100%;
	}

	.service-rail__item:nth-child(6) {
		--bg-pos: 100% 100%;
	}
}

@media (min-width: 80rem) {
	.service-rail__inner {
		padding: 2.5rem 2rem;
	}

	.work-hero {
		flex-direction: row;
		min-height: min(42rem, calc(100svh - 5rem));
	}

	.work-hero__copy {
		order: 1;
		flex: 0 0 44%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 3rem;
		border-bottom: 0;
		border-right: var(--graphic-border-width) solid var(--graphic-border-color);
	}

	.work-hero__about-group {
		order: 2;
		align-self: center;
	}
}

@media (forced-colors: active) {
	.button {
		forced-color-adjust: auto;
	}
}

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

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}