/**
 * Components — reusable interface elements.
 *
 * Every component consumes the semantic tokens (--fs-text, --fs-surface,
 * --fs-border …) rather than raw brand colours, so a component dropped inside
 * a .fs-invert section adapts without a dark-mode variant of its own.
 *
 * @package FlorenStyle
 */

/* -------------------------------------------------------------------------
 * 1. Buttons
 * ---------------------------------------------------------------------- */

.fs-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fs-space-2xs);
	padding: 1.05em 2.2em;
	font-family: var(--fs-font-body);
	font-size: var(--fs-step--1);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-button);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--fs-radius);
	cursor: pointer;
	overflow: hidden;
	transition:
		background-color var(--fs-duration) var(--fs-ease),
		border-color var(--fs-duration) var(--fs-ease),
		color var(--fs-duration) var(--fs-ease);
}

.fs-button__label {
	position: relative;
	z-index: 2;
}

/*
 * A red field wipes up from the base on hover. It is the one moment of brand
 * colour in the interface, so it is reserved for the primary action.
 */
.fs-button__line {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--fs-accent);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--fs-duration) var(--fs-ease-out-expo);
}

.fs-button:hover .fs-button__line,
.fs-button:focus-visible .fs-button__line {
	transform: scaleY(1);
}

/* Solid — the primary action. */
.fs-button--solid {
	background-color: var(--fs-black);
	border-color: var(--fs-black);
	color: var(--fs-white);
}

.fs-button--solid:hover,
.fs-button--solid:focus-visible {
	color: var(--fs-white);
	border-color: var(--fs-accent);
}

.fs-invert .fs-button--solid {
	background-color: var(--fs-white);
	border-color: var(--fs-white);
	color: var(--fs-black);
}

.fs-invert .fs-button--solid:hover,
.fs-invert .fs-button--solid:focus-visible {
	color: var(--fs-white);
	border-color: var(--fs-accent);
}

/* Outline — the secondary action. */
.fs-button--outline {
	background-color: transparent;
	border-color: currentColor;
	color: var(--fs-text);
}

.fs-button--outline:hover,
.fs-button--outline:focus-visible {
	color: var(--fs-white);
	border-color: var(--fs-accent);
}

/* Ghost — tertiary, for dense areas. */
.fs-button--ghost {
	background-color: transparent;
	border-color: var(--fs-border);
	color: var(--fs-text);
	padding-inline: 1.6em;
}

.fs-button--ghost:hover,
.fs-button--ghost:focus-visible {
	color: var(--fs-white);
	border-color: var(--fs-accent);
}

/*
 * Text — an underlined link that behaves like a button. The rule grows from
 * the left rather than simply appearing.
 */
.fs-button--text {
	padding: 0.35em 0;
	color: var(--fs-text);
	background: none;
	border: 0;
}

.fs-button--text .fs-button__line {
	inset: auto 0 0 0;
	block-size: 1px;
	background-color: var(--fs-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--fs-duration) var(--fs-ease-out-expo);
}

.fs-button--text::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	block-size: 1px;
	background-color: var(--fs-border);
}

.fs-button--text:hover .fs-button__line,
.fs-button--text:focus-visible .fs-button__line {
	transform: scaleX(1);
}

.fs-button--text:hover,
.fs-button--text:focus-visible {
	color: var(--fs-accent);
}

.fs-button--full {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 2. Header
 * ---------------------------------------------------------------------- */

.fs-header {
	position: sticky;
	top: 0;
	z-index: var(--fs-z-header);
	background-color: var(--fs-bone);
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--fs-duration) var(--fs-ease),
		box-shadow var(--fs-duration) var(--fs-ease);
}

/* The rule and lift appear only once the page has moved. */
.fs-header.is-scrolled {
	border-bottom-color: var(--fs-hairline);
	box-shadow: 0 1px 24px rgba(23, 21, 20, 0.05);
}

.fs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fs-space-l);
	min-height: var(--fs-header-height);
	transition: min-height var(--fs-duration) var(--fs-ease);
}

