/* =============================================================
   Northland Painters 2026 — theme styles (loaded after Bootstrap)
   Font: Poppins | Brand: teal / navy / magenta
   ============================================================= */

:root {
	--np-teal:      #00c6ca;  /* accent */
	--np-teal-2:    #00a9ad;  /* accent hover */
	--np-navy:      #0b354e;  /* headings / dark sections */
	--np-magenta:   #9b2daf;  /* primary button */
	--np-ink:       #323232;  /* body text */
	--np-grey:      #f3f5f6;  /* feature-box band */
	--np-grey-2:    #f9fafa;  /* footer band */
	--np-line:      #dbdbdb;
	--np-header-h:  108px;
}

body {
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--np-ink);
	font-size: 1rem;
	line-height: 1.7;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
	color: var(--np-navy);
	font-weight: 700;
}

a { text-decoration: none; }

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

.teal { color: var(--np-teal) !important; }

/* Brand pill button */
.btn-brand {
	display: inline-block;
	background-color: var(--np-magenta);
	color: #fff;
	border: 0;
	border-radius: 22px;
	font-weight: 700;
	font-size: 1.0625rem;
	padding: 0.85rem 2.4rem;
	text-transform: capitalize;
	transition: background-color .3s ease, color .3s ease;
}
.btn-brand:hover,
.btn-brand:focus { background-color: var(--np-navy); color: #fff; }

/* Section heading pieces */
.eyebrow {
	color: var(--np-teal);
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 0.75rem;
	text-transform: capitalize;
}
.subtitle-line {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 0.9rem;
}
.subtitle-line span {
	width: 59px;
	height: 1px;
	background: var(--np-teal);
	flex: 0 0 auto;
}
.subtitle-line .eyebrow { margin: 0; }
.text-center .subtitle-line { justify-content: center; }

.section-title {
	color: var(--np-navy);
	font-weight: 700;
	line-height: 1.2;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin-bottom: 1.25rem;
}
.section-title :is(strong, b),
.section-title .teal { color: var(--np-teal); font-weight: inherit; }

/* Container widths */
@media (min-width: 1400px) {
	.container, .container-lg, .container-xl, .container-xxl { max-width: 1240px; }
}
@media (max-width: 767.98px) {
	.container, .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* =============================================================
   HEADER / NAV
   ============================================================= */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1030;
	padding: 0.75rem 0;
	background: transparent;
	transition: background-color .4s ease, box-shadow .4s ease, padding .3s ease;
}
.site-header .site-logo {
	max-width: 142px;
	height: auto;
	background: #fff;
	border-radius: 10px;
	padding: 0 10px 0 0;
}
.site-header .navbar-brand { display: inline-flex; }

/* Solid state: scrolled, or a page without a dark hero */
.site-header.is-stuck,
body.has-solid-header .site-header {
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
/* Offset content on pages that have no dark hero (fixed header needs room) */
body.has-solid-header #content { padding-top: var(--np-header-h); }

/* Right side: phones stacked above nav on desktop */
.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }

.header-phones { display: flex; align-items: center; gap: 22px; }
.header-phones a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	transition: color .3s ease;
}
.header-phones a i { color: var(--np-teal); }
.header-phones a:first-child { padding-right: 22px; border-right: 1px solid rgba(255,255,255,.5); }
.site-header.is-stuck .header-phones a,
body.has-solid-header .header-phones a { color: var(--np-navy); }
.site-header.is-stuck .header-phones a:first-child,
body.has-solid-header .header-phones a:first-child { border-color: var(--np-line); }
.header-phones a:hover { color: var(--np-teal); }

.main-nav .nav-link {
	color: #fff;
	font-weight: 500;
	font-size: 0.9375rem;
	padding: 0.25rem 0;
	transition: color .3s ease;
}
.main-nav > .nav-item + .nav-item { margin-left: 1.4rem; }
.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .current-menu-item > .nav-link { color: var(--np-teal); }
.site-header.is-stuck .main-nav .nav-link,
body.has-solid-header .main-nav .nav-link { color: var(--np-navy); }
.site-header.is-stuck .main-nav .nav-link:hover,
.site-header.is-stuck .main-nav .nav-link.active,
body.has-solid-header .main-nav .nav-link:hover,
body.has-solid-header .main-nav .nav-link.active,
body.has-solid-header .main-nav .current-menu-item > .nav-link { color: var(--np-teal); }

