/* ===========================================================
   RESOURCES CENTER + PILLAR PAGE — SHARED STYLES
   Built on top of your existing Bootstrap grid (.container,
   .row, .col-sm/.col-md/.col-lg). Cosmetics kept minimal on
   purpose — colors/fonts/spacing scale are easy to swap once
   this is wired into the theme. Breakpoints match Bootstrap:
   >=992px desktop, 768-991px tablet, <768px mobile.
=========================================================== */

:root {
	--c-navy: #0a2647;
	--c-blue: #1768d1;
	--c-light-bg: #f4f7fb;
	--c-border: #e1e6ee;
	--c-text: #2c2c2c;
	--c-text-muted: #6b7280;
	--radius: 6px;
	--gap: 24px;
}

.c-navy {
	color:#1768d1;
}

#resources-archive,
#pillar-page {
	color: var(--c-text);
}

#resources-archive img,
#pillar-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

.section-title {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.section-title-center {
	text-align: center;
	margin-bottom: 32px;
}

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

.section-heading-center {
	text-align: center;
	margin-bottom: 36px;
}

/* HR separator between heading and subtitle */
.section-divider {
	width: 48px;
	border: none;
	border-top: 3px solid #1768d1;
	margin: 12px auto 16px;
	opacity:1;
}

.btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}

.btn-primary {
	background: var(--c-blue);
	color: #fff;
}

.btn-outline {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
}

/* Checklist — used in Why Trust box */
.checklist {
	list-style: none;
	padding: 0;
	margin: 16px 0;
}

.checklist li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
	font-size: 0.92rem;
}

.checklist li::before {
	content: "\f00c"; /* FA check */
	font-family: FontAwesome;
	font-size: 0.8rem;
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--c-blue);
	font-weight: 900;
}

/* -----------------------------------------------------------
   HERO — Archive page (bg-image div)
----------------------------------------------------------- */
.resources-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 90px 0;
	color: #fff;
}

.resources-hero .overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 38, 71, 0.99) 0%, rgba(10, 38, 71, 0.40) 65%);
}

.resources-hero .container {
	position: relative;
	z-index: 1;
}

.resources-hero-inner {
	max-width: 540px;
}

.resources-hero-inner .entry-title {
	font-size: 3rem;
}

.resources-hero-inner .hero-subheading {
	margin-bottom: 24px;
	font-size: 1.35rem;
	font-weight:600;
}

.hero-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.cta-button-2 a {
	color: white !important;
    background: #45c2ec !important;
    padding: 14px 25px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all .3s ease;
    display: inline-block;
    font-family: "Evogria" !important;
    text-decoration: none !important;
	margin-right:7px;
	font-size:.85rem;
}

.cta-button-2 a:hover {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9);
    transform: rotate(-2deg);
}

/* -----------------------------------------------------------
   HERO — Pillar page (bg-image + overlay)
----------------------------------------------------------- */
.pillar-hero {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #fff;
	background-size: cover;
	background-position: center;
}

.pillar-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 38, 71, 0.99) 0%, rgba(10, 38, 71, 0.40) 65%);
	z-index: 1;
}

.pillar-hero .container {
	position: relative;
	z-index: 2;
}

.pillar-hero-inner {
	max-width: 600px;
	padding: 60px 0;
}

.pillar-hero-inner .entry-title {
	font-size: 3rem;
	line-height: 1.2;
}

.pillar-hero-inner .hero-subheading {
	margin-bottom: 24px;
	font-size: 1.35rem;
	font-weight:600;
}

/* -----------------------------------------------------------
   STATS BAR
----------------------------------------------------------- */
.pillar-stats {
	background: var(--c-navy);
	color: #fff;
	padding: 24px 0;
}

.pillar-stats .row {
	row-gap: 20px;
}

.stat-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.stat-item img {
	flex-shrink: 0;
	width: 42px;
}

.stat-item h4 {
	font-size: 0.95rem;
	margin: 0 0 4px;
}

.stat-item p {
	font-size: 0.82rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
}

/* -----------------------------------------------------------
   TOPIC CARDS (Archive grid)
----------------------------------------------------------- */
.resources-topics {
	padding: 40px 0 70px 0;
}

.resources-topics .section-title {
	margin-bottom:10px;
}