.fs-header.is-scrolled .fs-header__inner {
	min-height: var(--fs-header-height-scrolled);
}

.fs-branding {
	flex: none;
}

.fs-branding__link {
	display: block;
	text-decoration: none;
}

.fs-branding__logo {
	display: block;
	width: auto;
	height: clamp(2.1rem, 1.6rem + 1.4vw, 2.9rem);
	background: none;
	transition: height var(--fs-duration) var(--fs-ease);
}

.fs-header.is-scrolled .fs-branding__logo {
	height: clamp(1.9rem, 1.5rem + 1.1vw, 2.4rem);
}

/* -------------------------------------------------------------------------
 * 3. Primary navigation
 * ---------------------------------------------------------------------- */

.fs-nav {
	display: none;
}

.fs-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 0.4rem + 1.8vw, 2.75rem);
	list-style: none;
	margin: 0;
}

.fs-nav__list li {
	position: relative;
}

.fs-nav__list a {
	position: relative;
	display: block;
	padding-block: 0.5rem;
	font-size: var(--fs-step--1);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fs-text);
	white-space: nowrap;
}

/* An underline that draws in from the left. */
.fs-nav__label {
	position: relative;
	display: inline-block;
}

.fs-nav__label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.35em;
	inline-size: 100%;
	block-size: 1px;
	background-color: var(--fs-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--fs-duration) var(--fs-ease-out-expo);
}

.fs-nav__list a:hover .fs-nav__label::after,
.fs-nav__list a:focus-visible .fs-nav__label::after,
.fs-nav__list .current-menu-item > a .fs-nav__label::after,
.fs-nav__list .current_page_item > a .fs-nav__label::after,
.fs-nav__list .current-menu-ancestor > a .fs-nav__label::after {
	transform: scaleX(1);
}

.fs-nav__list .current-menu-item > a,
.fs-nav__list .current_page_item > a {
	color: var(--fs-text);
}

/* Second-level submenu. */
.fs-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 0.5rem);
	min-inline-size: 14rem;
	padding: var(--fs-space-s) 0;
	margin: 0;
	list-style: none;
	background-color: var(--fs-white);
	border: 1px solid var(--fs-hairline);
	box-shadow: var(--fs-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--fs-duration-fast) var(--fs-ease),
		transform var(--fs-duration-fast) var(--fs-ease),
		visibility var(--fs-duration-fast) var(--fs-ease);
}

.fs-nav__list li:hover > .sub-menu,
.fs-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.fs-nav__list .sub-menu a {
	padding: 0.6rem var(--fs-space-m);
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: var(--fs-weight-regular);
	font-size: var(--fs-step--1);
}

.fs-nav__list .sub-menu a:hover {
	color: var(--fs-accent);
}

/* -------------------------------------------------------------------------
 * 4. Header actions and menu toggle
 * ---------------------------------------------------------------------- */

.fs-header__actions {
	display: flex;
	align-items: center;
	gap: var(--fs-space-m);
	flex: none;
}

.fs-header__phone {
	display: none;
	font-size: var(--fs-step--1);
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--fs-text-muted);
}

.fs-header__phone:hover {
	color: var(--fs-accent);
}

.fs-header__cta {
	display: none;
}

.fs-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-2xs);
	padding: var(--fs-space-2xs);
	margin-right: calc(var(--fs-space-2xs) * -1);
	font-size: var(--fs-step--1);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-button);
	text-transform: uppercase;
	color: var(--fs-text);
}

.fs-nav-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	inline-size: 22px;
	block-size: 14px;
}

.fs-nav-toggle__bars span {
	display: block;
	block-size: 1.5px;
	inline-size: 100%;
	background-color: currentColor;
	transition: transform var(--fs-duration) var(--fs-ease), opacity var(--fs-duration) var(--fs-ease);
}

.fs-nav-toggle[aria-expanded="true"] .fs-nav-toggle__bars span:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.fs-nav-toggle[aria-expanded="true"] .fs-nav-toggle__bars span:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
 * 5. Mobile navigation panel
 * ---------------------------------------------------------------------- */