/* Dropdown */
.main-nav .dropdown-menu {
	border: 0;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(11, 53, 78, 0.15);
	padding: 0.4rem;
	margin-top: 0.65rem;
	min-width: 230px;
}
.main-nav .dropdown-menu li + li { margin-top: 0.25rem; }
.main-nav .dropdown-item {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--np-navy);
	padding: 0.6rem 1rem;
	border-radius: 8px;
	transition: background-color .2s ease, color .2s ease;
}
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus,
.main-nav .dropdown-item.active,
.main-nav .current-menu-item > .dropdown-item,
.main-nav .current_page_item > .dropdown-item {
	background: var(--np-teal);
	color: #fff;
}
@media (max-width: 1199.98px) {
	/* Collapsed menu: indent the dropdown, no extra shadow/offset */
	.main-nav .dropdown-menu {
		box-shadow: none;
		margin: 0.25rem 0 0.25rem 0.75rem;
		padding: 0;
		min-width: 0;
	}
}

/* Hamburger (three bars) */
.navbar-toggler, .navbar-toggler:focus { box-shadow: none; padding: 0.25rem; }
.toggler-bars { display: inline-block; width: 30px; }
.toggler-bars span { display: block; height: 2px; background: #fff; border-radius: 2px; margin-left: auto; }
.toggler-bars span:nth-child(1) { width: 30px; }
.toggler-bars span:nth-child(2) { width: 22px; margin-top: 6px; }
.toggler-bars span:nth-child(3) { width: 15px; margin-top: 6px; }
.site-header.is-stuck .toggler-bars span,
body.has-solid-header .toggler-bars span { background: var(--np-navy); }

@media (max-width: 1199.98px) {
	.header-right { align-items: stretch; width: 100%; margin-top: 1rem; }
	.header-phones { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
	.header-phones a:first-child { border-right: 0; padding-right: 0; }
	#mainNav {
		background: #fff;
		border-radius: 12px;
		padding: 1rem 1.25rem;
		margin-top: 0.75rem;
		box-shadow: 0 10px 30px rgba(0,0,0,.12);
	}
	.header-phones a, .main-nav .nav-link { color: var(--np-navy) !important; }
	.main-nav > .nav-item + .nav-item { margin-left: 0; }
	.main-nav > .nav-item { border-top: 1px solid #eee; }
	.main-nav .nav-link { padding: 0.6rem 0; }
}

/* Small screens: header is no longer fixed/floating — it sits in the flow */
@media (max-width: 991.98px) {
	.site-header {
		position: static;
		background: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
	}
	/* Solid-header colours (it's no longer over the dark hero) */
	.site-header .header-phones a,
	.site-header .main-nav .nav-link { color: var(--np-navy); }
	.site-header .header-phones a:first-child { border-color: var(--np-line); }
	.site-header .toggler-bars span { background: var(--np-navy); }
	/* Drop the offsets that reserved room for the fixed header */
	body.has-solid-header #content { padding-top: 0; }
	.hero { padding: 2.5rem 0 4rem; }
	.page-hero { padding: 2.5rem 0 3rem; }
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
	position: relative;
	background: var(--np-navy) center / cover no-repeat;
	color: #fff;
	padding: calc(var(--np-header-h) + 12rem) 0 15rem;
}
.hero-overlay, .page-hero .hero-overlay, .cta-overlay {
	position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); pointer-events: none;
}
.hero .container, .hero .container-fluid, .page-hero .container { position: relative; z-index: 1; }
.hero-copy { max-width: 900px; }
.hero-copy :is(h1, h2) {
	color: #fff;
	font-weight: 500;
	line-height: 1.15;
	font-size: clamp(2rem, 4vw, 3.125rem);
	text-transform: capitalize;
	margin-bottom: 0;
}
.hero-copy :is(h1, h2) :is(strong, b) { color: var(--np-teal); font-weight: 600; }
.hero-btn-row { display: flex; align-items: center; gap: 35px; margin-top: 2.25rem; }
.hero-line { width: 130px; height: 1px; background: #fff; flex: 0 0 auto; }

/* =============================================================
   INNER PAGE HERO
   ============================================================= */
.page-hero {
	position: relative;
	background: var(--np-navy) center / cover no-repeat;
	color: #fff;
	padding: calc(var(--np-header-h) + 3rem) 0 4rem;
}
/* Image banner (single posts): 45% black overlay like the other heroes */
.page-hero.page-hero-image { min-height: 360px; padding: 0; }
.page-hero.page-hero-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	pointer-events: none;
}
@media (max-width: 991.98px) { .page-hero.page-hero-image { min-height: 220px; } }

.page-hero .rte :is(h1,h2), .page-hero .rte .h1 { color: #fff; }
/* Banner title is a p.h1 (visual only) so the real H1 can live in the page content */
.page-hero .rte .h1 {
	font-weight: 700;
	line-height: 1.2;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	margin: 0;
}
.page-hero .rte .h1 :is(strong, b) { color: var(--np-teal); }

/* =============================================================
   TEXT + IMAGE
   ============================================================= */
.section-text-img { position: relative; background: #fff; overflow: hidden; }
.section-text-img.bg-grey { background: var(--np-grey); }
.section-text-img .container { position: relative; z-index: 1; }
/* Faint corner flourishes (matches the live site's bg elements) */
.section-text-img::before,
.section-text-img::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}
.section-text-img::before { left: 0; top: 0; width: 400px; height: 500px; background-image: url("../images/deco-left.webp"); background-position: left top; }
.section-text-img::after  { right: 0; top: -30px; width: 320px; height: 450px; background-image: url("../images/deco-right.webp"); background-position: right top; }
/* Left flourish only on the first Text + Image; hide it on later instances */
.section-text-img ~ .section-text-img::before, .section-text-img ~ .section-text-img::after { display: none; }
@media (max-width: 991.98px) {
	.section-text-img::before, .section-text-img::after { display: none; }
}

.ti-copy .section-title { max-width: 480px; }
.ti-copy .rte p { font-size: 0.95rem; }
.ti-media { position: relative; }
.ti-media .ti-img { position: relative; z-index: 2; width: 100%; border-radius: 6px; display: block; }
/* Corner triangle accent behind the image */
.ti-media.deco-teal::after,
.ti-media.deco-blue::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 120px; height: 120px;
	background-repeat: no-repeat;
	background-size: contain;
}
.ti-media.deco-teal::after { right: -18px; bottom: -18px; background-image: url("../images/deco-teal-offset.webp"); }
.ti-media.deco-blue::after { left: -18px; bottom: -18px; background-image: url("../images/deco-blue-offset.webp"); }
.ti-media.deco-none::after { display: none; }

/* =============================================================
   FEATURE BOXES
   ============================================================= */
.section-feature-boxes { position: relative; }
.section-feature-boxes.is-overlap { margin-top: clamp(-4rem, -6vw, -7rem); z-index: 3; }
.feature-boxes {
	background: var(--np-grey);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	border-radius: 6px;
}
.feature-box {
	display: block;
	height: 100%;
	padding: 2.4rem 2.6rem;
	border-right: 1px solid var(--np-line);
	transition: border-color .3s ease;
}
.feature-boxes .row > [class*="col-"]:last-child .feature-box { border-right: 0; }
a.feature-box { color: inherit; }
.feature-box:hover { border-right-color: var(--np-teal); }
.fb-icon { height: 60px; margin-bottom: 1.5rem; display: flex; align-items: flex-end; }
.fb-icon img { max-height: 60px; width: auto; }
.feature-box h3 { font-size: 1rem; font-weight: 700; color: var(--np-navy); margin-bottom: 0.5rem; transition: color .3s ease; }
.feature-box:hover h3 { color: var(--np-teal); }
.feature-box p { font-size: 0.875rem; margin: 0; }
@media (max-width: 991.98px) {
	.feature-box { border-right: 0; border-bottom: 1px solid var(--np-line); }
	.section-feature-boxes.is-overlap { margin-top: 0; }
}

/* =============================================================
   SERVICES (dark band + cards / Owl carousel)
   ============================================================= */
.section-services {
	position: relative;
	background-color: var(--np-navy);
	padding: clamp(3.5rem, 6vw, 6rem) 0;
	overflow: hidden;
}
/* Background image at 20% opacity (opacity can't apply to background-image directly) */
.section-services::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/deco-rect.webp") center / cover no-repeat;
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
}
.section-services > .container { position: relative; z-index: 1; }

