/*f
Theme Name: Economy Explorer
Theme URI: https://economyexplorer.com
Author: Economy Explorer
Description: Custom WordPress theme for Economy Explorer.
Version: 1.0.0
Text Domain: economy-explorer
*/

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');

/* =========================================================
   DESIGN SYSTEM
========================================================= */

:root {
	--color-bg: #fdfcf9;
	--color-white: #ffffff;
	--color-text: #142338;
	--color-muted: #637083;

	--color-primary: #174a85;
	--color-primary-dark: #123b6a;

	--color-accent: #ef761b;

	--color-soft: #f3f6f9;
	--color-border: #dce2e8;

	--font-heading: "Source Serif 4", Georgia, serif;
	--font-body: "Inter", Arial, sans-serif;

	--container: 1280px;

	--radius: 3px;
}


/* =========================================================
   RESET
========================================================= */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

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

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

button,
input {
	font: inherit;
}

.site-container {
	width: min(calc(100% - 40px), var(--container));
	margin-inline: auto;
}

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


/* =========================================================
   HEADER
========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--color-border);
}

.admin-bar .site-header {
	top: 32px;
}

.header-inner {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}



.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
}

.logo-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	border-radius: 2px;
	position: relative;
}

.logo-icon::before {
	content: "";
	width: 17px;
	height: 13px;
	border-left: 2px solid white;
	border-bottom: 2px solid white;
	transform: skewY(-25deg);
}

.logo-name {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
}

.main-navigation {
	margin-left: auto;
	transform: translateX(60px);
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu a {
	font-size: 16px;
	font-weight: 600;
	color: #173f30;
}

.primary-menu a:hover {
	color: #b46a1d;
}

.primary-menu .menu-start a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;

	background: #173f30;
	color: #ffffff;

	border-radius: var(--radius);
}

.primary-menu .menu-start a:hover {
	background: #b46a1d;
	color: #ffffff;
}

/* =========================================================
   HERO
========================================================= */

.home-hero {
	background: var(--color-soft);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 70px;
}

.hero-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 70px;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 64px;
}

.hero-content {
	position: relative;
}

.eyebrow {
	margin: 0;
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
}
   
   .hero-content {
	transform: translateY(-130px);
}

@media (max-width: 1050px) {

	.hero-content {
		transform: none;
	}

}

.hero-content h1 {
	margin: 18px 0 0;
	font-family: var(--font-heading);
	font-size: clamp(34px, 3.2vw, 46px);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.hero-description {
	max-width: 650px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.75;
	color: var(--color-muted);
}

.hero-actions {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}


/* Decorative explorer objects */

.hero-explorer-objects {
	position: absolute;
	left: -80px;
	top: 100%;
	width: 850px;
	margin-top: -60px;
	z-index: 1;
}

.hero-explorer-objects img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hide decorative hero objects on tablet and mobile */

@media (max-width: 1050px) {

	.hero-explorer-objects {
		display: none !important;
	}

}


/* Buttons */

.button {
	height: 52px;
	padding-inline: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius);
}

.button-primary {
	background: #173f30;
	color: white;
}

.button-primary:hover {
	background: #285c46;
	color: white;
}

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


/* Explorer image */

.hero-image {
	position: relative;
}

.hero-image::before {
	content: "";
	position: absolute;
	left: -13px;
	top: -13px;
	width: 100px;
	height: 100px;
	border-left: 2px solid var(--color-accent);
	border-top: 2px solid var(--color-accent);
	z-index: 2;
	pointer-events: none;
}

.hero-image img,
.image-placeholder {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: #dce3e9;
	box-shadow: 0 20px 45px -30px rgba(15, 42, 72, 0.7);
}

.image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 24px;
	color: #748297;
}


/* =========================================================
   HOME HERO — FIXED EXPLORER IMAGE
========================================================= */

.hero-image-fixed {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	box-shadow: none;
}

.hero-image-fixed img {
	display: block;
	width: auto;
	height: 680px;
	max-width: 100%;
	object-fit: contain;
	box-shadow:
		0 18px 38px rgba(20, 35, 56, 0.12);
}
/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section-block {
	padding-top: 58px;
	padding-bottom: 58px;
}

.section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 34px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}

.section-heading h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 30px;
	line-height: 1.2;
}

.section-heading span {
	color: var(--color-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}


/* =========================================================
   FEATURED
========================================================= */

.featured-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 42px;
}

.featured-side {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.topic-box,
.empty-card {
	padding: 24px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
}

.topic-box h3,
.empty-card h3 {
	margin: 0 0 14px;
	font-family: var(--font-heading);
	font-size: 21px;
}

.topic-box ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.topic-box a {
	color: var(--color-muted);
	font-size: 14px;
}


/* =========================================================
   ARTICLES
========================================================= */

.content-sidebar-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 0.85fr);
	gap: 52px;
}

.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 42px;
}

.article-card {
	min-width: 0;
}

.article-image {
	display: block;
	overflow: hidden;
	background: var(--color-soft);
}

.article-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.article-card-large .article-image img {
	aspect-ratio: 16 / 9;
}

.article-card:hover .article-image img {
	transform: scale(1.025);
}

.article-content {
	margin-top: 17px;
}

.article-category {
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.article-content h3 {
	margin: 8px 0 0;
	font-family: var(--font-heading);
	font-size: 23px;
	line-height: 1.2;
}

.article-card-large .article-content h3 {
	font-size: 34px;
}

.article-excerpt {
	margin: 12px 0 0;
	color: var(--color-muted);
	font-size: 15px;
	line-height: 1.7;
}

.article-meta {
	margin: 14px 0 0;
	color: var(--color-muted);
	font-size: 12px;
}

.article-meta span {
	margin-inline: 7px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.site-sidebar {
	display: flex;
	flex-direction: column;
	gap: 38px;
}

.sidebar-section h2,
.sidebar-start h2 {
	margin: 0 0 14px;
	font-family: var(--font-heading);
	font-size: 22px;
}

.search-form {
	display: flex;
}

.search-form label {
	flex: 1;
}

.search-field {
	width: 100%;
	height: 48px;
	padding: 0 15px;
	background: white;
	border: 1px solid var(--color-border);
}

.search-submit {
	height: 48px;
	padding: 0 18px;
	background: var(--color-primary);
	color: white;
	border: 0;
	cursor: pointer;
}

.sidebar-categories {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-border);
}

.sidebar-categories li {
	border-bottom: 1px solid var(--color-border);
}

.sidebar-categories a {
	display: block;
	padding: 11px 0;
	color: var(--color-muted);
	font-size: 14px;
}

.popular-posts {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: item;
}

.popular-posts li {
	display: flex;
	gap: 14px;
}

.popular-number {
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.popular-posts a {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.popular-posts p {
	margin: 4px 0 0;
	color: var(--color-muted);
	font-size: 12px;
}

.sidebar-start {
	padding: 24px;
	background: var(--color-soft);
	border: 1px solid var(--color-border);
}

.sidebar-start p {
	color: var(--color-muted);
	font-size: 14px;
}

.sidebar-start a {
	display: inline-flex;
	margin-top: 6px;
	padding: 10px 18px;
	background: var(--color-primary);
	color: white;
	font-size: 14px;
	font-weight: 600;
}


/* =========================================================
   WHERE TO BEGIN
========================================================= */

.begin-section {
	background: #f5f5dc;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.begin-inner {
	padding-top: 58px;
	padding-bottom: 58px;
}

.begin-inner > h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 30px;
}

.begin-intro {
	max-width: 720px;
	color: var(--color-muted);
}

.begin-list {
	margin-top: 32px;
	border-top: 1px solid var(--color-border);
}

.begin-row {
	display: grid;
	grid-template-columns: 220px 1fr 160px;
	gap: 34px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--color-border);
}

.begin-title a {
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 700;
}

.begin-row p {
	margin: 0;
	color: var(--color-muted);
	font-size: 14px;
}

.begin-link {
	text-align: right;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 600;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter-section {
	background: white;
}

.newsletter-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-top: 52px;
	padding-bottom: 52px;
}

.newsletter-inner h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 30px;
}

.newsletter-inner p {
	margin: 6px 0 0;
	color: var(--color-muted);
}

.newsletter-form {
	display: flex;
	width: min(100%, 520px);
}

.newsletter-form input {
	flex: 1;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--color-border);
	background: white;
}

.newsletter-form button {
	padding: 0 28px;
	border: 0;
	background: var(--color-accent);
	color: white;
	font-weight: 600;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
	padding-top: 42px;
	padding-bottom: 22px;

	background: #173f30;
	color: #d7e0eb;
}


/* =========================================================
   MAIN GRID
========================================================= */

