/* =============================================================
   IDAHO STARTS HERE — MASTER STYLESHEET
   Mobile-first. Organized by section for easy maintenance.
============================================================= */


/* =============================================================
   1. RESET
============================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	min-height: 100vh;
	line-height: 1.5;
}

body.nav-open {
	overflow: hidden;
}

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

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

ul {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

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


/* =============================================================
   2. VARIABLES
============================================================= */
:root {
	/* Colors */
	--color-bg: #ffffff;
	--color-surface: #f7f5f1;
	--color-text: #1c1b19;
	--color-text-muted: #5c5a55;
	--color-white: #ffffff;
	--color-primary: #1f2f27;   /* deep evergreen */
	--color-accent: #a98b4f;    /* refined gold */
	--color-border: #e4e0d8;
	--color-overlay: rgba(28, 27, 25, 0.55);

	/* Typography */
	--font-heading: 'Cinzel', serif;
	--font-body: 'Inter', sans-serif;
	--fs-base: 1rem;
	--fs-sm: 0.875rem;
	--fs-lg: 1.25rem;
	--fs-xl: 1.75rem;
	--fs-2xl: 2.5rem;
	--fs-3xl: 3.25rem;
	--lh-heading: 1.2;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* Layout */
	--container-width: 1200px;
	--container-width-narrow: 640px;
	--container-padding: var(--space-sm);
	--header-height: 88px;

	/* Borders / Shadows */
	--radius-sm: 4px;
	--radius-md: 8px;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

	/* Motion */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
}


/* =============================================================
   3. TYPOGRAPHY
============================================================= */
body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 400;
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	font-weight: 600;
	color: var(--color-primary);
	letter-spacing: 0.02em;
}

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

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

h3 {
	font-size: var(--fs-lg);
}

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

.section-heading {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.section-eyebrow {
	font-size: var(--fs-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

.section-eyebrow--center {
	text-align: center;
}

.section-eyebrow--light {
	color: rgba(255, 255, 255, 0.85);
}

/* Focus visibility for keyboard navigation */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}


/* =============================================================
   4. LAYOUT
============================================================= */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

main {
	display: block;
}

/* Shared vertical rhythm for full-width homepage sections */
main > section,
.cta-section {
	padding-block: var(--space-2xl);
}


/* =============================================================
   5. NAVIGATION
============================================================= */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: transparent;
}

/* Reserved for a future scroll-triggered state (solid background, dark text). Not wired up yet. */
.site-header.is-solid {
	position: fixed;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-md) var(--container-padding);
}

.nav__logo {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--color-white);
	white-space: nowrap;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.site-header.is-solid .nav__logo {
	color: var(--color-primary);
	text-shadow: none;
}

/* Mobile toggle button */
.nav__toggle {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: var(--space-xs);
	z-index: 110;
}

.nav__toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-white);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header.is-solid .nav__toggle-bar {
	background-color: var(--color-primary);
}

/* Mobile nav backdrop overlay */
.nav__backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(28, 27, 25, 0.45);
	z-index: 90;
	opacity: 0;
	transition: opacity var(--transition-base);
}

.nav__backdrop.is-visible {
	opacity: 1;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar {
	background-color: var(--color-primary);
}

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

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

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

/* Mobile menu: hidden off-canvas by default */
.nav__menu {
	position: fixed;
	inset: 0 0 0 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-lg);
	background-color: var(--color-bg);
	padding: var(--space-2xl) var(--space-lg);
	transform: translateX(100%);
	transition: transform var(--transition-base);
	box-shadow: var(--shadow-md);
	z-index: 100;
}

.nav__menu.is-open {
	transform: translateX(0);
}

.nav__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.nav__links a {
	font-size: var(--fs-lg);
	font-weight: 500;
	color: var(--color-text);
}

.nav__cta {
	align-self: flex-start;
}

@media (min-width: 768px) {
	.nav__toggle {
		display: none;
	}

	.nav__menu {
		position: static;
		inset: auto;
		flex-direction: row;
		align-items: center;
		gap: var(--space-lg);
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
	}

	.nav__links {
		flex-direction: row;
		gap: var(--space-lg);
	}

	.nav__links a {
		font-size: var(--fs-sm);
		color: var(--color-white);
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
		position: relative;
		padding-bottom: 2px;
	}

	.nav__links a::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: var(--color-accent);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform var(--transition-base);
	}

	.nav__links a:hover::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	.site-header.is-solid .nav__links a {
		color: var(--color-text);
		text-shadow: none;
	}
}


/* =============================================================
   6. HERO
============================================================= */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--space-xl) var(--container-padding);
	text-align: center;
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	background-color: var(--color-primary);
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%), url('/img/hero-north-idaho.webp');
	background-size: cover;
	background-position: center;
}