.section-services .services-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-services .services-head .section-title,
.section-services .services-head .eyebrow { color: #fff; }
.section-services .services-head .section-title :is(strong,b) { color: var(--np-teal); }
.section-services .subtitle-line span { background: var(--np-teal); }

.service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.service-img { aspect-ratio: 16 / 11; overflow: hidden; background: var(--np-grey); }
.service-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-body { position: relative; flex: 1 1 auto; padding: 1.5rem 1.5rem 4.25rem; }
/* Equal-height carousel items */
.services-carousel .owl-stage { display: flex; }
.services-carousel .owl-item { display: flex; height: auto; }
.services-carousel .item { display: flex; width: 100%; }
.service-body h3 { font-size: 1.25rem; font-weight: 700; color: var(--np-navy); margin-bottom: 0.6rem; }
.service-body p { font-size: 0.9rem; color: var(--np-ink); margin: 0; line-height: 1.5; }
.service-arrow {
	position: absolute;
	right: 1.5rem; bottom: 1.5rem;
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	color: var(--np-navy);
	font-size: 1.1rem;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.service-card:hover .service-arrow { background: var(--np-teal); border-color: var(--np-teal); color: #fff; }

/* Owl arrows + dots */
.owl-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 49px;
	border-radius: 12px;
	font-size: 1.25rem;
	transition: background-color .3s ease, color .3s ease;
}
/* Reserve side gutters so the arrows sit outside the slides, not over them */
.services-carousel.owl-theme { position: relative; padding: 0 64px; }
.services-carousel.owl-theme .owl-nav { margin: 0; }
.services-carousel.owl-theme .owl-nav [class*="owl-"] { background: transparent; margin: 0; padding: 0; }
.services-carousel.owl-theme .owl-nav .owl-prev,
.services-carousel.owl-theme .owl-nav .owl-next { position: absolute; top: 45%; transform: translateY(-50%); }
.services-carousel.owl-theme .owl-nav .owl-prev { left: 0; }
.services-carousel.owl-theme .owl-nav .owl-next { right: 0; }
.services-carousel .owl-arrow-prev {color: #fff; }
.services-carousel .owl-arrow-next { background: var(--np-teal); color: #fff; }
.services-carousel .owl-arrow:hover { background: #fff; color: var(--np-navy); }
.services-carousel.owl-theme .owl-dots { margin-top: 2.5rem; text-align: center; }
.services-carousel.owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px; background: rgba(255,255,255,.35); transition: background-color .3s ease, width .3s ease; }
.services-carousel.owl-theme .owl-dots .owl-dot.active span { background: var(--np-teal); width: 26px; }
@media (max-width: 767.98px) {
	.services-carousel.owl-theme { padding: 0 42px; }
}

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.section-testimonials { padding: clamp(3.5rem, 6vw, 6rem) 0; overflow: hidden; }
.testi-media { position: relative; padding: 0 2rem 2rem 0; }
.testi-media .testi-img-main { width: 100%; border-radius: 16px; display: block; }
.testi-img-small {
	position: absolute; right: 0; bottom: 0;
	width: 45%; border-radius: 16px; overflow: hidden;
	border: 6px solid #fff; box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.testi-img-small img { width: 100%; display: block; }
.testi-copy { padding-left: 1rem; }
.testi-quote { font-size: 2.5rem; color: var(--np-teal); line-height: 1; }
.testi-head { margin: 0.5rem 0 1.5rem; }
.testi-card .testi-message { font-size: 1rem; color: var(--np-ink); }
.testi-card .testi-message p:last-child { margin-bottom: 1rem; }
.testi-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.testi-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testi-author { display: flex; flex-direction: column; }
.testi-author .t-name { font-weight: 700; color: var(--np-navy); }
.testi-author .t-role { font-size: 0.85rem; color: var(--np-teal); }
.testimonials-carousel.owl-theme .owl-nav { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.testimonials-carousel .owl-arrow { border: 1px solid var(--np-line); color: var(--np-navy); }
.testimonials-carousel .owl-arrow:hover { background: var(--np-teal); border-color: var(--np-teal); color: #fff; }

/* =============================================================
   CHECKLIST (grey panel)
   ============================================================= */
.checklist-panel { background: var(--np-grey); border-radius: 12px; padding: clamp(2rem, 4vw, 3.5rem); }
.check-item { display: flex; align-items: flex-start; gap: 0.85rem; }
.check-item + .check-item { margin-top: 1rem; }
.check-item i { color: var(--np-teal); margin-top: 0.35rem; }
.check-item span { color: var(--np-ink); }

/* =============================================================
   CTA BAND
   ============================================================= */
.section-cta {
	position: relative;
	background: var(--np-navy) center / cover no-repeat;
	color: #fff;
	padding: clamp(3.5rem, 6vw, 6rem) 0;
}
.section-cta .cta-overlay { background: rgba(11, 53, 78, 0.7); }
.section-cta .container { position: relative; z-index: 1; }
.cta-copy :is(h1,h2,h3) { color: #fff; }
.cta-copy :is(h1,h2,h3) :is(strong,b) { color: var(--np-teal); }

/* =============================================================
   TEXT BAND (solid colour panels)
   ============================================================= */
.section-text-band { padding: clamp(3rem, 5vw, 5rem) 0; }
.section-text-band.band-navy { position: relative; overflow: hidden; background: var(--np-navy); }
/* Navy band background image at 20% opacity (opacity can't apply to background-image directly) */
.section-text-band.band-navy::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/bg-places.webp") center / cover no-repeat;
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
}
.section-text-band.band-navy > .container { position: relative; z-index: 1; }
.section-text-band.band-teal { background: var(--np-teal); }
.section-text-band.band-grey { background: var(--np-grey); }
.section-text-band.band-white { background: #fff; }
.section-text-band .rte-invert :is(h1,h2,h3) { color: #fff; }
.section-text-band .rte-invert :is(h1,h2,h3) :is(strong,b) { color: var(--np-teal); }

/* =============================================================
   FAQs (accordion)
   ============================================================= */
.section-faqs.bg-tint  { background: var(--np-grey); }
.section-faqs.is-light { background: #f7f7f7; }
.faq-head { max-width: 800px; margin: 0 auto clamp(2rem, 3.5vw, 3rem); }
.faq-accordion {
	--bs-accordion-border-color: #e6e6e6;
	--bs-accordion-color: var(--np-ink);
	--bs-accordion-btn-color: var(--np-navy);
	--bs-accordion-active-color: var(--np-navy);
	--bs-accordion-active-bg: var(--np-grey);
	--bs-accordion-btn-focus-box-shadow: none;
}
.faq-accordion .accordion-item { border: 1px solid var(--bs-accordion-border-color); border-radius: 12px; margin-bottom: 1rem; overflow: hidden; }
.faq-accordion .accordion-button { font-weight: 600; font-size: 1.05rem; padding: 1.1rem 1.4rem; }
.faq-accordion .accordion-button:not(.collapsed) { box-shadow: none; }
.faq-accordion .accordion-body { padding: 0 1.4rem 1.3rem; }

/* =============================================================
   MULTI-COLUMN TEXT / TEXT OVER IMAGE / SPACER / HR
   ============================================================= */
.section-text-columns.bg-tint  { background: var(--np-grey); }
.section-text-columns.is-light { background: #f7f7f7; }
.section-text-columns.is-dark  { background: var(--np-navy); }
.section-text-columns.is-dark .rte :is(h1,h2,h3,h4,h5,h6) { color: #fff; }
.section-text-columns.is-dark .rte p,
.section-text-columns.is-dark .rte ul,
.section-text-columns.is-dark .rte ol { color: rgba(255,255,255,.9); }
.section-text-columns .tc-row + .tc-row { margin-top: 2rem; }

.section-text-image {
	position: relative;
	background: var(--np-navy) center / cover no-repeat;
	color: #fff;
}
.section-text-image .container { position: relative; z-index: 1; }
.section-text-image.h-small  { min-height: 340px; display: flex; align-items: center; }
.section-text-image.h-medium { min-height: 460px; display: flex; align-items: center; }
.section-text-image.h-large  { min-height: 600px; display: flex; align-items: center; }
.ti-overlay { position: absolute; inset: 0; background: rgba(11,53,78,.6); }
.ov-none .ti-overlay { display: none; }
.ov-light .ti-overlay { background: rgba(11,53,78,.35); }
.ov-dark  .ti-overlay { background: rgba(11,53,78,.82); }

.spacer { width: 100%; }
.spacer-small { height: 1.5rem; }
.spacer-medium { height: 3rem; }
.spacer-large { height: 5rem; }
.spacer-xlarge { height: 7rem; }
.hr-module.hr-none { margin: 0; }
.hr-module.hr-small { margin: 1rem 0; }
.hr-module.hr-medium { margin: 2rem 0; }
.hr-module.hr-large { margin: 3.5rem 0; }
.html-widget { margin: 0; }

/* =============================================================
   GALLERY + LIGHTBOX
   ============================================================= */
.gallery-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.gallery-box {
	position: relative; display: block;
	border-radius: 14px; overflow: hidden;
}
.gallery-box img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-box:hover img { transform: scale(1.05); }
.gallery-caption {
	position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
	display: flex; align-items: center; justify-content: space-between;
	background: var(--np-teal); color: #fff;
	padding: 0.75rem 1rem; border-radius: 10px;
	font-weight: 600; font-size: 0.95rem;
}
.np-lightbox {
	position: fixed; inset: 0; z-index: 2000;
	background: rgba(0,0,0,.85);
	display: none; align-items: center; justify-content: center;
	padding: 2rem;
}
.np-lightbox.is-open { display: flex; }
.np-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.np-lightbox-close {
	position: absolute; top: 1rem; right: 1.5rem;
	background: transparent; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer;
}

/* =============================================================
   FOOTER FORM BAND
   ============================================================= */
.footer-form-band { position: relative; background: var(--np-grey-2); padding: 5rem 0 3rem; overflow: hidden; }
.footer-form-band .ff-bg { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 60%; object-fit: cover; object-position: right center; z-index: 0; }
@media (max-width: 991.98px) { .footer-form-band .ff-bg { opacity: .25; max-width: 100%; } }
.footer-form-band .container { position: relative; z-index: 1; }
.footer-form-band .ff-form { background: var(--np-navy); color: #fff; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 6px; }
.footer-form-band .ff-copy .section-title { color: var(--np-navy); }
.footer-form-band .ff-copy .rte p { font-size: 0.95rem; }
.footer-form-band .eyebrow {color: var(--np-navy);}

/* NinjaForms colours inside the navy box */
.ff-form .nf-form-content input:not([type="button"]):not([type="submit"]),
.ff-form .nf-form-content textarea,
.ff-form .nf-form-content select {
	background: transparent !important;
	border: 1px solid #fff !important;
	border-radius: 12px !important;
	color: #fff !important;
}
.ff-form .nf-form-content input::placeholder,
.ff-form .nf-form-content textarea::placeholder { color: rgba(255,255,255,.8) !important; }
.ff-form .nf-form-content label,
.ff-form .nf-field-label label { color: #fff !important; }
.ff-form .nf-form-content input[type="button"],
.ff-form .nf-form-content input[type="submit"] {
	background: var(--np-teal) !important;
	border: 0 !important; color: #fff !important;
	border-radius: 22px !important; font-weight: 700 !important;
	padding: 0.85rem 2.5rem !important;
}
.ff-form .nf-form-content input[type="button"]:hover { background: #fff !important; color: var(--np-navy) !important; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { background: var(--np-grey-2); padding-top: 3.5rem; }
.footer-brand { margin-bottom: 1.75rem; }
.footer-brand .footer-logo { max-width: 160px; height: auto; }
.footer-menu ul {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
	margin: 0; padding: 0;
}
.footer-menu a { font-size: 0.875rem; font-weight: 500; color: #000; transition: color .3s ease; }
.footer-menu a:hover, .footer-menu .current-menu-item a { color: var(--np-teal); }
.footer-members { margin-top: 2.5rem; }
.footer-members .members-label { font-weight: 600; color: var(--np-navy); margin-bottom: 1rem; }
.footer-members .members-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-bar { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid #ececec; }
.footer-bar .copyright { font-size: 0.75rem; color: var(--np-ink); }
.footer-bar .energise-credit { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--np-ink); }
.footer-bar .energise-credit img { vertical-align: middle; }

/* =============================================================
   RICH TEXT
   ============================================================= */
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte :is(h1,h2,h3,h4,h5,h6) { color: var(--np-navy); font-weight: 700; line-height: 1.2; }
.rte :is(h1,h2,h3,h4,h5,h6) :is(strong,b),
.rte :is(h1,h2,h3,h4,h5,h6) .teal { color: var(--np-teal); }
.rte h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 1rem; }
.rte h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-bottom: 1rem; }
.rte h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.rte p, .rte ul, .rte ol { margin-bottom: 1rem; }
.rte ul, .rte ol { padding-left: 1.25rem; }
.rte a:not(.btn) { color: var(--np-teal); text-decoration: underline; }
.rte img { border-radius: 6px; }
.rte .btn { margin-top: 0.5rem; }

.rte-invert :is(h1,h2,h3,h4,h5,h6) { color: #fff; }
.rte-invert :is(h1,h2,h3,h4,h5,h6) :is(strong,b),
.rte-invert :is(h1,h2,h3,h4,h5,h6) .teal { color: var(--np-teal); }
.rte-invert p, .rte-invert ul, .rte-invert ol { color: rgba(255,255,255,.92); }
.rte-invert a:not(.btn) { color: #fff; }

/* WordPress media alignment */
.alignnone   { max-width: 100%; height: auto; margin-bottom: 1rem; }
.aligncenter { display: block; margin: 0.5rem auto 1.25rem; max-width: 100%; height: auto; }
.alignright, .alignleft { max-width: 100%; height: auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text, .wp-caption .wp-caption-text { font-size: 0.9rem; color: #6b7680; margin-top: 0.4rem; text-align: center; }
@media (min-width: 768px) {
	.alignright, .wp-caption.alignright { float: right; margin: 0.5rem 0 1rem 1.75rem; max-width: 48%; }
	.alignleft,  .wp-caption.alignleft  { float: left;  margin: 0.5rem 1.75rem 1rem 0; max-width: 48%; }
}
@media (max-width: 767.98px) {
	.alignright, .alignleft, .wp-caption.alignright, .wp-caption.alignleft {
		float: none; display: block; margin: 0.5rem auto 1.25rem; max-width: 100%;
	}
}
/* Clear floats inside rich text so following sections don't wrap the image */
.rte::after { content: ""; display: table; clear: both; }

/* =============================================================
   BLOG / ARCHIVE
   ============================================================= */

/* Corner flourishes on the first Multi-column Text block of inner pages */
body:not(.home) #content .section-text-columns { position: relative; overflow: hidden; }
body:not(.home) #content .section-text-columns > .container { position: relative; z-index: 1; }
body:not(.home) #content .section-text-columns::before,
body:not(.home) #content .section-text-columns::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}
body:not(.home) #content .section-text-columns::before {
	left: 0; top: 0; width: 400px; height: 500px;
	background-image: url("../images/deco-left.webp"); background-position: left top;
}
body:not(.home) #content .section-text-columns::after {
	right: 0; top: -30px; width: 320px; height: 450px;
	background-image: url("../images/deco-right.webp"); background-position: right top;
}
/* Only the first instance keeps the flourishes */
body:not(.home) #content .section-text-columns ~ .section-text-columns::before,
body:not(.home) #content .section-text-columns ~ .section-text-columns::after { display: none; }
@media (max-width: 991.98px) {
	body:not(.home) #content .section-text-columns::before,
	body:not(.home) #content .section-text-columns::after { display: none; }
}

.post-card {
	display: block; height: 100%;
	background: #fff; border: 1px solid #e6e6e6; border-radius: 16px;
	overflow: hidden; color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.post-card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 1.5rem; }
.post-card-body h3 { font-size: 1.2rem; font-weight: 700; color: var(--np-navy); margin-bottom: 0.6rem; }
.post-card-body p { font-size: 0.95rem; margin-bottom: 1rem; }
.post-card-more { color: var(--np-teal); font-weight: 600; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 3rem; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 0.75rem;
	border-radius: 10px; border: 1px solid #e6e6e6; color: var(--np-navy);
}
.pagination .page-numbers.current { background: var(--np-teal); border-color: var(--np-teal); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--np-teal); color: var(--np-teal); }

.single-thumb img { width: 100%; }

/* Slightly smaller H2s within a single post body */
.single-post h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

.owl-theme .owl-nav [class*="owl-"] {margin:0 !important;font-size: 1.5rem !important;}