.topics-row {
	row-gap: var(--gap);
}

.topic-card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

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

.topic-card-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* 2-col flex layout: icon left, all content right */
.topic-card-inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 1;
}

.topic-card-icon-col {
	flex-shrink: 0;
	padding-top: 2px;
}

/* Slightly bigger circular badge */
.topic-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	flex-shrink: 0;
}

.topic-icon img {
	width: 100%;
	height: 100%;
}

.topic-card-content-col {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.topic-card-content-col h3 {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
}

.topic-card-subtitle {
	font-size: 0.85rem;
	color: var(--c-text-muted);
	margin: 0 0 10px;
	line-height: 1.4;
}

.topic-card-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.topic-card-heading h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}


.topic-link-list {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	flex: 1;
}

.topic-link-list li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 6px;
	font-size: 0.88rem;
}

.topic-link-list li::before {
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 0.7rem;
	position: absolute;
	left: 0;
	top: 3px;
	color: var(--c-blue);
	font-weight: 900;
}

.topic-link-list a {
	color: var(--c-text);
	text-decoration: none;
}

.topic-link-list a:hover {
	color: var(--c-blue);
}

.view-all-link {
	font-weight: 700;
	color: var(--c-blue);
	text-decoration: none;
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* -----------------------------------------------------------
   FEATURED GUIDE (Archive)
----------------------------------------------------------- */
.resources-featured {
	padding: 0 0 70px;
}

.featured-guide-card {
	background: var(--c-light-bg);
	border-radius: var(--radius);
	padding: 32px;
}

.featured-guide-card .row {
	align-items: stretch;
}

.featured-guide-image {
	height: 100%;
}

.featured-guide-image img {
	border-radius: var(--radius);
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height:300px;
}

.featured-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-blue);
	margin-bottom: 8px;
}

.featured-guide-content h3 {
	font-size: 1.6rem;
	margin: 0 0 12px;
}

/* Fix wysiwyg output: strip browser default bullets, apply checkmark via ::before */
.featured-bullets ul {
	list-style: none;
	padding: 0;
	margin: 12px 0 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 24px;
}

.featured-bullets ul li {
	position: relative;
	padding-left: 22px;
	font-size: 0.9rem;
}

.featured-bullets ul li::before {
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 0.75rem;
	position: absolute;
	left: 0;
	top: 3px;
	color: var(--c-blue);
	font-weight: 900;
}

/* -----------------------------------------------------------
   BOTTOM CTA BAR — shared base
----------------------------------------------------------- */
.resources-bottom-cta,
.pillar-bottom-cta {
	background: var(--c-navy);
	color: #fff;
	padding: 50px 0;
}

.resources-bottom-cta h3,
.pillar-bottom-cta h3 {
	margin: 0 0 6px;
	font-size: 1.7rem;
	line-height: 1.2;
}

.pillar-bottom-cta p {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.92rem;
}

/* -----------------------------------------------------------
   RESOURCES CTA — specific layout overrides
----------------------------------------------------------- */
.resources-bottom-cta {
	position: relative;
	overflow: hidden;
	padding: 50px 0;
}

/* Content: flex ROW — [icon+copy] | [divider] | [contact rows] */
.resources-cta-content {
	max-width: 60%;
	display: flex;
	align-items: center;
	gap: 0;
}

/* Icon + copy as flex row */
.resources-cta-top {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex: 1;
	margin-bottom: 0;
	padding-right: 40px;
}

.resources-cta-icon {
	flex-shrink: 0;
}

.resources-cta-icon img {
	width: 90px;
	height: auto;
}

.resources-cta-copy h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.2;
	color: #fff;
}

.resources-cta-copy p {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.8);
}

/* Contact rows — separated by vertical divider */
.resources-cta-contacts {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-shrink: 0;
	padding-left: 40px;
	border-left: 1px solid rgba(255,255,255,0.2);
}

/* Each row: flex ROW — icon col | label+detail col */
.resources-cta-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.resources-cta-row-icon {
	font-size: 1.4rem;
	color: #fff;
	width: 28px;
	text-align: center;
	flex-shrink: 0;
}

.resources-cta-row-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.resources-cta-row-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255,255,255,0.6);
}