.footer-grid {
	display: grid;

	grid-template-columns: 1.35fr 0.85fr 0.85fr 0.85fr;

	gap: 48px;

	align-items: start;
}


.footer-brand h2,
.site-footer h3 {
	margin: 0 0 12px;

	font-family: var(--font-heading);
	color: #ffffff;
}


.footer-brand h2 {
	font-size: 24px;
}


.footer-brand p {
	max-width: 330px;

	margin: 0 0 10px;

	color: #b9c5d4;

	font-size: 14px;
	line-height: 1.55;
}


.site-footer h3 {
	color: var(--color-accent);

	font-family: var(--font-body);

	font-size: 12px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: 0.12em;
}


/* =========================================================
   LINKS
========================================================= */

.site-footer ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


.site-footer li {
	margin-bottom: 8px;
}


.site-footer a {
	color: #d7e0eb;

	font-size: 14px;
}


.site-footer a:hover {
	color: #ffffff;
}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 30px;

	margin-top: 28px;
	padding-top: 20px;

	border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.footer-copyright,
.footer-contact {
	margin: 0;

	font-size: 12px;
}


.footer-copyright {
	color: #95a5b8;
}


.footer-contact a {
	font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.footer-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 32px 48px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.site-footer {
		padding-top: 34px;
		padding-bottom: 20px;
	}

	.footer-grid {
		grid-template-columns: 1fr;

		gap: 26px;
	}

	.footer-bottom {
		flex-direction: column;

		align-items: flex-start;

		gap: 8px;

		margin-top: 26px;
		padding-top: 18px;
	}

}



/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

body.admin-bar {
	min-height: calc(100vh - 32px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

	.main-navigation {
	display: block;
	width: 100%;
	margin: 0;
	overflow: visible;
	border-top: 1px solid var(--color-border);
}

.primary-menu {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 0;
	list-style: none;
}

.primary-menu li {
	min-width: 0;
	text-align: center;
}

.primary-menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 12px 4px;
	font-size: 13px;
	line-height: 1.2;
	white-space: normal;
	text-align: center;
}

.primary-menu .menu-start a {
	margin: 0;
	padding: 12px 4px;
	background: transparent;
	color: #173f30;
	border-radius: 0;
}

    .hero-grid {
	    grid-template-columns: 3fr 2fr;
	    gap: 32px;
    }

	.content-sidebar-grid {
		grid-template-columns: 1fr;
	}

	.site-sidebar {
		display: none;
	}

	.articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}


@media (max-width: 760px) {

	.admin-bar .site-header {
		top: 46px;
	}

	.site-container {
		width: min(calc(100% - 30px), var(--container));
	}

	.header-inner {
		min-height: 64px;
	}

	.logo-name {
		font-size: 21px;
	}

	.hero-grid {
	grid-template-columns: 1fr;
	padding-top: 30px;
	padding-bottom: 55px;
}

	.hero-content h1 {
		font-size: 45px;
	}

	.hero-image {
		margin-top: 15px;
	}

	.featured-grid {
		grid-template-columns: 1fr;
	}

	.articles-grid {
		grid-template-columns: 1fr;
	}

	.article-card-large .article-content h3 {
		font-size: 28px;
	}

	.begin-row {
		grid-template-columns: 1fr;
		gap: 7px;
	}

	.begin-link {
		text-align: left;
	}

	.newsletter-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.newsletter-form {
		width: 100%;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 38px;
	}

	.footer-newsletter {
		align-items: flex-start;
		flex-direction: column;
	}

	.footer-email {
		width: 100%;
	}

}


@media (max-width: 520px) {

	.hero-content h1 {
		font-size: 38px;
	}

	.hero-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.button {
		width: 100%;
	}

	.topic-box ul {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.newsletter-form,
	.footer-email {
		flex-direction: column;
	}

	.newsletter-form button,
	.footer-email button {
		height: 50px;
	}

}
/* =========================================================
   ECONOMY EXPLORER
   MOBILE REFINEMENTS
   ========================================================= */


  @media (max-width: 1050px) and (orientation: portrait) {

	.featured-grid {
		grid-template-columns: 1fr;
	}

}

    @media (max-width: 768px) {

	/* -----------------------------------------------------
	   GLOBAL
	----------------------------------------------------- */

	body {
		overflow-x: hidden;
	}

	.site-container {
		width: calc(100% - 32px);
		margin-left: auto;
		margin-right: auto;
	}

	.section-block {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.section-heading {
		align-items: flex-end;
		gap: 20px;
	}

	.section-heading h2 {
		font-size: 34px;
	}

	.section-heading span {
		font-size: 10px;
		letter-spacing: 0.14em;
	}


/* -----------------------------------------------------
   HEADER
----------------------------------------------------- */

.site-header {
	position: relative;
	background: #fff;
}


.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 56px;

	padding-top: 18px;
	padding-bottom: 18px;
}


.site-logo {
	display: inline-flex;
	align-items: center;

	gap: 12px;

	margin: 0;

	flex-shrink: 0;
}


.logo-icon {
	width: 42px;
	height: 42px;

	flex: 0 0 42px;
}


.logo-name {
	font-size: 24px;
	line-height: 1;
}


/* -----------------------------------------------------
   MAIN NAVIGATION
----------------------------------------------------- */

.main-navigation {
	display: block;

	width: auto;

	margin-left: auto;

	overflow: visible;

	border: 0;
}


.primary-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;

	width: auto;
	min-width: 0;

	gap: 32px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.primary-menu li {
	flex: 0 0 auto;
}


.primary-menu a {
	display: block;

	padding: 10px 0;

	color: #173f30;

	font-size: 16px;
	font-weight: 600;

	white-space: nowrap;
}


.primary-menu a:hover {
	color: #b46a1d;
}


/* What's New */

.primary-menu .menu-start a {
	display: inline-flex;
	align-items: center;

	min-height: 42px;

	margin-left: 4px;
	padding: 0 18px;

	background: #173f30;
	color: #ffffff;

	border-radius: var(--radius);
}


.primary-menu .menu-start a:hover {
	background: #b46a1d;
	color: #ffffff;
}

	/* -----------------------------------------------------
	   HERO
	----------------------------------------------------- */

.home-hero {
	padding-top: 0;
	padding-bottom: 0;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 38px;
	padding-top: 34px;
	padding-bottom: 48px;
}

	.hero-content h1 {
		font-size: 36px;
		line-height: 0.98;
		letter-spacing: -0.025em;
	}

	.hero-description {
		max-width: none;
		font-size: 16px;
		line-height: 1.7;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.hero-actions .button {
		width: auto;
	}
	
    .hero-image {
       width: 100%;
	   max-width: 440px;
	   margin: 10px auto 0;
    }

    .hero-image img,
    .hero-image .image-placeholder {
   	   width: 100%;
	   aspect-ratio: 16 / 9;
	   object-fit: cover;
    }

	/* -----------------------------------------------------
	   FEATURED
	----------------------------------------------------- */

	.featured-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.featured-main,
	.featured-side {
		width: 100%;
	}

	.article-card-large .article-image img {
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}

	.article-card-large h3 {
		font-size: 29px;
		line-height: 1.12;
	}

	.topic-box {
		padding: 26px;
	}

	.topic-box ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 13px 18px;
	}

	.topic-box li {
		margin: 0;
	}


	/* -----------------------------------------------------
	   LATEST ARTICLES
	----------------------------------------------------- */

	.content-sidebar-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.articles-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.article-card {
		width: 100%;
	}

	.article-card .article-image {
		display: block;
	}

	.article-card .article-image img {
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}

	.article-card h3 {
		font-size: 25px;
		line-height: 1.16;
	}

	.article-excerpt {
		font-size: 15px;
		line-height: 1.65;
	}

	.article-meta {
		font-size: 12px;
	}

	.sidebar {
		width: 100%;
	}


	/* -----------------------------------------------------
	   START HERE / EXPLORE BY TOPIC
	----------------------------------------------------- */

	.begin-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.begin-inner h2 {
		font-size: 34px;
	}

	.begin-intro {
		font-size: 16px;
		line-height: 1.7;
	}

	.begin-row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.begin-title {
		width: 100%;
	}

	.begin-title a {
		font-size: 23px;
		line-height: 1.2;
	}

	.begin-row > p {
		margin: 0;
		font-size: 15px;
		line-height: 1.65;
	}

	.begin-link {
		justify-self: start;
		margin-top: 4px;
	}

	.home-start-here .section-heading {
		display: block;
	}

	.home-start-here .section-heading span {
		display: block;
		margin-top: 8px;
	}


	/* -----------------------------------------------------
	   NEWSLETTER
	----------------------------------------------------- */

	.newsletter-inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.newsletter-inner h2 {
		font-size: 32px;
	}

	.newsletter-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	width: 100%;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
   }

	.newsletter-form input,
	.newsletter-form button {
		width: 100%;
	}


	/* -----------------------------------------------------
	   FOOTER
	----------------------------------------------------- */

	.footer-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 38px 24px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.footer-newsletter {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.footer-email {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.footer-email input,
	.footer-email button {
		width: 100%;
	}

	.footer-bottom {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.footer-contact {
		text-align: left;
	}


	/* -----------------------------------------------------
	   ARTICLE PAGE
	----------------------------------------------------- */

	.single-header h1 {
		font-size: 40px;
	}

	.single-article .entry-content {
		font-size: 17px;
		line-height: 1.8;
	}

	.single-featured-image img {
		aspect-ratio: 16 / 10;
	}


	/* -----------------------------------------------------
	   ABOUT / CONTACT / LEGAL
	----------------------------------------------------- */

	.about-content,
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.about-values {
		grid-template-columns: 1fr;
	}

	.contact-form-wrap {
		padding: 22px;
	}

	.page-header h1 {
		font-size: 40px;
	}

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

	.site-container {
		width: calc(100% - 28px);
	}

	.logo-name {
		font-size: 21px;
	}

	.logo-icon {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}
	
	.hero-image {
	    display: none;
    }

	.hero-content h1 {
		font-size: 36px;
		line-height: 1.02;
	}

	.hero-content h1 br {
		display: none;
	}

	.hero-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.hero-actions .button {
		width: 100%;
		text-align: center;
	}

	.section-heading h2,
	.begin-inner h2 {
		font-size: 31px;
	}

#explore-topics .begin-list {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 16px;
}

#explore-topics .begin-row {
	flex: 0 0 calc(50% - 8px);
	min-width: 0;
	margin: 0;
}

	.topic-box ul {
		grid-template-columns: 1fr;
	}
	
	.footer-newsletter {
	display: none;
}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-brand {
		grid-column: auto;
	}

	.article-card h3 {
		font-size: 23px;
	}

	.begin-title a {
		font-size: 21px;
	}

}

/* =========================================================
   UPDATE SIGNUP
========================================================= */

.updates-signup {
	width: 100%;
}

.signup-note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-muted);
}