.hero__content {
	position: relative;
	z-index: 1;
	max-width: 700px;
}

.hero__title {
	font-size: var(--fs-3xl);
	color: var(--color-white);
	margin-bottom: var(--space-sm);
	letter-spacing: 0.04em;
}

.hero__subtitle {
	font-size: var(--fs-lg);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--space-lg);
	line-height: 1.6;
	max-width: 560px;
	margin-inline: auto;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}


/* =============================================================
   7. BUTTONS
============================================================= */
.btn {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	border: 1px solid var(--color-primary);
}

.btn--primary:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

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

.btn--primary.btn--light:hover {
	background-color: var(--color-accent);
	color: var(--color-white);
	border-color: var(--color-accent);
}

.btn--outline {
	background-color: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

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

/* Light variant for use over dark/photo backgrounds (header, hero) */
.btn--light.btn--outline {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.7);
}

.btn--light.btn--outline:hover {
	background-color: var(--color-white);
	color: var(--color-primary);
	border-color: var(--color-white);
}

.btn--light:not(.btn--outline) {
	background-color: transparent;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn--light:not(.btn--outline):hover {
	background-color: var(--color-white);
	color: var(--color-primary);
}


/* =============================================================
   8. FORMS
============================================================= */
.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.form-field label {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--color-text);
}

.form-field input,
.form-field textarea,
.form-field select {
	padding: 0.75rem var(--space-sm);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);
}

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


/* =============================================================
   9. FEATURED SEARCH
============================================================= */
.property-search {
	background-color: var(--color-surface);
	margin-top: calc(var(--space-xl) * -1);
	position: relative;
	z-index: 10;
	padding-top: 0;
}

.property-search .container {
	padding-top: var(--space-2xl);
}

.property-search__heading {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.property-search__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	max-width: 960px;
	margin-inline: auto;
	background-color: var(--color-bg);
	padding: var(--space-lg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--color-border);
}

.property-search__field {
	margin-bottom: 0;
}

.property-search__submit {
	width: 100%;
}

@media (min-width: 768px) {
	.property-search__form {
		grid-template-columns: repeat(4, 1fr) auto;
		align-items: end;
	}

	.property-search__submit {
		width: auto;
	}
}


/* =============================================================
   10. WHY NORTH IDAHO (EDITORIAL)
============================================================= */
.editorial__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
}

.editorial__media img {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.editorial__content h2 {
	margin-bottom: var(--space-sm);
}

.editorial__content p {
	margin-bottom: var(--space-md);
	font-size: var(--fs-lg);
	line-height: 1.7;
}

.editorial__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xs) var(--space-md);
}

.editorial__list li {
	position: relative;
	padding-left: var(--space-md);
	font-weight: 500;
	color: var(--color-text);
}

.editorial__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	background-color: var(--color-accent);
	border-radius: 50%;
}

@media (min-width: 900px) {
	.editorial__container {
		grid-template-columns: 1fr 1fr;
	}
}


/* =============================================================
   11. FEATURED COMMUNITIES
============================================================= */
.communities {
	background-color: var(--color-surface);
}

.communities__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.community-card {
	background-color: var(--color-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.community-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.community-card__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--color-border);
}

.community-card__body {
	padding: var(--space-md);
}

.community-card__body h3 {
	margin-bottom: var(--space-xs);
}

.community-card__body p {
	margin-bottom: var(--space-md);
}

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

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


/* =============================================================
   12. FEATURED PROPERTIES
============================================================= */
.properties__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.property-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.property-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.property-card__media {
	width: 100%;
	aspect-ratio: 7 / 5;
	object-fit: cover;
	background-color: var(--color-border);
}

.property-card__body {
	padding: var(--space-md);
}

.property-card__price {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

.property-card__title {
	margin-bottom: var(--space-xs);
}

.property-card__location,
.property-card__details {
	font-size: var(--fs-sm);
	margin-bottom: var(--space-xs);
}

.property-card__body .btn {
	margin-top: var(--space-xs);
}

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


/* =============================================================
   13. MEET YOUR REALTOR
============================================================= */
.realtor__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
}

.realtor__portrait img {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.realtor__name {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	color: var(--color-primary);
	margin-top: var(--space-sm);
}

.realtor__title {
	font-size: var(--fs-sm);
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-sm);
}

.realtor__content p {
	margin-bottom: var(--space-md);
	line-height: 1.7;
}

.realtor__highlights {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.realtor__highlights li {
	padding-left: var(--space-md);
	border-left: 2px solid var(--color-accent);
}

.realtor__highlights strong {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}

.realtor__highlights span {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: 1.5;
}

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

@media (min-width: 900px) {
	.realtor__container {
		grid-template-columns: 0.8fr 1fr;
	}
}


/* =============================================================
   14. LIFESTYLE
============================================================= */
.lifestyle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	text-align: center;
	padding: var(--space-2xl) var(--container-padding);
	overflow: hidden;
}