.resources-cta-row-detail {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.resources-cta-row-detail:hover {
	text-decoration: underline;
}

/* Photo: absolutely positioned on right, full section height */
.resources-cta-photo-abs {
	position: absolute;
	top: 0;
	right: 0;
	width: 42%;
	height: 100%;
	z-index: 0;
}

.resources-cta-photo-abs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradient fades photo into navy on left edge */
.resources-cta-photo-fade {
	position: absolute;
	top: 0;
	left: 0;
	width: 65%;
	height: 100%;
	background: linear-gradient(to right, var(--c-navy) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

/* Container sits above photo */
.resources-bottom-cta .container {
	position: relative;
	z-index: 2;
}

/* Stacked phone / email blocks */
.cta-contact-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.cta-contact-icon {
	font-size: 1.8rem !important;
	color: #fff;
	margin-bottom: 4px;
}

h3 {
	margin-bottom:10px !important;
}

.cta-contact-label {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.65);
}

.cta-contact-detail {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	word-break: break-all;
}

.cta-contact-detail:hover {
	text-decoration: underline;
}

/* Button col */
.cta-btn-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.cta-btn-col .btn {
	text-align: center;
}

.cta-secondary-link {
	display: block;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.88rem;
}

/* -----------------------------------------------------------
   TOC ROW (Pillar)
   #5: FA checkmark list items, blue
   #6: 2-col layout only, both equal height
----------------------------------------------------------- */
.pillar-toc {
	padding: 50px 0;
	background: var(--c-light-bg);
}

.toc-box,
.toc-cta-box {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 24px;
	height: 100%;
	box-sizing: border-box;
}

.toc-box h4,
.toc-cta-box h4 {
	margin-top: 0;
	margin-bottom:15px
}

/* #5 TOC list with FA checkmark */
.toc-link-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
}

.toc-link-list li {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 0.92rem;
}

.toc-link-list li i {
	color: var(--c-blue);
	font-size: 0.75rem;
	flex-shrink: 0;
	margin-top: 1px;
}

.toc-link-list a {
	color: var(--c-blue);
	text-decoration: none;
	font-weight:600;
}

.toc-cta-box {
	background: var(--c-navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.toc-cta-box p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.92rem;
}

/* -----------------------------------------------------------
   INTRO / "What is X" (Pillar)
   #7: heading explicitly left-aligned
----------------------------------------------------------- */
.pillar-intro {
	padding: 70px 0;
}

.intro-heading {
	text-align: left !important;
}

.intro-image img {
	border-radius: var(--radius);
}

/* -----------------------------------------------------------
   WHY CHOOSE icon cards (Pillar)
   #3: constrain icon to small size matching mockup
----------------------------------------------------------- */
.pillar-why-choose {
	padding: 60px 0;
	background: var(--c-light-bg);
}

.why-choose-card {
	text-align: center;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 20px 12px;
	height: 100%;
	margin-bottom: var(--gap);
}

/* #3: icon size fix */
.why-choose-card img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	margin: 0 auto 10px;
}

.why-choose-card h4 {
	font-size: 0.9rem;
	margin: 0 0 6px;
}

.why-choose-card p {
	font-size: 0.82rem;
	color: var(--c-text-muted);
	margin: 0;
}

/* -----------------------------------------------------------
   APPLICATIONS cards (Pillar)
----------------------------------------------------------- */
.pillar-applications {
	padding: 60px 0;
}

.application-card {
	margin-bottom: var(--gap);
}

.application-card img {
	border-radius: var(--radius);
	margin-bottom: 10px;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.application-card h4 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 4px;
}

.application-card p {
	font-size: 0.85rem;
	color: var(--c-text-muted);
	margin: 0;
}

/* -----------------------------------------------------------
   COMPARISON TABLE + COST GUIDE (Pillar)
----------------------------------------------------------- */
.pillar-comparison {
	padding: 60px 0;
}

.comparison-table-wrap {
	overflow-x: auto;
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
}

.comparison-table th,
.comparison-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	font-size: 0.92rem;
}

.comparison-table thead th {
	background: var(--c-light-bg);
	font-weight: 700;
}

.cost-guide-box {
	position: relative;
	border-radius: var(--radius);
	background-size: cover;
	background-position: center;
	min-height: 280px;
	height: 100%;
	display: flex;
	align-items: flex-end;
	color: #fff;
	overflow: hidden;
}