.fs-mobile-nav {
	position: fixed;
	inset: var(--fs-header-height) 0 0 0;
	z-index: var(--fs-z-overlay);
	background-color: var(--fs-bone);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(-0.75rem);
	transition:
		opacity var(--fs-duration) var(--fs-ease),
		transform var(--fs-duration) var(--fs-ease);
}

.fs-mobile-nav[hidden] {
	display: none;
}

.fs-mobile-nav.is-open {
	opacity: 1;
	transform: translateY(0);
}

.fs-mobile-nav__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
	padding: var(--fs-space-xl) var(--fs-gutter) var(--fs-space-2xl);
	gap: var(--fs-space-2xl);
}

.fs-mobile-nav__list {
	list-style: none;
	margin: 0;
}

.fs-mobile-nav__list > li {
	border-bottom: 1px solid var(--fs-hairline);
}

.fs-mobile-nav__list a {
	display: block;
	padding-block: var(--fs-space-m);
	font-family: var(--fs-font-display);
	font-size: var(--fs-step-3);
	font-weight: var(--fs-weight-light);
	letter-spacing: var(--fs-tracking-title);
	text-decoration: none;
}

.fs-mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0 0 var(--fs-space-m);
	padding-left: var(--fs-space-m);
}

.fs-mobile-nav__list .sub-menu a {
	font-family: var(--fs-font-body);
	font-size: var(--fs-step-0);
	letter-spacing: 0.02em;
	padding-block: var(--fs-space-2xs);
}

.fs-mobile-nav__footer {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-s);
}

.fs-mobile-nav__contact {
	font-size: var(--fs-step-0);
	text-decoration: none;
	color: var(--fs-text-muted);
}

/* -------------------------------------------------------------------------
 * 6. Media
 * ---------------------------------------------------------------------- */

.fs-media {
	position: relative;
	margin: 0;
}

/*
 * The frame clips; the image inside scales. That combination is what makes a
 * photograph feel like it arrives rather than simply appearing.
 */
.fs-media__frame {
	position: relative;
	overflow: hidden;
	background-color: var(--fs-stone);
}

.fs-media__frame img,
.fs-media__frame picture {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fs-media--cinematic .fs-media__frame {
	aspect-ratio: 16 / 9;
}

.fs-media--landscape .fs-media__frame {
	aspect-ratio: 3 / 2;
}

.fs-media--portrait .fs-media__frame {
	aspect-ratio: 4 / 5;
}

.fs-media--tall .fs-media__frame {
	aspect-ratio: 3 / 4;
}

.fs-media--square .fs-media__frame {
	aspect-ratio: 1 / 1;
}

.fs-media__caption {
	margin-top: var(--fs-space-s);
	font-size: var(--fs-step--1);
	color: var(--fs-text-muted);
	letter-spacing: 0.02em;
}

/* A slow zoom on hover, used where the media is itself a link. */
.fs-media--zoom .fs-media__frame img {
	transition: transform var(--fs-duration-slow) var(--fs-ease-out-expo);
}

a:hover .fs-media--zoom .fs-media__frame img,
.fs-media--zoom:hover .fs-media__frame img {
	transform: scale(1.04);
}

/* -------------------------------------------------------------------------
 * 7. Cards
 * ---------------------------------------------------------------------- */

.fs-card {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-m);
	block-size: 100%;
}

.fs-card__media {
	margin: 0;
}

.fs-card__body > * + * {
	margin-top: var(--fs-space-2xs);
}

.fs-card__title {
	font-size: var(--fs-step-2);
	font-weight: var(--fs-weight-regular);
}

.fs-card__meta {
	font-size: var(--fs-step--1);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fs-text-muted);
}

.fs-card__text {
	color: var(--fs-text-muted);
	font-size: var(--fs-step--1);
}

/* Numbered cards, used for the pillars and the process. */
.fs-numbered {
	position: relative;
	padding-top: var(--fs-space-m);
	border-top: 1px solid var(--fs-border);
}