.site-footer .signup-note {
	color: rgba(255, 255, 255, 0.65);
}

.subscribe-message {
	margin-bottom: 14px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.5;
	border-left: 3px solid;
}

.subscribe-success {
	background: #edf7f0;
	color: #275c35;
	border-color: #3f8551;
}

.subscribe-already {
	background: #f1f5f9;
	color: #334155;
	border-color: #64748b;
}

.subscribe-error {
	background: #fff1f0;
	color: #8c302d;
	border-color: #c64b46;
}

.updates-form input:not(.form-honeypot input) {
	min-width: 0;
}

.updates-form button {
	cursor: pointer;
}


/* =========================================================
   HEADER - EXPLORE TOPICS DROPDOWN
========================================================= */

.menu-topics {
	position: relative;
}

.menu-topics details {
	position: relative;
}

.menu-topics summary {
	display: block;
	padding: 14px 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	color: inherit;
}

.menu-topics summary::-webkit-details-marker {
	display: none;
}

.menu-topics summary::after {
	content: "▾";
	display: inline-block;
	margin-left: 6px;
	font-size: 10px;
	vertical-align: middle;
}

.menu-topics details[open] summary::after {
	content: "▴";
}


/* Caixa do menu */

.topics-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;

	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 1fr));

	width: 420px;
	margin: 0;
	padding: 12px;

	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: 4px;

	box-shadow:
		0 14px 35px rgba(15, 35, 60, 0.14);

	list-style: none;
}


/* Links das categorias */

.topics-dropdown li {
	margin: 0;
	padding: 0;
}

.topics-dropdown a {
	display: block;
	padding: 11px 13px;

	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;

	white-space: normal;
	border-radius: 3px;
}

.topics-dropdown a:hover,
.topics-dropdown a:focus {
	background: #f4f7fa;
	color: var(--color-primary);
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 768px) {

	.menu-topics {
		position: static;
	}

	.menu-topics details {
		position: static;
	}

	.topics-dropdown {
		position: fixed;

		top: 100px;
		left: 16px;
		right: 16px;

		transform: none;

		width: auto;
		max-height: calc(100vh - 130px);

		grid-template-columns: 1fr 1fr;

		overflow-y: auto;
	}

}


@media (max-width: 480px) {

	.topics-dropdown {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   TOOLS PAGE
========================================================= */

.tools-hero {
	background: #f3f6fa;
	padding: 86px 0 76px;
	border-bottom: 1px solid var(--color-border);
}

.tools-hero-inner {
	max-width: 880px;
}

.tools-hero h1 {
	margin: 14px 0 24px;
	font-size: clamp(48px, 6vw, 78px);
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--color-heading);
}

.tools-hero-description {
	max-width: 720px;
	margin: 0;
	font-size: 19px;
	line-height: 1.7;
	color: var(--color-text);
}


.tool-top-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 28px;
}

.tool-top-navigation a {
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 600;
}

.tool-top-navigation a:hover {
	color: var(--color-accent);
}

.tool-header .article-category {
	font-size: 20px;
}


/* =========================================================
   TOOLS GRID
========================================================= */

.tools-section {
	padding-top: 78px;
	padding-bottom: 88px;
}

.tools-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 34px;
}