.cost-guide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 38, 71, 0.2) 0%, rgba(10, 38, 71, 0.92) 100%);
}

.cost-guide-content {
	position: relative;
	z-index: 1;
	padding: 28px;
}

.cost-guide-content h4 {
	margin: 0 0 8px;
}

.cost-guide-content p {
	font-size: 0.9rem;
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------------------
   PACKAGES + INSTALL SIDEBAR (Pillar)
   #8: install items as flex row — icon left, text right
----------------------------------------------------------- */
.pillar-packages {
	padding: 60px 0;
	background: var(--c-light-bg);
}

.install-sidebar {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 30px;
}

.install-sidebar h4 {
	margin-top: 0;
	font-size: 1.3rem;
	margin-bottom: 16px;
}

.install-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.install-sidebar ul li {
	padding:10px 0;
}

/* #8: icon + text as row */
.install-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}

.install-item:last-child {
	margin-bottom: 0;
}

.install-item-icon {
	flex-shrink: 0;
}

/* #8: smaller icons in sidebar */
.install-item-icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.install-item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.install-item-text strong {
	font-size: 0.9rem;
	display: block;
	line-height: 1.3;
}

.install-item-text span {
	font-size: 0.8rem;
	color: var(--c-text-muted);
	display: block;
}

/* -----------------------------------------------------------
   EXPLORE MORE GUIDES (Pillar)
   #9: subtle border card, icon left col / text right col
----------------------------------------------------------- */
.pillar-explore-guides {
	padding: 60px 0;
}

.pillar-explore-guides .section-title {
	margin-bottom: 24px;
}

.explore-row {
	row-gap: 16px;
}

.explore-guide-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	height: 100%;
	background: #fff;
}

.explore-guide-icon {
	flex-shrink: 0;
}

.explore-guide-icon img {
	width: 45px;
	height: 45px;
	object-fit: contain;
}

.explore-guide-text {
	flex: 1;
}

.explore-guide-text h4 {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--c-blue);
}

.explore-guide-text h4 > a {
	font-size:1.2rem;
}

.explore-guide-text p {
	font-size: 0.82rem;
	color: var(--c-text-muted);
	margin: 0;
}

/* -----------------------------------------------------------
   FAQ + TRUST BOX (Pillar)
   #11: FAQ heading left-aligned
----------------------------------------------------------- */
.pillar-faq {
	padding: 60px 0;
	background: var(--c-light-bg);
}

.pillar-faq  .cta-button-2 {
	margin-top:15px;
}

.pillar-faq a.btn {
	display:inline-block;
	margin-top:20px;
}

.faq-heading {
	text-align: left !important;
}

.faq-item {
	border-bottom: 1px solid var(--c-border);
}

.faq-question {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 16px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	color: var(--c-text);
}

.faq-toggle {
	font-size: 1.2rem;
	line-height: 1;
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: 12px;
}

.faq-item.is-open .faq-toggle {
	transform: rotate(45deg);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.faq-item.is-open .faq-answer {
	max-height: 400px;
}

.faq-answer p {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var(--c-text-muted);
}

.why-trust-box {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 24px;
}

.why-trust-box h4 {
	margin-top: 0;
}


/* ===========================================================
   PACKAGE CARDS SECTION
=========================================================== */

.package-cards-section {
	padding: 60px 0;
	background: #fff;
}

.package-cards-row {
	row-gap: 24px;
}

/* Entire card is an <a> */
.package-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	min-height: 320px;
	text-decoration: none;
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.package-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.3);
	color: #fff;
}

/* Blue gradient overlay — heavier at bottom where text sits */
.package-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(23, 104, 209, 0.15) 0%,
		rgba(10, 38, 71, 0.6) 40%,
		rgba(10, 38, 71, 0.95) 100%
	);
	transition: background 0.2s ease;
}

.package-card:hover .package-card-overlay {
	background: linear-gradient(
		to bottom,
		rgba(23, 104, 209, 0.25) 0%,
		rgba(10, 38, 71, 0.7) 40%,
		rgba(10, 38, 71, 0.98) 100%
	);
}