.fs-numbered__number {
	display: block;
	font-family: var(--fs-font-display);
	font-size: var(--fs-step-1);
	font-weight: var(--fs-weight-regular);
	letter-spacing: var(--fs-tracking-title);
	color: var(--fs-accent);
	margin-bottom: var(--fs-space-s);
}

.fs-numbered__title {
	font-size: var(--fs-step-2);
	font-weight: var(--fs-weight-regular);
	margin-bottom: var(--fs-space-2xs);
}

.fs-numbered__text {
	color: var(--fs-text-muted);
	font-size: var(--fs-step--1);
	line-height: var(--fs-leading-body);
}

/* -------------------------------------------------------------------------
 * 8. Lists
 * ---------------------------------------------------------------------- */

.fs-tick-list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-s);
}

.fs-tick-list li {
	position: relative;
	padding-left: var(--fs-space-l);
	font-size: var(--fs-step--1);
	line-height: var(--fs-leading-snug);
	color: var(--fs-text-muted);
}

/* A short rule rather than a tick — quieter, and in keeping with the system. */
.fs-tick-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	inline-size: var(--fs-space-s);
	block-size: 1px;
	background-color: var(--fs-accent);
}

/* -------------------------------------------------------------------------
 * 9. Social icons
 * ---------------------------------------------------------------------- */

.fs-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-s);
	list-style: none;
	margin: 0;
}

.fs-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 1px solid var(--fs-border);
	color: currentColor;
	transition: border-color var(--fs-duration-fast) var(--fs-ease), color var(--fs-duration-fast) var(--fs-ease);
}

.fs-social a:hover,
.fs-social a:focus-visible {
	border-color: var(--fs-accent);
	color: var(--fs-accent);
}

.fs-social__icon {
	display: block;
}

/* -------------------------------------------------------------------------
 * 10. Footer
 * ---------------------------------------------------------------------- */

.fs-footer {
	position: relative;
	padding-block: var(--fs-section-y-tight) var(--fs-space-xl);
	margin-top: auto;
}

.fs-footer__top {
	display: grid;
	gap: var(--fs-space-2xl);
	padding-bottom: var(--fs-space-2xl);
}

.fs-footer__logo-link {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-s);
	text-decoration: none;
	margin-bottom: var(--fs-space-m);
}

.fs-footer__logo {
	inline-size: 3.25rem;
	block-size: auto;
	background: none;
}

.fs-footer__wordmark {
	font-family: var(--fs-font-display);
	font-size: var(--fs-step-2);
	font-weight: var(--fs-weight-light);
	letter-spacing: var(--fs-tracking-title);
	color: var(--fs-white);
}

.fs-footer__tagline {
	max-width: 34ch;
	color: var(--fs-text-muted);
	font-size: var(--fs-step--1);
	margin-bottom: var(--fs-space-l);
}

.fs-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: var(--fs-space-xl);
}

.fs-footer__heading {
	font-family: var(--fs-font-body);
	font-size: var(--fs-step--2);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fs-white);
	margin-bottom: var(--fs-space-m);
}

.fs-footer__subheading {
	font-family: var(--fs-font-body);
	font-size: var(--fs-step--2);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fs-text-muted);
	margin-bottom: var(--fs-space-2xs);
}

.fs-footer__list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-xs);
}

.fs-footer__list a,
.fs-footer__address a {
	font-size: var(--fs-step--1);
	text-decoration: none;
	color: var(--fs-text-muted);
}

.fs-footer__list a:hover,
.fs-footer__address a:hover {
	color: var(--fs-white);
}

.fs-footer__address {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-2xs);
	font-style: normal;
	font-size: var(--fs-step--1);
	color: var(--fs-text-muted);
}

.fs-footer__hours {
	margin-top: var(--fs-space-m);
	font-size: var(--fs-step--1);
	color: var(--fs-text-muted);
}

.fs-footer__hours p {
	margin: 0;
}

