/**
 * Premium Sunrooms - Navy + Gold Color Override
 * Overrides default orange (#f44714) → Warm Gold (#C5932A)
 * Overrides dark gray (#383838) backgrounds → Deep Navy (#1B2A4A)
 * Overrides blue (#0089bc, #0066cc) → Navy Medium (#1E3D5C)
 */

/* ===========================
   ACTION BAR (top of page)
   =========================== */
.action-bar {
	background: #1B2A4A;
	padding: 0;
	text-align: center;
}

.action-bar-wrap {
	display: flex;
	justify-content: center;
	align-items: stretch;
}

.action-bar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 1;
	padding: 22px 30px;
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 20px;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.action-bar-btn i {
	font-size: 22px;
}

.action-bar-phone {
	background: #1B2A4A;
	color: #fff;
}

.action-bar-phone:hover {
	background: #142038;
	color: #C5932A;
}

.action-bar-estimate {
	background: #C5932A;
	color: #fff;
}

.action-bar-estimate:hover {
	background: #A67B1E;
	color: #fff;
}

/* Mobile: stack vertically on small screens */
@media (max-width: 639px) {
	.action-bar-wrap {
		flex-direction: column;
	}
	.action-bar-btn {
		padding: 14px 20px;
		font-size: 14px;
	}
}

/* ===========================
   GLOBAL FONT OVERRIDE — Poppins everywhere
   =========================== */