/* Text content sits above overlay */
.package-card-content {
	position: relative;
	z-index: 1;
	padding: 24px;
}

.package-card-content h3 {
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	color: #fff;
}

.package-card-content p {
	font-size: 0.88rem;
	color: rgba(255,255,255,0.85);
	margin: 0 0 16px;
	line-height: 1.5;
}

.package-card-cta {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1ba8e0;
	transition: color 0.2s ease;
}

.package-card:hover .package-card-cta {
	color: #fff;
}

/* -----------------------------------------------------------
   Responsive
----------------------------------------------------------- */
@media (max-width: 991px) {
	.package-card {
		min-height: 280px;
	}
}

@media (max-width: 767px) {
	.package-cards-section {
		padding: 40px 0;
	}

	.package-card {
		min-height: 240px;
	}
}
 
/* ===========================================================
   RESPONSIVE OVERRIDES
=========================================================== */

/* Tablet: <= 991px */
@media (max-width: 991px) {
	
	.featured-guide-image img {
		min-height:unset;
	}
	
	.cta-button-2 a {
		margin-bottom:7px;
	}
	
	.resources-hero-inner .entry-title,
	.pillar-hero-inner .entry-title {
		font-size: 2.5rem;
	}

	.cta-contact-row {
		justify-content: flex-start;
	}

	.cta-secondary-link {
		text-align: left;
	}

	.stat-item {
		margin-bottom: 4px;
	}

	.toc-link-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* Mobile: <= 767px */
@media (max-width: 767px) {
	.resources-hero,
	.pillar-hero {
		padding: 50px 0;
		min-height: 0;
	}

	.pillar-hero-inner {
		padding: 40px 0;
	}

	.resources-hero-inner .entry-title,
	.pillar-hero-inner .entry-title {
		font-size: 2.2rem;
	}

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

	.hero-buttons .btn {
		text-align: center;
	}

	.section-title {
		font-size: 1.45rem;
	}

	.resources-topics,
	.pillar-intro,
	.pillar-why-choose,
	.pillar-applications,
	.pillar-comparison,
	.pillar-packages,
	.pillar-explore-guides,
	.pillar-faq {
		padding: 40px 0;
	}

	.featured-guide-card {
		padding: 20px;
	}

	.featured-guide-image {
		margin-bottom: 20px;
	}

	/* Featured bullets single col on mobile */
	.featured-bullets ul {
		grid-template-columns: 1fr;
	}

	/* Resources CTA: stack content, hide abs photo */
	.resources-cta-content {
		max-width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.resources-cta-top {
		padding-right: 0;
	}

	.resources-cta-contacts {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid rgba(255,255,255,0.2);
		padding-top: 24px;
		width: 100%;
	}

	.resources-cta-photo-abs {
		display: none;
	}

	/* CTA: heading full width, phone/email side by side, button full width */
	.pillar-bottom-cta .col-sm-12 {
		margin-bottom: 20px;
	}

	.pillar-bottom-cta .col-sm-12:last-child {
		margin-bottom: 0;
	}

	.cta-btn-col {
		padding-top:2rem;
		align-items: stretch;
	}

	.cta-secondary-link {
		text-align: center;
	}

	/* TOC: stack boxes, single col links */
	.toc-box,
	.toc-cta-box {
		margin-bottom: var(--gap);
	}

	.toc-link-list {
		grid-template-columns: 1fr;
	}

	/* Cost guide below table on mobile */
	.cost-guide-box {
		margin-top: var(--gap);
		min-height: 220px;
	}

	/* Install sidebar drops below products */
	.install-sidebar {
		margin-top: var(--gap);
	}

	/* Explore cards go single col on small screens */
	.explore-guide-card {
		margin-bottom: 0;
	}

	.faq-question {
		font-size: 0.9rem;
	}

	/* Why trust box drops below FAQ */
	.why-trust-box {
		margin-top: var(--gap);
	}
}

/* Small phones: <= 480px */
@media (max-width: 480px) {
	.resources-hero-inner .entry-title,
	.pillar-hero-inner .entry-title {
		font-size: 2rem;
	}

	.stat-item {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.why-choose-card,
	.application-card {
		margin-bottom: 16px;
	}

	.toc-link-list {
		grid-template-columns: 1fr;
	}
}