.fs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fs-space-m);
	padding-top: var(--fs-space-l);
	border-top: 1px solid var(--fs-border-invert);
	font-size: var(--fs-step--2);
	color: var(--fs-text-muted);
	letter-spacing: 0.04em;
}

.fs-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-m);
	list-style: none;
	margin: 0;
}

.fs-footer__legal-list a {
	text-decoration: none;
	color: var(--fs-text-muted);
}

.fs-footer__legal-list a:hover {
	color: var(--fs-white);
}

.fs-footer__origin {
	font-style: italic;
	font-family: var(--fs-font-display);
	letter-spacing: var(--fs-tracking-title);
}

/* -------------------------------------------------------------------------
 * 11. Back to top
 * ---------------------------------------------------------------------- */

.fs-back-to-top {
	position: fixed;
	right: var(--fs-gutter);
	bottom: var(--fs-space-l);
	z-index: var(--fs-z-sticky);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	background-color: var(--fs-black);
	border: 1px solid var(--fs-white);
	color: var(--fs-white);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--fs-duration) var(--fs-ease), transform var(--fs-duration) var(--fs-ease), background-color var(--fs-duration-fast) var(--fs-ease);
}

.fs-back-to-top[hidden] {
	display: none;
}

.fs-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.fs-back-to-top:hover {
	background-color: var(--fs-accent);
	border-color: var(--fs-accent);
}

/* -------------------------------------------------------------------------
 * 12. Forms
 * ---------------------------------------------------------------------- */

.fs-field {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-2xs);
}

.fs-field__label {
	font-size: var(--fs-step--2);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fs-text-muted);
}

.fs-field__required {
	color: var(--fs-accent);
}

.fs-field input,
.fs-field textarea,
.fs-field select,
.fs-search__input {
	inline-size: 100%;
	padding: 0.9rem 0;
	font-family: var(--fs-font-body);
	font-size: var(--fs-step-0);
	color: var(--fs-text);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--fs-border);
	border-radius: 0;
	transition: border-color var(--fs-duration-fast) var(--fs-ease);
	-webkit-appearance: none;
	appearance: none;
}

.fs-field select {
	padding-right: var(--fs-space-l);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 0.75rem center, right 0.42rem center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.fs-field textarea {
	min-block-size: 8rem;
	resize: vertical;
	line-height: var(--fs-leading-snug);
}

.fs-field input:focus,
.fs-field textarea:focus,
.fs-field select:focus {
	outline: none;
	border-bottom-color: var(--fs-accent);
}

.fs-field input:focus-visible,
.fs-field textarea:focus-visible,
.fs-field select:focus-visible {
	outline: 2px solid var(--fs-focus);
	outline-offset: 4px;
}

.fs-field input::placeholder,
.fs-field textarea::placeholder {
	color: var(--fs-text-muted);
	opacity: 0.65;
}

.fs-field.has-error input,
.fs-field.has-error textarea,
.fs-field.has-error select {
	border-bottom-color: var(--fs-accent);
	border-bottom-width: 2px;
}

.fs-field__error {
	font-size: var(--fs-step--2);
	color: var(--fs-accent);
	letter-spacing: 0.02em;
}

.fs-field__error:empty {
	display: none;
}

/* The honeypot. Hidden from people, reachable by automated clients. */
.fs-field--honeypot {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fs-form__status {
	padding: var(--fs-space-m);
	border-left: 2px solid var(--fs-accent);
	background-color: var(--fs-surface-alt);
	font-size: var(--fs-step--1);
}

.fs-form__status:empty {
	display: none;
}

.fs-form__status.is-success {
	border-left-color: var(--fs-black);
}

.fs-form__note {
	font-size: var(--fs-step--2);
	color: var(--fs-text-muted);
}

/* -------------------------------------------------------------------------
 * 13. Search form
 * ---------------------------------------------------------------------- */

.fs-search {
	display: flex;
	align-items: flex-end;
	gap: var(--fs-space-s);
}

.fs-search__field {
	flex: 1;
}

/* -------------------------------------------------------------------------
 * 14. Pagination
 * ---------------------------------------------------------------------- */

.fs-pagination {
	margin-top: var(--fs-section-y-tight);
	padding-top: var(--fs-space-l);
	border-top: 1px solid var(--fs-border);
}

.fs-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fs-space-s);
}