body,
form,
input,
textarea,
select,
button {
	font-family: 'Poppins', 'Ubuntu', 'Helvetica Neue', Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.amped-content h1,
.amped-content h2,
.amped-content h3,
.amped-content h4,
.amped-content h5,
.amped-content h6 {
	font-family: 'Poppins', 'Ubuntu', sans-serif !important;
}

p, a, span, li, td, th, label, div {
	font-family: 'Poppins', 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
}

/* Header */
.site-header .header-phone p,
.site-header .header-phone a,
.site-header .navbar a,
.site-header .mobile-trigger {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Router (4-square grid) */
.home-router .caption,
.home-router .caption h4,
.home-router .learn-more {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Current Specials / Flyer */
.current-specials-section,
.specials-flyer-section,
.flyer-title,
.flyer-subtitle,
.flyer-badge,
.flyer-offer-text,
.flyer-cta-label,
.flyer-phone-btn,
.flyer-quote-btn,
.flyer-info-title,
.county-pill,
.flyer-footer-item {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Product Showcase */
.product-showcase,
.ps-intro-label,
.ps-intro-title,
.ps-intro-text,
.ps-content-label,
.ps-content h3,
.ps-content-tagline,
.ps-content p,
.ps-content-link,
.ps-experience-title,
.ps-experience-sub,
.ps-experience-highlight {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Benefits / Why Window Film */
.why-window-film-head p,
.why-window-film h4,
.why-window-film p,
.before-after .instructions {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Our Process / Quote Process */
.our-process-head p,
.our-process .large-head,
.our-process .three-steps h3,
.our-process .quick-quote span,
.our-process .quick-quote p,
.quote-process-section,
.qp-step h3,
.qp-step p,
.qp-modal-trigger,
.quote-modal-title,
.quote-modal-badge {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Transform Section */
.transform-section,
.transform-subtitle,
.transform-title,
.transform-cta {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Testimonials */
.testimonials-section,
.testimonials-subtitle,
.testimonials-title,
.testimonial-text,
.testimonial-author,
#testimonials-section-head p {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Footer */
.footer,
.footer p,
.footer h6,
.footer a,
.footer-phone,
.footer-service-area,
.footer-counties-title,
.footer-counties-list li,
.footer-copyright h6 {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}

/* Buttons (global) */
.button,
a.button {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
}


/* ===========================
   SELECTION
   =========================== */
::selection {
	background: #C5932A;
}

/* ===========================
   BUTTONS
   =========================== */
.button {
	background-color: #C5932A;
	color: #fff;
}

.button:hover,
.button:focus {
	background-color: #A67B1E;
}

.button.primary {
	background-color: #C5932A;
}

.button.hollow,
.button.hollow.primary {
	border-color: #C5932A;
	color: #C5932A;
}

.button.secondary {
	background-color: #1E3D5C;
}

.button.hollow.secondary {
	border-color: #1E3D5C;
	color: #1E3D5C;
}

/* ===========================
   SITE HEADER
   =========================== */
.site-header .bottom-border {
	background: linear-gradient(to right, #C5932A 0%, #1B2A4A 100%);
}

.site-header .header-phone svg {
	fill: #C5932A;
}

/* Hide the entire header phone/tagline on mobile — action bar replaces it */
@media (max-width: 1023px) {
	.site-header .header-phone {
		display: none !important;
	}

	.site-header .header-phone a {
		display: none !important;
		position: static !important;
		z-index: -1 !important;
		visibility: hidden !important;
	}

	.site-header .header-phone p {
		display: none !important;
	}

	.site-header {
		padding-top: 15px;
	}
}

/* ===========================
   NAVIGATION
   =========================== */
.mobile-nav-active .navbar > li > a {
	color: #C5932A;
}

.mobile-nav-active .navbar > li ~ li {
	border-color: #1B2A4A;
}

.desktop-nav-active .navbar > li:hover > a,
.desktop-nav-active .navbar > li:focus > a {
	color: #C5932A;
}

.desktop-nav-active .navbar > li.current_page_item > a,
.desktop-nav-active .navbar > li.current_page_parent > a,
.desktop-nav-active .navbar > li.active > a {
	color: #C5932A;
}

/* ===========================
   FEATURED SLIDER
   =========================== */
.featured-slider .bottom-bar .button:hover,
.featured-slider-page .bottom-bar .button:hover {
	background-color: #C5932A;
	border-color: #C5932A;
}

/* ===========================
   BOTTOM TRIANGLE
   =========================== */
.bottom-triangle {
	border-top-color: #1B2A4A;
}

/* ===========================
   OUR PROCESS / QUOTE SECTION
   =========================== */
.our-process-head {
	background-color: #1B2A4A;
}

.our-process {
	background-color: #1E3D5C;
}

.our-process .quick-quote span {
	color: #C5932A;
}

.our-process .quick-quote .button {
	background-color: #fff;
	color: #1B2A4A;
}

.our-process .quick-quote .button:hover {
	background-color: #C5932A;
	color: #fff;
}

.quick-quote-callout {
	color: #1E3D5C;
}

/* ===========================
   WHY WINDOW FILM / BENEFITS
   =========================== */
.why-window-film-head {
	background-color: #1B2A4A;
}

.why-window-film .logo-only {
	fill: #C5932A;
}

.why-window-film hr {
	border-color: #C5932A;
}

/* ===========================
   BEFORE / AFTER
   =========================== */
.before-after .instructions {
	color: #1E3D5C;
}

/* ===========================
   FOOTER
   =========================== */
.footer {
	background-color: #1B2A4A;
	border-bottom-color: #C5932A;
}

.footer .social-icons svg:hover {
	fill: #C5932A;
}

/* ===========================
   BLUE INFO SECTION
   =========================== */
.blue-info-section {
	background-color: #1E3D5C;
}

/* ===========================
   FILM ROLES
   =========================== */
.film-roles .prim {
	color: #C5932A;
}

.film-roles .gray-banner {
	background-color: #1B2A4A;
}

/* ===========================
   HAPPY CUSTOMERS
   =========================== */
.happy-customers {
	background-color: #C5932A;
}

/* ===========================
   AMPED CONTENT
   =========================== */
.amped-content h1,
.amped-content h2,
.amped-content h3,
.amped-content h4,
.amped-content h5,
.amped-content h6,
.amped-content .h1,
.amped-content .h2,
.amped-content .h3,
.amped-content .h4,
.amped-content .h5,
.amped-content .h6 {
	color: #C5932A;
}

.anchor,
.amped-content a {
	color: #C5932A;
}

.amped-content a:hover,
.amped-content a:focus {
	color: #A67B1E;
}

/* ===========================
   HEADER CONTACT
   =========================== */
.header-contact {
	background-color: #1B2A4A;
}

/* ===========================
   CONTACT PAGE CALLOUT
   =========================== */
.callout-contact-page {
	background-color: #1E3D5C;
}

/* ===========================
   STANDARD FORM
   =========================== */
#standard-form .form-submit {
	background-color: #C5932A;
	border-color: #A67B1E;
}

#standard-form .form-submit:hover {
	color: #C5932A;
}

/* ===========================
   TRANSFORM CTA
   =========================== */
.transform-cta {
	background-color: #C5932A;
}

.transform-cta:hover {
	background-color: #A67B1E;
}

/* ===========================
   TESTIMONIALS
   =========================== */
.testimonials-section .testimonials-nav button {
	background: #1E3D5C;
	border-color: #1E3D5C;
}

/* ===========================
   CURRENT SPECIALS
   =========================== */
.current-specials-section .specials-badge {
	background-color: #C5932A;
}

.current-specials-section .offer-expires {
	color: #C5932A;
}

.current-specials-section .showroom-info {
	color: #C5932A;
}

.current-specials-section .specials-phone:hover {
	color: #C5932A;
}

.current-specials-section .get-quote-button {
	background-color: #C5932A;
}

.current-specials-section .get-quote-button:hover {
	background-color: #1E3D5C;
}

.current-specials-section .counties-list li {
	color: #1E3D5C;
}

.current-specials-section .countdown-item {
	background-color: #1E3D5C;
	border-color: #1E3D5C;
}

.current-specials-section .special-box {
	border-color: #1E3D5C;
}

.current-specials-section .special-box:hover {
	background-color: #1E3D5C;
}

/* ===========================
   PAGE HEADER HERO
   =========================== */
.page-header .hero-sub {
	background-color: #1E3D5C;
}

/* ===========================
   BLOG ACCENTS
   =========================== */
.blog-card-meta time,
.blog-card-categories a:hover,
.blog-card-title a:hover,
.blog-card-link,
.post-single-meta a,
.post-meta-date time,
.post-single-content a,
.related-post-title a:hover,
.related-post-meta time {
	color: #1E3D5C;
}

.post-single-content blockquote {
	border-left-color: #1E3D5C;
}

.post-tags .tag:hover {
	background: #1E3D5C;
}


/* ===========================
   HOMEPAGE HERO
   =========================== */
.hp-hero {
	position: relative;
	overflow: hidden;
}

.hp-hero .hero-image {
	width: 100%;
	height: calc(100vh - 100px);
	min-height: 500px;
	position: relative;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #1B2A4A;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hp-hero .hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(27,42,74,0.7) 0%, rgba(30,61,92,0.5) 50%, rgba(27,42,74,0.6) 100%);
	z-index: 1;
}

.hp-hero .caption-box {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #fff;
	padding: 20px;
	max-width: 900px;
}

.hp-hero .caption-box.hidden {
	visibility: hidden;
}

.hp-hero .caption-box.visible {
	visibility: visible;
}

.hp-hero .top-text {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 6px;
	margin-bottom: 10px;
	text-transform: uppercase;
	opacity: 0;
}

.hp-hero .middle-text {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 50px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 4px;
	margin-bottom: 10px;
	text-transform: uppercase;
	opacity: 0;
}

.hp-hero .bottom-text {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 3px;
	margin-bottom: 20px;
	opacity: 0;
}

.hp-hero .bottom-text b {
	font-weight: 700;
}

.hp-hero hr.hr-right,
.hp-hero hr.hr-left {
	border: none;
	height: 2px;
	background-color: #C5932A;
	width: 0;
	margin: 10px auto;
	transition: none;
}

.hp-hero .locations {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 25px;
}

.hp-hero .locations .loc {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #fff;
	opacity: 0;
	margin: 0;
}

.hp-hero .locations .fa-map-marker-alt {
	color: #C5932A;
}

.hp-hero .hero-cta {
	opacity: 0;
}

/* Hero responsive */
@media (min-width: 640px) {
	.hp-hero .top-text {
		font-size: 24px;
		letter-spacing: 10px;
	}
	.hp-hero .middle-text {
		font-size: 80px;
		letter-spacing: 6px;
	}
	.hp-hero .bottom-text {
		font-size: 22px;
		letter-spacing: 4px;
	}
	.hp-hero .locations {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 25px;
	}
	.hp-hero .locations .loc {
		font-size: 14px;
	}
}

@media (min-width: 1024px) {
	.hp-hero .middle-text {
		font-size: 100px;
	}
	.hp-hero .top-text {
		font-size: 28px;
	}
	.hp-hero .bottom-text {
		font-size: 26px;
	}
}


/* ===========================
   ROOFLINE DIVIDER
   =========================== */
.hp-roofline {
	position: relative;
	margin-top: -50px;
	z-index: 3;
	line-height: 0;
}

.hp-roofline svg {
	width: 100%;
	height: 60px;
	display: block;
}

@media (min-width: 640px) {
	.hp-roofline svg {
		height: 80px;
	}
	.hp-roofline {
		margin-top: -80px;
	}
}


/* ===========================
   HP WRAPPER (layout container)
   =========================== */
.hp-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}


/* ===========================
   HP BUTTONS
   =========================== */
.hp-btn {
	display: inline-block;
	padding: 16px 32px;
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 4px;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 2px solid transparent;
}

.hp-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hp-btn i {
	margin-right: 8px;
	font-size: 14px;
}

.hp-btn-accent {
	background-color: #C5932A;
	color: #fff;
	border-color: #C5932A;
}

.hp-btn-accent:hover {
	background-color: #A67B1E;
	border-color: #A67B1E;
	color: #fff;
}

.hp-btn-dark {
	background-color: #1B2A4A;
	color: #fff;
	border-color: #1B2A4A;
}

.hp-btn-dark:hover {
	background-color: #142038;
	border-color: #142038;
	color: #fff;
}

.hp-btn-primary {
	background-color: #1B2A4A;
	color: #fff;
	border-color: #1B2A4A;
}

.hp-btn-primary:hover {
	background-color: #C5932A;
	border-color: #C5932A;
	color: #fff;
}

.hp-btn-outline {
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}

.hp-btn-outline:hover {
	background-color: #fff;
	color: #1B2A4A;
}

.hp-btn-outline-dark {
	background-color: transparent;
	color: #1B2A4A;
	border-color: #1B2A4A;
}

.hp-btn-outline-dark:hover {
	background-color: #1B2A4A;
	color: #fff;
}

@media (min-width: 640px) {
	.hp-btn {
		padding: 18px 40px;
		font-size: 16px;
	}
}


/* ===========================
   TRUST BADGES
   =========================== */
.hp-badges {
	padding: 60px 0;
	background: #fff;
}

.hp-badges-intro {
	text-align: center;
	max-width: 750px;
	margin: 0 auto 50px;
}

.hp-badges-intro h2 {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #1B2A4A;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hp-badges-intro p {
	font-size: 17px;
	line-height: 1.7;
	color: #555;
	margin-bottom: 25px;
}

.hp-badges-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

@media (min-width: 640px) {
	.hp-badges-cta {
		flex-direction: row;
		justify-content: center;
	}
	.hp-badges-intro h2 {
		font-size: 34px;
	}
}

.hp-badges-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

@media (min-width: 640px) {
	.hp-badges-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.hp-badges-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.hp-badge {
	text-align: center;
	padding: 30px 20px;
	border-radius: 8px;
	background: #f8f9fa;
	transition: all 0.3s ease;
}

.hp-badge:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.hp-badge-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 20px;
	background: #1B2A4A;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hp-badge-icon i {
	font-size: 28px;
	color: #C5932A;
}

.hp-badge h3 {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #1B2A4A;
	margin-bottom: 10px;
}

.hp-badge p {
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	margin: 0;
}


/* ===========================
   SERVICE AREAS BAND
   =========================== */
.hp-areas {
	padding: 50px 0;
	background: #1E3D5C;
	text-align: center;
	color: #fff;
}

.hp-areas h2 {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 25px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hp-areas-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 30px;
	margin-bottom: 25px;
}

.hp-areas-list span {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 8px 20px;
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
	transition: background 0.3s ease;
}

.hp-areas-list span:hover {
	background: rgba(197,147,42,0.3);
}

.hp-areas-link {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #C5932A;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: color 0.3s ease;
}

.hp-areas-link:hover {
	color: #fff;
}

.hp-areas-link i {
	margin-left: 6px;
	transition: transform 0.3s ease;
}

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

@media (min-width: 640px) {
	.hp-areas h2 {
		font-size: 32px;
	}
	.hp-areas-list span {
		font-size: 18px;
	}
}


/* ===========================
   CTA BANNER
   =========================== */
.hp-cta {
	padding: 50px 0;
	background: #1B2A4A;
	color: #fff;
}

.hp-cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 25px;
}

.hp-cta-text h2 {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.hp-cta-text p {
	font-size: 17px;
	color: rgba(255,255,255,0.8);
	margin: 0;
}

.hp-cta-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 640px) {
	.hp-cta-wrap {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
	.hp-cta-actions {
		flex-direction: row;
		flex-shrink: 0;
	}
	.hp-cta-text h2 {
		font-size: 32px;
	}
}


/* ===========================
   SCROLL FADE-IN ANIMATIONS
   =========================== */
.hp-fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.hp-fade-in.hp-visible {
	opacity: 1;
	transform: translateY(0);
}


/* ===========================
   HERO ANIMATIONS (keyframes)
   =========================== */
@keyframes hpSlideDown {
	0% { opacity: 0; transform: translateY(-60px); }
	60% { transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes hpSlideUp {
	0% { opacity: 0; transform: translateY(60px); }
	60% { transform: translateY(-8px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes hpBigEntrance {
	0% { opacity: 0; transform: scale(0.3) rotate(-6deg); }
	50% { transform: scale(1.03) rotate(1deg); }
	80% { transform: scale(0.97) rotate(0deg); }
	100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes hpGrowLine {
	0% { width: 0; }
	100% { width: 80px; }
}

@keyframes hpFadeUp {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.hp-hero .top-text.animate {
	animation: hpSlideDown 0.8s ease forwards;
}

.hp-hero .middle-text.animate {
	animation: hpBigEntrance 1.2s ease-out forwards;
}

.hp-hero .bottom-text.animate {
	animation: hpSlideUp 0.8s ease forwards;
}

.hp-hero hr.hr-right.animate,
.hp-hero hr.hr-left.animate {
	animation: hpGrowLine 0.8s ease-in-out forwards;
}

.hp-hero .locations .loc.animate {
	animation: hpSlideDown 0.6s ease forwards;
}

.hp-hero .hero-cta.animate {
	animation: hpFadeUp 0.6s ease forwards;
}


/* ===========================
   TAPE MEASURE DIVIDER
   =========================== */
.hp-tape-measure {
	background-color: #fff;
	padding: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.hp-tape-track {
	width: 100%;
	height: 32px;
	background: linear-gradient(180deg, #d4952e 0%, #C5932A 40%, #A67B1E 100%);
	position: relative;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.2);
}

.hp-tape-ticks {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		repeating-linear-gradient(90deg,
			transparent,
			transparent 49px,
			rgba(0,0,0,0.5) 49px,
			rgba(0,0,0,0.5) 50px
		),
		repeating-linear-gradient(90deg,
			transparent,
			transparent 24px,
			rgba(0,0,0,0.2) 24px,
			rgba(0,0,0,0.2) 25px
		),
		repeating-linear-gradient(90deg,
			transparent,
			transparent 9px,
			rgba(0,0,0,0.12) 9px,
			rgba(0,0,0,0.12) 10px
		);
	background-size: 50px 100%, 25px 60%, 10px 35%;
	background-position: 0 0, 0 0, 0 0;
	background-repeat: repeat-x;
}

.hp-tape-ticks::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: repeating-linear-gradient(90deg,
		transparent,
		transparent 46px,
		transparent 46px,
		transparent 50px
	);
	pointer-events: none;
}


/* ===========================
   PENCIL SKETCH UNDERLINES
   Wavy gold line under section headings
   =========================== */
.hp-badges-intro h2,
.hp-areas h2,
.hp-cta-text h2,
.ps-intro-title,
.ps-experience-title,
.quote-process-section h2,
.testimonials-title {
	position: relative;
	display: inline-block;
	padding-bottom: 18px;
}

.hp-badges-intro h2::after,
.hp-areas h2::after,
.hp-cta-text h2::after,
.ps-intro-title::after,
.ps-experience-title::after,
.quote-process-section h2::after,
.testimonials-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='6'%3E%3Cpath d='M0,3 Q8,0.5 16,3 T32,3 T48,3 T64,3 T80,3' fill='none' stroke='%23C5932A' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}


/* ===========================
   PARALLAX CALLOUT SECTION
   =========================== */
.hp-parallax {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	padding: 100px 0;
	text-align: center;
	color: #fff;
}

.hp-parallax-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(27,42,74,0.85) 0%, rgba(30,61,92,0.75) 50%, rgba(27,42,74,0.85) 100%);
}

.hp-parallax-content {
	position: relative;
	z-index: 2;
}

.hp-parallax-label {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #C5932A;
	margin-bottom: 15px;
}

.hp-parallax h2 {
	font-family: 'Poppins', 'Ubuntu', sans-serif;
	font-size: 32px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 30px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 2px;
}

@media (min-width: 640px) {
	.hp-parallax {
		padding: 140px 0;
	}
	.hp-parallax h2 {
		font-size: 48px;
	}
	.hp-parallax-label {
		font-size: 16px;
	}
}

/* Disable parallax on mobile (performance) */
@media (max-width: 1023px) {
	.hp-parallax {
		background-attachment: scroll;
	}
}


/* ===========================
   BADGE ICON HOVER GLOW
   =========================== */
.hp-badge:hover .hp-badge-icon {
	box-shadow: 0 0 20px rgba(197,147,42,0.4);
	background: #C5932A;
}

.hp-badge:hover .hp-badge-icon i {
	color: #fff;
}

.hp-badge-icon {
	transition: all 0.4s ease;
}


/* ===========================
   SUBTLE WOOD GRAIN TEXTURE
   on light sections
   =========================== */
.hp-badges,
.quote-process-section {
	background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}


/* ===========================
   GOLD ACCENT BORDER ON
   HOVER for router squares
   =========================== */
.home-router .four-square::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: #C5932A;
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.home-router .four-square:hover::after {
	transform: scaleX(1);
}

.home-router .four-square {
	position: relative;
	overflow: hidden;
}