.lifestyle__media {
	position: absolute;
	inset: 0;
	background-color: var(--color-primary);
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%), url('/img/lifestyle-idaho.webp');
	background-size: cover;
	background-position: center;
}

.lifestyle__content {
	position: relative;
	z-index: 1;
	max-width: var(--container-width-narrow);
}

.lifestyle__content h2 {
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.lifestyle__content p {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--space-lg);
	line-height: 1.7;
	font-size: var(--fs-lg);
}

.lifestyle__highlights {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.lifestyle__highlights li {
	padding: var(--space-xs) var(--space-md);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-sm);
	background-color: rgba(255, 255, 255, 0.08);
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.lifestyle__highlights li:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
	.lifestyle {
		min-height: 75vh;
	}
}


/* =============================================================
   15. TESTIMONIALS
============================================================= */
.testimonials__track {
	display: flex;
	gap: var(--space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-sm);
	scrollbar-width: none;
}

.testimonials__track::-webkit-scrollbar {
	display: none;
}

.testimonials {
	background-color: var(--color-surface);
}

.testimonial-card {
	flex: 0 0 100%;
	scroll-snap-align: start;
	background-color: var(--color-bg);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.testimonial-card p {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	color: var(--color-text);
	line-height: 1.4;
	margin-bottom: var(--space-md);
}

.testimonial-card footer {
	font-size: var(--fs-sm);
	color: var(--color-accent);
	font-weight: 500;
}

.testimonials__controls {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.testimonials__arrow {
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	font-size: var(--fs-lg);
	color: var(--color-primary);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.testimonials__arrow:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}

@media (min-width: 768px) {
	.testimonial-card {
		flex: 0 0 calc(50% - var(--space-md) / 2);
	}
}

@media (min-width: 1024px) {
	.testimonial-card {
		flex: 0 0 calc(33.333% - var(--space-md) * 2 / 3);
	}
}


/* =============================================================
   16. LATEST MARKET INSIGHTS
============================================================= */
.insights__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.insight-card {
	transition: transform var(--transition-base);
}

.insight-card:hover {
	transform: translateY(-4px);
}

.insight-card__media {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-md);
	background-color: var(--color-border);
	margin-bottom: var(--space-sm);
}

.insight-card__body h3 {
	margin-bottom: var(--space-xs);
}

.insight-card__body p {
	margin-bottom: var(--space-sm);
}

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


/* =============================================================
   17. CALL TO ACTION
============================================================= */
.cta-section {
	position: relative;
	text-align: center;
	overflow: hidden;
	padding-block: var(--space-2xl);
}

.cta-section__media {
	position: absolute;
	inset: 0;
	background-color: var(--color-primary);
	background-image: linear-gradient(180deg, rgba(31, 47, 39, 0.88) 0%, rgba(31, 47, 39, 0.75) 100%), url('/img/cta-background.webp');
	background-size: cover;
	background-position: center;
}

.cta-section__content {
	position: relative;
	z-index: 1;
	max-width: var(--container-width-narrow);
}

.cta-section h2 {
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.cta-section p {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--space-md);
}


/* =============================================================
   18. FOOTER
============================================================= */
.site-footer {
	padding-top: var(--space-2xl);
	background-color: var(--color-primary);
}

.footer__brand {
	text-align: center;
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: var(--space-xl);
}

.footer__logo {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: 600;
	color: var(--color-white);
	display: inline-block;
	margin-bottom: var(--space-sm);
}

.footer__tagline {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.65);
	max-width: 420px;
	margin-inline: auto;
	line-height: 1.6;
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
	padding-bottom: var(--space-xl);
}

.footer__heading {
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.footer__col ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.footer__col a,
.footer__col li {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.75);
}

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

.footer__social {
	flex-direction: row;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.footer__social a {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.75);
	transition: color var(--transition-fast);
}

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

.footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding-block: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	text-align: center;
}

.footer__badges {
	display: flex;
	gap: var(--space-md);
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

.footer__copyright {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.6);
}

.footer__legal {
	display: flex;
	gap: var(--space-md);
}

.footer__legal a {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.6);
}

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

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

@media (min-width: 1024px) {
	.footer__grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}


/* =============================================================
   19. RESPONSIVE
   Global breakpoints referenced throughout this file:
   - 640px  (large mobile)
   - 768px  (tablet)
   - 900px  (small desktop)
   - 1024px (desktop)
============================================================= */
@media (min-width: 1024px) {
	:root {
		--fs-3xl: 4.5rem;
		--container-padding: var(--space-md);
	}

	.hero__title {
		font-size: var(--fs-3xl);
	}
}