.fs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	block-size: 2.5rem;
	padding-inline: var(--fs-space-2xs);
	font-size: var(--fs-step--1);
	letter-spacing: 0.06em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: border-color var(--fs-duration-fast) var(--fs-ease), color var(--fs-duration-fast) var(--fs-ease);
}

.fs-pagination .page-numbers:hover {
	border-color: var(--fs-border);
	color: var(--fs-accent);
}

.fs-pagination .page-numbers.current {
	border-color: var(--fs-black);
	font-weight: var(--fs-weight-bold);
}

/* -------------------------------------------------------------------------
 * 15. Widgets
 * ---------------------------------------------------------------------- */

.fs-widget + .fs-widget {
	margin-top: var(--fs-space-xl);
}

.fs-widget__title {
	font-family: var(--fs-font-body);
	font-size: var(--fs-step--2);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--fs-text-muted);
	margin-bottom: var(--fs-space-m);
}

.fs-widget ul {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-2xs);
}

.fs-widget a {
	text-decoration: none;
	font-size: var(--fs-step--1);
}

/* -------------------------------------------------------------------------
 * 16. Reveal animations
 * ---------------------------------------------------------------------- */

/*
 * Elements start hidden only when JavaScript is confirmed present, so a
 * no-JS visitor sees fully rendered content rather than a blank page.
 */
.fs-js [data-fs-reveal] {
	opacity: 0;
	transform: translateY(1.75rem);
	transition:
		opacity var(--fs-duration-reveal) var(--fs-ease-out-expo),
		transform var(--fs-duration-reveal) var(--fs-ease-out-expo);
	will-change: opacity, transform;
}

.fs-js [data-fs-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Children arrive in sequence rather than all at once. */
.fs-js [data-fs-reveal="stagger"] > * {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity var(--fs-duration-slow) var(--fs-ease-out-expo),
		transform var(--fs-duration-slow) var(--fs-ease-out-expo);
}

.fs-js [data-fs-reveal="stagger"].is-revealed > * {
	opacity: 1;
	transform: none;
}

.fs-js [data-fs-reveal="stagger"].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.fs-js [data-fs-reveal="stagger"].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
.fs-js [data-fs-reveal="stagger"].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
.fs-js [data-fs-reveal="stagger"].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
.fs-js [data-fs-reveal="stagger"].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
.fs-js [data-fs-reveal="stagger"].is-revealed > *:nth-child(6) { transition-delay: 450ms; }

/* The image reveal: the frame clips while the picture scales back to rest. */
.fs-js [data-fs-reveal="media"] {
	opacity: 1;
	transform: none;
}

.fs-js [data-fs-reveal="media"] .fs-media__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--fs-bone);
	transform-origin: top;
	transition: transform var(--fs-duration-reveal) var(--fs-ease-out-expo);
}

.fs-js [data-fs-reveal="media"].is-revealed .fs-media__frame::after {
	transform: scaleY(0);
}

.fs-js [data-fs-reveal="media"] .fs-media__frame img {
	transform: scale(1.08);
	transition: transform 1600ms var(--fs-ease-out-expo);
}

.fs-js [data-fs-reveal="media"].is-revealed .fs-media__frame img {
	transform: scale(1);
}

/*
 * Reduced motion: everything is visible immediately, with no transform or
 * transition of any kind.
 */
@media (prefers-reduced-motion: reduce) {
	.fs-js [data-fs-reveal],
	.fs-js [data-fs-reveal] > *,
	.fs-js [data-fs-reveal="stagger"] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.fs-js [data-fs-reveal="media"] .fs-media__frame::after {
		display: none;
	}

	.fs-js [data-fs-reveal="media"] .fs-media__frame img {
		transform: none !important;
	}
}