.tool-card {
	position: relative;
	min-height: 260px;
	padding: 30px;

	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: 4px;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.tool-card:hover {
	transform: translateY(-3px);
	border-color: #c9d3df;
	box-shadow: 0 14px 30px rgba(15, 35, 60, 0.08);
}

.tool-card-label {
	margin: 0 0 18px;

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;

	color: #f36b21;
}

.tool-card h3 {
	margin: 0 0 14px;

	font-size: 25px;
	line-height: 1.15;

	color: var(--color-heading);
}

.tool-card p:last-child {
	margin: 0;

	font-size: 15px;
	line-height: 1.7;

	color: var(--color-text);
}


/* =========================================================
   TOOLS BOTTOM NOTE
========================================================= */

.tools-note {
	padding: 70px 0;

	background: #f3f6fa;
	border-top: 1px solid var(--color-border);
}

.tools-note-inner {
	max-width: 760px;
}

.tools-note h2 {
	margin: 0 0 16px;

	font-size: 36px;
	line-height: 1.15;

	color: var(--color-heading);
}

.tools-note p {
	margin: 0;

	font-size: 17px;
	line-height: 1.7;

	color: var(--color-text);
}


/* =========================================================
   TOOLS RESPONSIVE
========================================================= */

@media (max-width: 960px) {

	.tools-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


@media (max-width: 768px) {

	.tools-hero {
		padding: 58px 0 52px;
	}

	.tools-hero h1 {
		font-size: 46px;
	}

	.tools-hero-description {
		font-size: 17px;
	}

	.tools-section {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.tools-grid {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 26px;
	}

	.tool-card {
		min-height: 0;
		padding: 24px;
	}

	.tools-note {
		padding: 54px 0;
	}

	.tools-note h2 {
		font-size: 31px;
	}

}


@media (max-width: 480px) {

	.tools-hero h1 {
		font-size: 38px;
	}

	.tool-card h3 {
		font-size: 23px;
	}

}


/* =========================================================
   TOOL INFO BUTTON + MODAL
========================================================= */

.tool-info-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	margin-top: 18px;
	padding: 11px 18px;

	border: 1px solid #1f4d3a;
	border-radius: 6px;

	background: #1f4d3a;
	color: #fff;

	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.tool-info-button:hover,
.tool-info-button:focus {
	background: #173c2d;
	border-color: #173c2d;
	transform: translateY(-1px);
}

.tool-info-button:focus-visible {
	outline: 3px solid rgba(177, 139, 61, 0.35);
	outline-offset: 3px;
}


/* =========================================================
   DIALOG
========================================================= */

.tool-info-dialog {
	width: min(92vw, 620px);
	max-height: 82vh;

	padding: 0;

	border: 1px solid rgba(31, 77, 58, 0.18);
	border-radius: 12px;

	background: #f8f4ea;
	color: #17352b;

	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.28);

	overflow: hidden;
}

.tool-info-dialog::backdrop {
	background: rgba(13, 24, 20, 0.68);
	backdrop-filter: blur(2px);
}


/* =========================================================
   DIALOG INNER
========================================================= */

.tool-info-dialog-inner {
	position: relative;

	padding: 34px 36px 32px;

	max-height: 82vh;
	overflow-y: auto;
}

.tool-info-dialog h2 {
	margin: 0 42px 20px 0;

	color: #17352b;

	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
}

.tool-dialog-content {
	font-size: 17px;
	line-height: 1.7;
	color: #31483f;
}

.tool-dialog-content p {
	margin: 0 0 16px;
}

.tool-dialog-content p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.tool-dialog-close {
	position: absolute;
	top: 16px;
	right: 18px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(31, 77, 58, 0.08);
	color: #17352b;

	font-family: Arial, sans-serif;
	font-size: 25px;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.tool-dialog-close:hover,
.tool-dialog-close:focus {
	background: rgba(31, 77, 58, 0.16);
	transform: scale(1.05);
}

.tool-dialog-close:focus-visible {
	outline: 3px solid rgba(177, 139, 61, 0.35);
	outline-offset: 2px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.tool-info-button {
		width: 100%;
		max-width: 280px;

		padding: 12px 16px;

		font-size: 15px;
	}

	.tool-info-dialog {
		width: calc(100vw - 28px);
		max-height: 86vh;

		border-radius: 10px;
	}

	.tool-info-dialog-inner {
		padding: 28px 22px 24px;

		max-height: 86vh;
	}

	.tool-info-dialog h2 {
		font-size: 26px;
	}

	.tool-dialog-content {
		font-size: 16px;
		line-height: 1.65;
	}

}


/* =========================================================
   TOOL PAGE — BASE LAYOUT
========================================================= */

.tool-page {
	background: #f8f5ed;
	color: #17352b;
}

.tool-main {
	padding-top: 42px;
	padding-bottom: 70px;
}


/* =========================================================
   TOOL HEADER
========================================================= */

.tool-header {
	max-width: 900px;
	margin: 0 auto 30px;
}

.tool-heading {
	max-width: 760px;
}

.tool-heading .article-category {
	display: inline-block;
	margin-bottom: 10px;

	color: #a77b2f;

	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.tool-heading h1 {
	margin: 0 0 12px;

	color: #173f30;

	font-size: clamp(36px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.tool-intro {
	max-width: 650px;

	margin: 0;

	color: #43554d;

	font-size: 18px;
	line-height: 1.55;
}


/* =========================================================
   TOOL WORKSPACE
========================================================= */

.tool-workspace {
	width: 100%;
	max-width: 900px;

	margin: 0 auto;

	padding: 34px;

	background: #fffdf8;

	border: 1px solid #ded8ca;
	border-radius: 10px;

	box-shadow: 0 8px 28px rgba(23, 53, 43, 0.07);
}


/* =========================================================
   DEMO CALCULATOR
========================================================= */

.tool-demo-calculator {
	max-width: 720px;
	margin: 0 auto;
}

.tool-demo-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.tool-demo-field label {
	display: block;

	margin-bottom: 7px;

	color: #526159;

	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tool-demo-input {
	padding: 14px 16px;

	background: #f8f5ed;

	border: 1px solid #d8d1c2;
	border-radius: 5px;

	color: #17352b;

	font-size: 18px;
}

.tool-demo-calculate {
	width: 100%;

	margin-top: 26px;
	padding: 15px 20px;

	border: 0;
	border-radius: 5px;

	background: #173f30;
	color: #fff;

	font: inherit;
	font-size: 15px;
	font-weight: 700;

	cursor: pointer;
}

.tool-demo-calculate:hover {
	background: #173f30;
}


/* =========================================================
   DEMO RESULT
========================================================= */

.tool-demo-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin-top: 22px;
	padding: 20px 22px;

	background: #f1ede2;

	border-left: 4px solid #b58a3a;
}

.tool-demo-result span {
	color: #536159;

	font-size: 15px;
}

.tool-demo-result strong {
	color: #173f30;

	font-size: 28px;
	line-height: 1;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.tool-main {
		padding-top: 28px;
		padding-bottom: 45px;
	}

	.tool-header {
		margin-bottom: 24px;
	}

	.tool-heading h1 {
		font-size: 36px;
	}

	.tool-intro {
		font-size: 17px;
	}

	.tool-workspace {
		padding: 22px 18px;

		border-radius: 8px;
	}

	.tool-demo-fields {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.tool-demo-result {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.tool-demo-result strong {
		font-size: 26px;
	}

}



/* =========================================================
   TOOL PAGE — DESKTOP ILLUSTRATION TEST
   Temporary structural test
========================================================= */

@media (min-width: 901px) {

	/*
	 * Keep the entire Tool composition inside
	 * the same 900px central area.
	 */
	.tool-header,
	.tool-workspace {
		max-width: 900px;
	}


	/*
	 * Header remains aligned with the future
	 * calculator column.
	 */
	.tool-header {
		padding-left: 225px;
	}


	/*
	 * Creates the illustration column without
	 * making the whole page wider.
	 */
	.tool-workspace {
		position: relative;

		width: 675px;

	    margin-left: calc(50% - 225px);
        margin-right: 0;
	}


	/*
	 * Temporary visual placeholder.
	 * This represents the future Explorer,
	 * compass, mountain, pipe, etc.
	 */
	.tool-workspace::before {
		content: "ILLUSTRATION";

		position: absolute;

		right: calc(100% + 25px);
		top: 0;

		width: 200px;
		height: 100%;

		min-height: 345px;

		display: flex;
		align-items: center;
		justify-content: center;

		border: 1px dashed #b7ad97;
		border-radius: 10px;

		background:
			linear-gradient(
				180deg,
				#eee8da 0%,
				#f8f5ed 100%
			);

		color: #8c8068;

		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.16em;
		writing-mode: vertical-rl;
		text-orientation: mixed;
	}


	/*
	 * The calculator no longer needs
	 * its old internal 720px limit.
	 */
	.tool-demo-calculator {
		max-width: none;
	}


	/*
	 * Slightly tighter calculator fields.
	 */
	.tool-demo-fields {
		gap: 18px;
	}

}


/* =========================================================
   TOOL PAGE — FINAL ILLUSTRATION STRUCTURE
========================================================= */

.tool-layout {
	width: 100%;
	max-width: 900px;

	margin: 0 auto;

	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 28px;

	align-items: start;
}


/* =========================================================
   TOOL VISUAL
========================================================= */

.tool-visual {
	width: 190px;

	align-self: stretch;

	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.tool-visual img {
	display: block;

	width: 100%;
	height: auto;

	max-width: 190px;

	object-fit: contain;
}


/* =========================================================
   TOOL CONTENT COLUMN
========================================================= */

.tool-content-column {
	min-width: 0;
}


/* Undo temporary illustration-test rules */

.tool-layout .tool-header {
	max-width: none;

	margin: 0 0 24px;

	padding-left: 0;
}

.tool-layout .tool-workspace {
	position: relative;

	width: 100%;
	max-width: none;

	margin: 0;

	padding: 30px;

	background: #fffdf8;

	border: 1px solid #ded8ca;
	border-radius: 10px;

	box-shadow: 0 8px 28px rgba(23, 53, 43, 0.07);
}


/* Kill the temporary ILLUSTRATION placeholder */

.tool-layout .tool-workspace::before {
	content: none !important;
	display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.tool-layout {
		display: block;
	}




	.tool-layout .tool-header {
		text-align: left;
	}


	.tool-layout .tool-workspace {
		padding: 22px 18px;
	}

}


/* Explorer visual proportion adjustment */

@media (min-width: 701px) {

	.tool-visual {
		overflow: visible;
	}

	.tool-visual img {
		width: 245px;
		max-width: 245px;
		height: auto;
	}
}


/* =========================================================
   TOOL PAGE — MOCKUP COMPOSITION TEST
========================================================= */

@media (min-width: 901px) {

	.tool-layout {
		position: relative;

		display: block;

		width: 100%;
		max-width: 900px;

		margin: 0 auto;
	}


	/* Main content stays on the right */

	.tool-content-column {
		width: 675px;
		margin-left: 225px;
	}


	/* Explorer becomes an editorial illustration */

	.tool-visual {
		position: absolute;

		left: -5px;
		top: -18px;

		width: 260px;
		height: 520px;

		padding: 0;

		display: flex;
		align-items: flex-start;
		justify-content: center;

		overflow: visible;

		z-index: 2;

		pointer-events: none;
	}


	.tool-visual img {
		display: block;

		width: 260px;
		max-width: none;
		height: auto;

		margin: 0;

		object-fit: contain;
	}


	/* Keep title and calculator as one visual column */

	.tool-layout .tool-header {
		width: 100%;

		margin: 0 0 24px;
		padding: 0;
	}


	.tool-layout .tool-workspace {
		width: 100%;
		max-width: none;

		margin: 0;
		padding: 30px;
	}


	/* No old temporary placeholder */

	.tool-layout .tool-workspace::before {
		content: none !important;
		display: none !important;
	}

}

/* =========================================================
   TOOL PAGE — LARGE EDITORIAL ILLUSTRATION
========================================================= */

@media (min-width: 901px) {

	.tool-layout {
		position: relative;

		max-width: 900px;
		min-height: 735px;

		margin: 0 auto;
	}


	/* Large editorial illustration */

	.tool-visual {
		position: absolute;

		left: -205px;
		top: -25px;

		width: 365px;
		height: auto;

		padding: 0;

		display: block;

		overflow: visible;

		z-index: 3;

		pointer-events: none;
	}


	.tool-visual img {
		display: block;

		width: 550px;
		max-width: none;
		height: auto;

		margin: 0;
	}


	/* Functional content column */

	.tool-content-column {
		position: relative;

		width: 675px;
		margin-left: 225px;

		z-index: 2;
	}


	/* Calculator */

	.tool-workspace {
		position: relative;

		z-index: 2;
	}

}


/* =========================================================
   RELATED TOOLS
========================================================= */

.related-tools {
	max-width: 900px;

	margin: 56px auto 0;
	padding-top: 32px;

	border-top: 1px solid #ddd5c5;
}

.related-tools .section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 24px;

	margin-bottom: 22px;
}

.related-tools .section-heading h2 {
	display: inline-block;

	margin: 0;

	padding: 13px 24px;

	background: #d6a62e;

	color: #173f30;

	border-radius: 0;

	font-size: 28px;
	line-height: 1.15;
}


.related-tools-category-link {
	color: #173f30;

	font-size: 15px;
	font-weight: 600;

	text-decoration: none;
}

.related-tools-category-link:hover {
	color: #b46a1d;
}

.related-tools-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.related-tool-card {
	padding: 22px;

	background: #fffdf8;

	border: 1px solid #ded8ca;
	border-radius: 8px;
}

.related-tool-card h3 {
	margin: 0 0 10px;

	font-size: 20px;
	line-height: 1.25;
}

.related-tool-card h3 a {
	color: #173f30;
	text-decoration: none;
}

.related-tool-card h3 a:hover {
	text-decoration: underline;
}

.related-tool-card p {
	margin: 0 0 16px;

	color: #536159;

	font-size: 15px;
	line-height: 1.55;
}

.related-tool-link {
	color: #173f30;

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;
}

.related-tool-link:hover {
	text-decoration: underline;
}


/* =========================================================
   SHARED LOWER TOOL NAVIGATION
========================================================= */

.tool-lower-navigation {
	max-width: 900px;

	margin: 56px auto 0;
}

.tool-lower-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

	gap: 18px;
}

.tool-lower-highlight {
	padding: 22px;

	background: #fffdf8;

	border: 1px solid #ded8ca;
	border-radius: 8px;
}

.tool-lower-highlight > span {
	display: block;

	margin-bottom: 10px;

	color: #b46a1d;

	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tool-lower-highlight h2 {
	margin: 0 0 16px;

	font-size: 23px;
	line-height: 1.25;
}

.tool-lower-highlight h2 a {
	color: #173f30;

	text-decoration: none;
}

.tool-lower-highlight h2 a:hover {
	text-decoration: underline;
}

.tool-explore-more {
	margin-top: 38px;
}


/* MOBILE */

@media (max-width: 700px) {

	.related-tools {
		margin-top: 38px;
		padding-top: 26px;
	}

	.tool-lower-navigation {
		margin-top: 38px;
	}

	.tool-lower-highlights {
		grid-template-columns: 1fr;
	}
	
	.related-tools .section-heading {
	align-items: flex-start;
	flex-direction: column;

	gap: 8px;
}

	.related-tools .section-heading h2 {
		font-size: 26px;
	}

	.related-tools-grid {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   TOOL PAGE — MOBILE EXPLORER PORTRAIT
========================================================= */

@media (max-width: 700px) {

	.tool-visual {
		position: relative;

		left: auto;
		top: auto;

		width: 100%;
		height: auto;

		margin: 0 auto 4px;

		display: flex;
		align-items: center;
		justify-content: center;

		overflow: visible;

		z-index: 1;
	}

	.tool-visual picture {
		display: block;

		width: 285px;
		height: auto;
	}

	.tool-visual img {
		display: block;

		width: 100%;
		max-width: 285px;
		height: auto;

		margin: 0 auto;
	}

}


/* =========================================================
   EXPLORER BRAND — HEADER
========================================================= */

.site-header {
	background: #fffdf8;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}


/* =========================================================
   BRAND
========================================================= */

.explorer-brand {
	position: relative;

	display: inline-block;

	padding-left: 78px;

	text-decoration: none;

	flex-shrink: 0;
}

.explorer-brand-text {
	display: grid;
	grid-template-columns: auto;

	line-height: 1;

	color: #102942;
}

.explorer-brand-the {
	display: block;

	margin-left: 9px;
	margin-bottom: 6px;

	font-family: "Libre Baskerville", Georgia, serif;
	font-size: 14px;
	font-weight: 700;

	letter-spacing: 0.44em;
	text-transform: uppercase;

	line-height: 1;
}

.explorer-brand-economy,
.explorer-brand-explorer {
	display: block;

	font-family: "Libre Baskerville", Georgia, serif;

	font-size: 44px;
	font-weight: 700;

	line-height: 0.92;
	letter-spacing: -0.035em;

	text-transform: uppercase;

	color: #285c46;
}


/* =========================================================
   COMPASS
========================================================= */

.explorer-brand-compass {
	position: absolute;

	left: -25px;
	top: 48%;
	transform: translateY(-50%);

	display: block;

	width: 125px;
	height: 125px;
	max-width: 125px;

	object-fit: contain;
}


/* =========================================================
   REMOVE OLD LOGO DECORATION
========================================================= */

.explorer-brand .logo-icon,
.explorer-brand .logo-name {
	display: none;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1051px) {

	.site-header .header-inner {
		min-height: 128px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.header-inner {
		gap: 14px;
	}

	.explorer-brand {
		padding-left: 42px;
	}

	.explorer-brand-the {
		margin-left: 4px;
		margin-bottom: 2px;

		font-size: 8px;
		letter-spacing: 0.22em;
	}

	.explorer-brand-economy,
	.explorer-brand-explorer {
		font-size: 18px;

		line-height: 0.9;
		letter-spacing: -0.02em;
	}

	.explorer-brand-compass {
		left: 0;
		top: 22px;

		width: 42px;
		height: 42px;
		max-width: 42px;
	}

}


/* =========================================================
   HOME HERO — NEW VISUAL DIRECTION
========================================================= */

.home-hero {
	background: #f5efe4;
}

.hero-content .eyebrow {
	color: #b46a1d;
	letter-spacing: 0.22em;
	font-weight: 700;
}

.hero-content h1 {
	color: #173f30;
}

.hero-description {
	color: #5f675f;
}

.hero-image-fixed img {
	border: 1px solid #d6c8ad;

	box-shadow:
		0 18px 38px rgba(40, 44, 36, 0.12);
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.home-hero .button-primary {
	background: #173f30
	border-color: #173f30
	color: #ffffff;
}

.home-hero .button-primary:hover {
	background: #173f30
	border-color: #173f30
}

.home-hero .button-secondary {
	background: #fffdf8;
	border-color: #d7cdbb;
	color: #173f30;
}

.home-hero .button-secondary:hover {
	background: #f3ecdf;
	border-color: #c7b99f;
	color: #173f30;
}

/* =========================================================
   HOME — THE TERRITORIES
========================================================= */

.territories-section {
	padding-top: 90px;
	padding-bottom: 96px;

	background: #fffdf8;
}

.territories-inner {
	max-width: 1040px;
	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.territories-header {
	max-width: 700px;
	margin-bottom: 42px;
}

.territories-header .eyebrow {
	margin: 0 0 12px;

	color: #b46a1d;

	font-size: 18px;
	font-weight: 800;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.territories-header h2 {
	margin: 0 0 14px;

	color: #173f30;

	font-family: var(--font-heading);

	font-size: clamp(46px, 5vw, 62px);
	line-height: 1.03;
}

.territories-intro {
	max-width: 650px;

	margin: 0;

	color: #5f6962;

	font-size: 18px;
	line-height: 1.6;
}


/* =========================================================
   TERRITORY GRID
========================================================= */

.territories-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 18px;
}


/* =========================================================
   TERRITORY CARDS
========================================================= */

.territory-item {
	position: relative;

	display: block;

	min-height: 0;

	padding: 24px 22px 22px;

	border: 1px solid rgba(23, 63, 48, 0.12);
	border-radius: 14px;

	overflow: hidden;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.territory-item:hover {
	transform: translateY(-3px);

	border-color: rgba(23, 63, 48, 0.22);

	box-shadow:
		0 12px 26px rgba(35, 43, 35, 0.09);
}


/* =========================================================
   TERRITORY COLORS — OCHRE + WARM GRAY
========================================================= */

/* OCRE CLARO */
.territory-item:nth-child(1) {
	background: rgba(212, 158, 25, 0.26);
}

/* CINZA CLARO */
.territory-item:nth-child(2) {
	background: rgba(20, 20, 20, 0.12);
}

/* OCRE MÉDIO */
.territory-item:nth-child(3) {
	background: rgba(205, 150, 15, 0.20);
}

/* CINZA MÉDIO */
.territory-item:nth-child(4) {
	background: rgba(20, 20, 20, 0.17);
}

/* OCRE CLARO */
.territory-item:nth-child(5) {
	background: rgba(212, 158, 25, 0.16);
}

/* CINZA CLARO */
.territory-item:nth-child(6) {
	background: rgba(20, 20, 20, 0.10);
}

/* OCRE MÉDIO */
.territory-item:nth-child(7) {
	background: rgba(205, 150, 15, 0.23);
}

/* CINZA MÉDIO */
.territory-item:nth-child(8) {
	background: rgba(20, 20, 20, 0.14);
}

/* CINZA MAIS FORTE */
.territory-item:nth-child(9) {
	background: rgba(20, 20, 20, 0.22);
}

/* OCRE MAIS FORTE */
.territory-item:nth-child(10) {
	background: rgba(205, 150, 15, 0.32);
}


/* =========================================================
   REMOVE OLD TERRITORY NUMBERS
========================================================= */

.territory-number {
	display: none;
}


/* =========================================================
   TERRITORY CONTENT
========================================================= */

.territory-content {
	display: flex;
	flex-direction: column;

	min-width: 0;
	height: 100%;
}

.territory-content h3 {
	margin: 0 0 10px;

	color: #173f30;

	font-family: var(--font-heading);

	font-size: 25px;
	line-height: 1.18;
}

.territory-content h3 a {
	color: inherit;
	text-decoration: none;
}

.territory-content h3 a:hover {
	color: #9d5f1d;
}

.territory-content p {
	margin: 0 0 16px;

	color: #55625a;

	font-size: 16px;
	line-height: 1.5;
}

.territory-link {
	display: inline-block;

	margin-top: auto;

	color: #a8621c;

	font-size: 15px;
	font-weight: 800;

	text-decoration: none;
}

.territory-link:hover {
	color: #173f30;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) and (min-width: 701px) {

	.territories-inner {
		max-width: 760px;
	}

	.territories-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.territories-section {
		padding-top: 60px;
		padding-bottom: 66px;
	}

	.territories-header {
		margin-bottom: 30px;
	}

	.territories-header .eyebrow {
		font-size: 15px;
		letter-spacing: 0.15em;
	}

	.territories-header h2 {
		font-size: 40px;
	}

	.territories-intro {
		font-size: 17px;
	}

	.territories-grid {
		grid-template-columns: 1fr;

		gap: 14px;
	}

	.territory-item {
		padding: 22px 20px;

		border-radius: 12px;
	}

	.territory-content h3 {
		font-size: 24px;
	}

	.territory-content p {
		font-size: 16px;
	}

	.territory-link {
		font-size: 15px;
	}

}

/* =========================================================
   HOME — FEATURED INSTRUMENTS
========================================================= */

.featured-tools-section {
	padding: 88px 0 92px;

	background: #fffdf8;
}

.featured-tools-inner {
	max-width: 1120px;
}


/* HEADER */

.featured-tools-header {
	max-width: 760px;

	margin-bottom: 44px;
}

.featured-tools-header .eyebrow {
	margin-bottom: 10px;

	color: #b46a1d;

	font-size: 14px;
	font-weight: 700;

	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.featured-tools-header h2 {
	margin: 0 0 16px;

	color: #173f30;

	font-family: var(--font-heading);

	font-size: clamp(38px, 4vw, 48px);
	line-height: 1.05;
}

.featured-tools-header > p:last-child {
	max-width: 670px;

	margin: 0;

	color: #657068;

	font-size: 18px;
	line-height: 1.65;
}


/* =========================================================
   TOOL CARDS
========================================================= */

.featured-tools-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 24px;
}

.featured-tool-card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	border: 1px solid #ddd5c6;
	border-radius: 8px;

	background: #f8f4ea;

	overflow: hidden;
}

.featured-tool-image {
	display: block;

	height: 210px;

	background: #eee8db;

	overflow: hidden;
}

.featured-tool-image img {
	width: 100%;
	height: 100%;

	object-fit: contain;

	padding: 12px;
}

.featured-tool-content {
	display: flex;
	flex-direction: column;

	flex: 1;

	padding: 26px;
}

.featured-tool-category {
	margin-bottom: 10px;

	color: #b46a1d;

	font-size: 14px;
	font-weight: 700;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.featured-tool-card h3 {
	margin: 0 0 14px;

	color: #173f30;

	font-family: var(--font-heading);

	font-size: 27px;
	line-height: 1.18;
}

.featured-tool-card h3 a {
	color: inherit;
}

.featured-tool-card p {
	margin: 0 0 20px;

	color: #626e66;

	font-size: 17px;
	line-height: 1.6;
}

.featured-tool-link {
	margin-top: auto;

	color: #b46a1d;

	font-size: 15px;
	font-weight: 700;
}

.featured-tool-link:hover {
	color: #173f30;
}


/* =========================================================
   VIEW ALL
========================================================= */

.featured-tools-all {
	margin-top: 34px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.featured-tools-empty {
	grid-column: 1 / -1;

	padding: 38px;

	border: 1px solid #ddd5c6;

	background: #f8f4ea;
}

.featured-tools-empty h3 {
	margin-top: 0;

	color: #173f30;

	font-size: 28px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.featured-tools-section {
		padding: 60px 0 64px;
	}

	.featured-tools-header {
		margin-bottom: 30px;
	}

	.featured-tools-header h2 {
		font-size: 38px;
	}

	.featured-tools-header > p:last-child {
		font-size: 17px;
	}

	.featured-tools-grid {
		grid-template-columns: 1fr;

		gap: 18px;
	}

	.featured-tool-image {
		height: 190px;
	}

	.featured-tool-content {
		padding: 22px;
	}

	.featured-tool-card h3 {
		font-size: 26px;
	}

}


/* =========================================================
   HOME — MEET THE EXPLORER
========================================================= */

.meet-explorer-section {
	padding: 96px 0;

	background: #f5efe4;
}

.meet-explorer-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 0.95fr)
		minmax(0, 1.05fr);

	align-items: center;

	gap: 72px;
}


/* =========================================================
   IMAGE
========================================================= */

.meet-explorer-image {
	position: relative;
}

.meet-explorer-image::before {
	content: "";

	position: absolute;

	left: -16px;
	top: -16px;

	width: 92px;
	height: 92px;

	border-left: 2px solid #c77a22;
	border-top: 2px solid #c77a22;

	pointer-events: none;
}

.meet-explorer-image img {
	display: block;

	width: 100%;
	height: 590px;

	object-fit: cover;
	object-position: center;

	border: 1px solid #d2c3aa;

	box-shadow:
		0 22px 46px rgba(37, 42, 34, 0.16);
}


/* =========================================================
   CONTENT
========================================================= */

.meet-explorer-content {
	max-width: 620px;
}

.meet-explorer-content .eyebrow {
	margin: 0 0 12px;

	color: #b46a1d;

	font-size: 14px;
	font-weight: 700;

	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.meet-explorer-content h2 {
	margin: 0 0 24px;

	color: #173f30;

	font-family: var(--font-heading);

	font-size: clamp(44px, 4vw, 52px);
	line-height: 1.02;
}

.meet-explorer-lead {
	max-width: 560px;

	margin: 0 0 22px;

	color: #173f30;

	font-family: var(--font-heading);

	font-size: 25px;
	font-weight: 600;
	line-height: 1.45;
}

.meet-explorer-content > p:not(.eyebrow):not(.meet-explorer-lead) {
	margin: 0 0 18px;

	color: #5e6860;

	font-size: 18px;
	line-height: 1.75;
}

.meet-explorer-link {
	display: inline-block;

	margin-top: 12px;

	color: #b46a1d;

	font-size: 16px;
	font-weight: 700;

	text-decoration: none;
}

.meet-explorer-link:hover {
	color: #173f30;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.meet-explorer-section {
		padding: 62px 0 66px;
	}

	.meet-explorer-grid {
		grid-template-columns: 1fr;

		gap: 38px;
	}

	.meet-explorer-image {
		max-width: 520px;

		margin: 0 auto;
	}

	.meet-explorer-image::before {
		left: -10px;
		top: -10px;

		width: 64px;
		height: 64px;
	}

	.meet-explorer-image img {
		height: auto;

		aspect-ratio: 1 / 1;

		object-fit: cover;
	}

	.meet-explorer-content {
		max-width: none;
	}

	.meet-explorer-content h2 {
		font-size: 40px;
	}

	.meet-explorer-lead {
		font-size: 22px;
	}

	.meet-explorer-content > p:not(.eyebrow):not(.meet-explorer-lead) {
		font-size: 17px;
	}

	.meet-explorer-link {
		font-size: 16px;
	}

}


/* =========================================================
   EXPLORER BRAND — TOOL COUNT
========================================================= */

.explorer-brand-tools {
	display: block;

	margin-top: 9px;

	color: #b46a1d;

	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.16em;
	text-transform: uppercase;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.explorer-brand-tools {
		margin-top: 5px;

		font-size: 9px;
		letter-spacing: 0.10em;
	}

}

/* =========================================================
   HEADER — BRAND SPACING FIX
========================================================= */

@media (min-width: 1051px) {

	.site-header .header-inner {
		min-height: 154px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.explorer-brand {
		margin-left: 18px;
	}

}

/* Centraliza a chamada sob as palavras do logo */
.explorer-brand-tools {
	margin-left: 30px;
}


/* =========================================================
   FIND YOUR TOOL — PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.find-tool-hero {
	padding: 78px 0 54px;

	background: #f5efe4;
	border-bottom: 1px solid #e4ddd0;
}

.find-tool-hero-inner {
	max-width: 1040px;
	margin: 0 auto;
}

.find-tool-hero .eyebrow {
	margin: 0 0 14px;

	color: #b46a1d;

	font-size: 13px;
	font-weight: 800;

	letter-spacing: 0.20em;
	text-transform: uppercase;
}

.find-tool-hero h1 {
	margin: 0 0 16px;

	color: #173f30;

	font-family: var(--font-heading);
	font-size: clamp(48px, 5vw, 66px);
	line-height: 1.02;
}

.find-tool-hero-inner > p:not(.eyebrow) {
	max-width: 620px;

	margin: 0 0 32px;

	color: #59655f;

	font-size: 19px;
	line-height: 1.6;
}


/* =========================================================
   SEARCH
========================================================= */

.tool-search-wrap {
	position: relative;

	max-width: 760px;
}

.tool-search-wrap::after {
	content: "⌕";

	position: absolute;
	top: 50%;
	right: 22px;

	transform: translateY(-52%);

	color: #b46a1d;

	font-size: 30px;
	line-height: 1;

	pointer-events: none;
}

#tool-search {
	display: block;

	width: 100%;
	height: 64px;

	padding: 0 64px 0 22px;

	border: 1px solid #d8cfbf;
	border-radius: 8px;

	background: #fffdf8;

	color: #173f30;

	font-family: inherit;
	font-size: 18px;

	outline: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

#tool-search::placeholder {
	color: #8a918c;
}

#tool-search:focus {
	border-color: #b46a1d;

	box-shadow:
		0 0 0 3px rgba(180, 106, 29, 0.10);
}


/* =========================================================
   TOOL BROWSER
========================================================= */

.tool-browser {
	max-width: 1120px;

	padding-top: 52px;
	padding-bottom: 100px;
}


/* =========================================================
   CATEGORY FILTERS
========================================================= */

.tool-category-filters {
	display: flex;
	flex-wrap: wrap;

	gap: 10px;

	margin-bottom: 42px;
}

.tool-filter {
	appearance: none;

	padding: 10px 16px;

	border: 1px solid #d8cfbf;
	border-radius: 999px;

	background: #fffdf8;

	color: #34483f;

	font-family: inherit;
	font-size: 14px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}

.tool-filter:hover {
	transform: translateY(-1px);

	border-color: #b46a1d;

	color: #9f5d18;
}

.tool-filter.is-active {
	border-color: #173f30;

	background: #173f30;

	color: #ffffff;
}


/* =========================================================
   TOOL GRID
========================================================= */

.find-tool-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 20px;
}


/* =========================================================
   TOOL CARD
========================================================= */

.find-tool-card {
	display: flex;
	flex-direction: column;

	min-height: 230px;

	padding: 26px;

	border: 1px solid #ddd5c8;
	border-radius: 12px;

	background: #fffdf8;

	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.find-tool-card:hover {
	transform: translateY(-3px);

	border-color: #c8bda9;

	box-shadow:
		0 14px 30px rgba(35, 43, 35, 0.08);
}

.find-tool-card[hidden] {
	display: none !important;
}


/* CATEGORY */

.find-tool-category {
	display: block;

	margin-bottom: 12px;

	color: #b46a1d;

	font-size: 11px;
	font-weight: 800;

	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* TITLE */

.find-tool-card h2 {
	margin: 0 0 12px;

	font-family: var(--font-heading);
	font-size: 27px;
	line-height: 1.15;
}

.find-tool-card h2 a {
	color: #173f30;

	text-decoration: none;
}

.find-tool-card h2 a:hover {
	color: #9f5d18;
}


/* DESCRIPTION */

.find-tool-card > p {
	margin: 0 0 22px;

	color: #606a64;

	font-size: 16px;
	line-height: 1.55;
}


/* OPEN TOOL */

.find-tool-link {
	display: inline-block;

	margin-top: auto;

	color: #b46a1d;

	font-size: 14px;
	font-weight: 800;

	text-decoration: none;
}

.find-tool-link:hover {
	color: #173f30;
}


/* =========================================================
   NO RESULTS
========================================================= */

.find-tool-no-results,
.find-tool-empty {
	padding: 46px 0;
}

.find-tool-no-results h2,
.find-tool-empty h2 {
	margin: 0 0 10px;

	color: #173f30;

	font-family: var(--font-heading);
	font-size: 30px;
}

.find-tool-no-results p,
.find-tool-empty p {
	margin: 0;

	color: #657068;

	font-size: 17px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.find-tool-hero {
		padding: 62px 0 46px;
	}

	.find-tool-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.find-tool-hero {
		padding: 48px 0 40px;
	}

	.find-tool-hero h1 {
		font-size: 42px;
	}

	.find-tool-hero-inner > p:not(.eyebrow) {
		margin-bottom: 26px;

		font-size: 17px;
	}

	#tool-search {
		height: 58px;

		font-size: 16px;
	}

	.tool-browser {
		padding-top: 36px;
		padding-bottom: 70px;
	}

	.tool-category-filters {
		gap: 8px;

		margin-bottom: 32px;
	}

	.tool-filter {
		padding: 9px 13px;

		font-size: 13px;
	}

	.find-tool-grid {
		grid-template-columns: 1fr;

		gap: 15px;
	}

	.find-tool-card {
		min-height: 0;

		padding: 22px;
	}

	.find-tool-card h2 {
		font-size: 25px;
	}

}


/* =========================================================
   FOOTER — COMPACT LAYOUT
========================================================= */

.site-footer {
	padding-top: 52px;
	padding-bottom: 28px;
}

.footer-grid {
	margin-bottom: 34px;
}

.footer-brand h2 {
	margin-bottom: 16px;
}

.footer-brand p {
	margin-bottom: 12px;
}

.site-footer h3 {
	margin-bottom: 18px;
}

.site-footer ul {
	margin: 0;
}

.site-footer li {
	margin-bottom: 10px;
}

.footer-bottom {
	margin-top: 0;
	padding-top: 24px;
}

.footer-copyright {
	margin-bottom: 10px;
}

.footer-contact {
	margin-bottom: 0;
}


/* Links de navegação da página da ferramenta */

.tool-top-navigation a {
	color: #4f8067;
}

.tool-top-navigation a:hover {
	color: #b46a1d;
}


/* =========================================================
   TOOL PAGE — FULL-WIDTH PROGRAMMABLE CANVAS

   The Tool content is intentionally unstyled here. Each
   individual Tool may supply its own layout and visual system.
   Structural navigation, explanation dialog, lower navigation
   and footer remain outside this canvas.
========================================================= */

.tool-page .tool-layout {
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	display: block;
}

/* Featured images are not structural Tool artwork. */
.tool-page .tool-visual {
	display: none;
}

.tool-page .tool-content-column {
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* Keep the structural title and explanation control readable. */
.tool-page .tool-layout .tool-header {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 24px;
	padding: 0;
}

/* The programmable Tool itself receives no visual wrapper. */
.tool-page .tool-layout .tool-workspace {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 700px) {

	.tool-page .tool-layout .tool-header {
		margin-bottom: 20px;
	}
}


/* =========================================================
   TOOL PAGE — COMMERCIAL DESTINATION

   Future adult and young-explorer product collections will
   replace only the placeholder markup in the template part.
========================================================= */

.tool-store {
	scroll-margin-top: 132px;
	margin-top: 52px;
}

.tool-store-placeholder {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 28px;

	background: #fffdf8;
	border: 1px solid #ded8ca;
	border-radius: 8px;

	text-align: center;
}

.tool-store-placeholder h2 {
	margin: 0;

	color: #173f30;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.25;
}

.tool-store-placeholder p {
	margin: 8px 0 0;

	color: #536159;
	font-size: 16px;
	line-height: 1.55;
}

@media (max-width: 700px) {

	.tool-store {
		scroll-margin-top: 96px;
		margin-top: 38px;
	}

	.tool-store-placeholder {
		padding: 20px 18px;
	}
}




/* =========================================================
   THE TERRITORIES — INTERACTIVE ATLAS
========================================================= */

.territories-atlas-section {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: #efe2c5;
}

.territories-atlas-wrap {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	line-height: 0;
}

.territories-atlas-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}


/* ---------------------------------------------------------
   MEDALLION LAYER
--------------------------------------------------------- */

.territories-medallions {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.territory-medallion {
	position: absolute;
	display: block;
	width: 16.5%;
	height: auto;
	line-height: 0;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	pointer-events: auto;
	z-index: 2;
	outline: none;
}

.territory-medallion img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	filter: drop-shadow(0 4px 5px rgba(39, 27, 10, 0.22));
	transition:
		transform 220ms ease,
		filter 220ms ease;
}


/* ---------------------------------------------------------
   MEDALLION POSITIONS
   Fine-tuned individually to align each hover medallion
   with its printed counterpart on the atlas.
--------------------------------------------------------- */

.territory-medallion-01 {
	left: 28.8%;
	top: 31.2%;
}

.territory-medallion-02 {
	left: 55.9%;
	top: 32.2%;
}

.territory-medallion-03 {
	left: 85.5%;
	top: 35.6%;
}

.territory-medallion-04 {
	left: 25.7%;
	top: 57%;
}

.territory-medallion-05 {
	left: 52.7%;
	top: 56%;
}

.territory-medallion-06 {
	left: 78.5%;
	top: 55%;
}

.territory-medallion-07 {
	left: 23.1%;
	top: 80%;
}

.territory-medallion-08 {
	left: 45.7%;
	top: 81.8%;
}

.territory-medallion-09 {
	left: 67.9%;
	top: 80.5%;
}

.territory-medallion-10 {
	left: 92.1%;
	top: 81.0%;
}



/* ---------------------------------------------------------
   HOVER / KEYBOARD FOCUS
--------------------------------------------------------- */

.territory-medallion:hover,
.territory-medallion:focus-visible {
	z-index: 20;
}

.territory-medallion:hover img,
.territory-medallion:focus-visible img {
	transform: translateY(-4%) scale(1.32);
	filter:
		drop-shadow(0 12px 10px rgba(39, 27, 10, 0.30))
		drop-shadow(0 3px 3px rgba(39, 27, 10, 0.24));
}


/* ---------------------------------------------------------
   ACCESSIBLE KEYBOARD FOCUS
--------------------------------------------------------- */

.territory-medallion:focus-visible img {
	outline: 3px solid #b78327;
	outline-offset: 4px;
	border-radius: 50%;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

	.territory-medallion {
		width: 13.5%;
	}

	.territory-medallion:hover img,
	.territory-medallion:focus-visible img {
		transform: translateY(-3%) scale(1.25);
	}

}

/* ---------------------------------------------------------
   MOBILE — THE TERRITORIES
--------------------------------------------------------- */

.territories-mobile {
	display: none;
}


@media (max-width: 1050px) {

	/* Hide the desktop atlas and its interactive layer */

	.territories-atlas-wrap > .territories-atlas-image,
	.territories-atlas-wrap > .territories-medallions {
		display: none;
	}


	/* Mobile Territories section */

	.territories-atlas-section {
		padding: 52px 20px 60px;

		background: #f5efe4;
	}


	.territories-atlas-wrap {
		max-width: 100%;
	}


	.territories-mobile {
		display: block;

		width: 100%;
		max-width: 520px;

		margin: 0 auto;

		line-height: normal;
	}


	/* -----------------------------------------------------
	   MOBILE INTRO
	----------------------------------------------------- */

	.territories-mobile-header {
		margin-bottom: 32px;
	}


	.territories-mobile-header .eyebrow {
		margin-bottom: 8px;
	}


	.territories-mobile-header h2 {
		margin: 0 0 12px;

		color: #173f30;

		font-family: var(--font-heading);
		font-size: 34px;
		line-height: 1.12;
	}


	.territories-mobile-header p:last-child {
		margin: 0;

		max-width: 440px;

		color: #536159;

		font-size: 16px;
		line-height: 1.6;
	}


	/* -----------------------------------------------------
	   MEDALLION GRID
	----------------------------------------------------- */

	.territories-mobile-list {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 20px 12px;

		align-items: center;
	}


	.territories-mobile-item {
		display: flex;

		align-items: center;
		justify-content: center;

		min-width: 0;

		padding: 0;

		background: transparent;
		border: 0;

		text-decoration: none;
	}


	.territories-mobile-item img {
		display: block;

		width: 100%;
		max-width: 170px;
		height: auto;

		margin: 0;

		filter:
			drop-shadow(
				0 4px 5px
				rgba(39, 27, 10, 0.20)
			);

		transition:
			transform 180ms ease,
			filter 180ms ease;
	}


	/* The category name already exists inside the medallion */

	.territories-mobile-item span {
		display: none;
	}


	/* Small tactile effect when tapped */

	.territories-mobile-item:active img {
		transform: scale(1.06);

		filter:
			drop-shadow(
				0 8px 8px
				rgba(39, 27, 10, 0.26)
			);
	}

}

/* =========================================================
   FINAL RESPONSIVE NAVIGATION
========================================================= */

.mobile-menu-toggle {
	display: none !important;
}




/* =========================================================
   MOBILE NAVIGATION
   700px AND BELOW
========================================================= */

@media (max-width: 1050px) {

	.site-header {
		overflow: visible;
	}


	/* -----------------------------------------------------
	   HEADER
	----------------------------------------------------- */

	.header-inner {
		display: grid !important;

		grid-template-columns:
			minmax(0, 1fr) auto;

		align-items: center !important;

		gap: 16px !important;

		min-height: 76px !important;

		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}


	.site-logo {
		margin: 0 !important;
		justify-self: start;
	}


	/* -----------------------------------------------------
	   HAMBURGER BUTTON
	----------------------------------------------------- */

	.mobile-menu-toggle {
		display: flex !important;

		width: 48px;
		height: 48px;

		padding: 0;

		flex-direction: column;
		align-items: center;
		justify-content: center;

		gap: 6px;

		justify-self: end;

		background: #f7f1e5;

		border: 1px solid #d9cdb6;
		border-radius: 8px;

		cursor: pointer;
	}


	.mobile-menu-toggle span {
		display: block;

		width: 23px;
		height: 2px;

		background: #173f30;

		border-radius: 999px;

		transition:
			transform 180ms ease,
			opacity 180ms ease;
	}


	/* Hamburger → X */

	.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}


	/* -----------------------------------------------------
	   CLOSED NAVIGATION
	----------------------------------------------------- */

	.main-navigation {
		display: none !important;

		grid-column: 1 / -1;

		position: static !important;

		width: 100% !important;

		margin: 0 !important;

		overflow: visible !important;

		background: #ffffff !important;

		border: 0 !important;
		border-top: 1px solid #ddd5c5 !important;

		box-shadow: none !important;
	}


	/* JavaScript adds .is-open */

	.main-navigation.is-open {
		display: block !important;
	}


	/* -----------------------------------------------------
	   OPEN MENU
	----------------------------------------------------- */

	.primary-menu {
		display: grid !important;

		grid-template-columns: 1fr;

		width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 8px 0 10px !important;

		gap: 0 !important;

		list-style: none;
	}


	.primary-menu li {
		display: block !important;

		width: 100% !important;

		text-align: left;
	}


	.primary-menu a,
	.primary-menu .menu-start a {
		display: flex !important;

		align-items: center;
		justify-content: flex-start;

		width: 100% !important;
		min-height: 44px !important;

		margin: 0 !important;
		padding: 9px 8px !important;

		background: transparent !important;
		color: #173f30 !important;

		font-size: 14px !important;
		font-weight: 600;
		line-height: 1.2;

		white-space: normal !important;

		border: 0 !important;
		border-radius: 0 !important;
	}


	.primary-menu a:hover,
	.primary-menu .menu-start a:hover {
		background: #f7f1e5 !important;
		color: #b46a1d !important;
	}

}

/* =========================================================
   RESPONSIVE HEADER — SMALL CLEANUP
========================================================= */




/* Give the hero breathing room below the mobile navigation */

@media (max-width: 1050px) {

	.home-hero {
		padding-top: 22px;
	}

}