/**
 * Base reset, typography, layout primitives, and reusable controls.
 */

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	overflow-x: clip;
	background-color: var(--color-surface);
	color: var(--color-text-body);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

iframe {
	max-width: 100%;
	border: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	margin: 0 0 var(--space-2);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--duration-fast) var(--easing);
}

a:hover {
	color: var(--color-accent);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-2);
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-display);
}

h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
	letter-spacing: -0.01em;
}

h4 {
	font-size: var(--fs-h4);
	letter-spacing: -0.01em;
}

.tagline {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: var(--fw-medium);
}

.lede {
	color: var(--color-text-muted);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	font-weight: var(--fw-light);
	line-height: 1.65;
}

.text-muted {
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.section {
	padding-block: clamp(var(--space-7), 9vw, 120px);
}

/* Light sage tint — the only alternate surface on light pages. */
.section--soft {
	background-color: var(--color-surface-soft);
}

/* One dark block per page, kept deliberate (offer highlight, footer). */
.section--dark {
	background-color: var(--color-surface-dark);
	color: var(--color-text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: var(--color-white);
}

/* -------------------------------------------------------------------------
   Section headers
   ------------------------------------------------------------------------- */

.eyebrow {
	display: block;
	margin: 0 0 var(--space-2);
	color: var(--color-accent);
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
}

.eyebrow--on-dark {
	color: var(--color-accent-bright);
}

.section-head {
	max-width: 46rem;
	margin-bottom: clamp(var(--space-5), 5vw, var(--space-8));
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head__title {
	margin: 0;
	font-size: var(--fs-h2);
}

.section-head__lede {
	margin: var(--space-2) 0 0;
	max-width: 40rem;
	color: var(--color-text-muted);
	font-weight: var(--fw-light);
}

.section-head--center .section-head__lede {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 1.75em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--easing),
		color var(--duration-fast) var(--easing),
		border-color var(--duration-fast) var(--easing),
		box-shadow var(--duration-fast) var(--easing),
		transform var(--duration-fast) var(--easing);
}

.btn i {
	font-size: 1.1em;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background-color: var(--color-heading);
	color: var(--color-white);
}

.btn--primary:hover {
	background-color: var(--color-surface-dark);
	color: var(--color-white);
	box-shadow: var(--shadow-soft);
}

.btn--accent {
	background-color: var(--color-accent);
	color: var(--color-white);
}

.btn--accent:hover {
	background-color: var(--color-accent-hover);
	color: var(--color-white);
	box-shadow: var(--shadow-soft);
}

.btn--outline,
.btn--ghost {
	background-color: var(--color-surface);
	border-color: var(--color-border-strong);
	color: var(--color-heading);
}

.btn--outline:hover,
.btn--ghost:hover {
	background-color: var(--color-surface);
	border-color: var(--color-heading);
	color: var(--color-heading);
	box-shadow: var(--shadow-card);
}

.btn--ghost {
	background-color: transparent;
	border-color: transparent;
}

.btn--ghost:hover {
	background-color: var(--color-surface-tint);
	border-color: transparent;
	box-shadow: none;
}

.btn--light {
	background-color: var(--color-white);
	color: var(--color-heading);
}

.btn--light:hover {
	background-color: var(--color-surface-soft);
	color: var(--color-heading);
}

.section--dark .btn--outline {
	background-color: transparent;
	border-color: var(--color-border-on-dark);
	color: var(--color-text-on-dark);
}

.section--dark .btn--outline:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--color-text-on-dark);
	color: var(--color-white);
}

.btn--sm {
	padding: 0.7em 1.25em;
}

.btn--wide {
	width: 100%;
}

/*
 * Pill CTA with a circular arrow badge, per the reference layouts. The badge
 * nudges right on hover to hint at forward motion.
 */
.btn--arrow {
	padding-right: 0.45em;
}

.btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.16);
	font-size: 0.9em;
	transition: transform var(--duration-fast) var(--easing);
}

.btn--arrow:hover .btn__arrow {
	transform: translateX(3px);
}

.btn--light .btn__arrow,
.btn--outline .btn__arrow {
	background-color: var(--color-surface-tint);
}

/* -------------------------------------------------------------------------
   Text link with trailing arrow (card footers)
   ------------------------------------------------------------------------- */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--color-accent);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.link-arrow i {
	font-size: 1em;
	transition: transform var(--duration-fast) var(--easing);
}

.link-arrow:hover {
	color: var(--color-accent-hover);
}

.link-arrow:hover i {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-hairline);
	transition:
		border-color var(--duration-fast) var(--easing),
		box-shadow var(--duration-fast) var(--easing),
		transform var(--duration-fast) var(--easing);
}

.card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-soft);
	transform: translateY(-2px);
}

/* Square tinted icon chip used on every card and list item. */
.icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background-color: var(--color-surface-tint);
	color: var(--color-heading);
	font-size: 1.375rem;
}

.icon-chip--accent {
	background-color: var(--color-accent-soft);
	color: var(--color-accent);
}

.icon-chip--sm {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: 1.0625rem;
}

/* -------------------------------------------------------------------------
   Tags / badges (pill)
   ------------------------------------------------------------------------- */

.tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	line-height: 1.3;
	white-space: nowrap;
}

.tag--accent {
	padding: 0.35em 0.8em;
	background-color: var(--color-accent);
	border-color: transparent;
	color: var(--color-white);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tag--on-dark {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--color-border-on-dark);
	color: var(--color-text-on-dark);
}

/* -------------------------------------------------------------------------
   Skip link / utilities
   ------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-2);
	z-index: 1000;
	padding: var(--space-1) var(--space-2);
	background: var(--color-heading);
	color: var(--color-white);
	border-radius: var(--radius-sm);
}

.skip-link:focus {
	top: var(--space-2);
}

.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;
}

/* -------------------------------------------------------------------------
   Swiper — quiet pagination that matches the palette
   ------------------------------------------------------------------------- */

.swiper {
	overflow: visible;
}

.swiper-pagination {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: var(--space-3);
}

.swiper-pagination-bullet {
	width: 7px;
	height: 7px;
	margin: 0 !important;
	background-color: var(--color-heading);
	opacity: 0.2;
	transition:
		width var(--duration-fast) var(--easing),
		opacity var(--duration-fast) var(--easing);
}

.swiper-pagination-bullet-active {
	width: 22px;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

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

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

	/* Keep AOS elements visible if the library still injected opacity: 0 */
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
	}
}