/* ==========================================================================
   SKJ Facilities Management — static site stylesheet
   Transliterated from the live site's own code:
   - Neve theme header/footer (style-legacy.min.css + customizer inline CSS)
   - Elementor post-207.css (homepage sections)
   - SKJ child theme style.css (global typography)
   ========================================================================== */

/* ---------- Base (SKJ child theme) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } /* font-smoothing: live Neve html rule (style-legacy.min.css) — M2 builder finding; scroll-behavior: live smooth-scrolls same-page anchors ("Contact Us" → #get-in-touch) — JB M5 walkthrough finding */
body {
	margin: 0;
	font-family: "Poppins", Sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 27px;
	color: #616161;
	background-color: #ffffff;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Libre Baskerville", Sans-serif;
	font-weight: 600;
	color: #313131;
}
p { margin: 0 0 20px; }
a { color: #005496; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; border: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}

/* Skip to content (Neve .neve-skip-link) */
.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 10px 20px;
	background-color: #ffffff;
	color: #005496;
	z-index: 100000;
}
.skip-link:focus {
	left: 0;
	top: 0;
	width: auto;
	height: auto;
}

main { overflow-x: hidden; }

/* Section content container (Elementor boxed 1140px + 10px column gap) */
.wrap { max-width: 1140px; margin: 0 auto; padding: 10px; }

/* Watermark giant letter (Poppins 273px/700, per post-207.css).
   Letter-spacing exists only in the live site's <=767px media block. */
.watermark {
	font-family: "Poppins", Sans-serif;
	font-size: 273px;
	font-weight: 700;
	line-height: 273px;
	color: rgba(224, 224, 224, 0.3);
	text-align: center;
	margin: -20px 0 -150px 0;
}
.watermark.wm-align-left { text-align: left; margin: -15px 0 -200px 0; }

/* Section heading + tagline (Libre Baskerville 50px / Poppins 18px) */
.section-title {
	font-size: 50px;
	font-weight: 600;
	line-height: 75px;
	text-transform: capitalize;
	color: #313131;
	text-align: center;
	margin: 20px 0;
	padding: 0 82px;
}
.section-title.on-dark { color: #ffffff; text-transform: none; }
.section-tag {
	font-size: 18px;
	font-weight: 400;
	color: #616161;
	text-align: center;
	margin: 0 0 35px;
}
.section-tag.on-dark { color: #ffffff; }

/* Shared overlay for dark image-background sections (#262732 @ 0.85) */
.has-overlay { position: relative; }
.has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #262732;
	opacity: 0.85;
}
.has-overlay > .wrap { position: relative; z-index: 1; }

/* Shared <=767px rules (per post-207.css mobile block; letter-spacing on
   watermarks exists ONLY at this breakpoint on the live site) */
@media (max-width: 767px) {
	.watermark.wm-f { letter-spacing: -9px; }
	.watermark.wm-m { letter-spacing: -20px; }
	.watermark.wm-s { letter-spacing: -25px; }
	.watermark.wm-w { letter-spacing: -30px; }
	.watermark.wm-t { letter-spacing: -25px; }
	.watermark.wm-b { letter-spacing: -25px; }
	.section-title { font-size: 31px; line-height: 46px; padding: 0; }
	.section-tag { line-height: 27px; padding: 0 5px; }
}

/* ==========================================================================
   Header (Neve hfg_header — STATIC, not sticky)
   ========================================================================== */
.site-header {
	position: relative;
	background-color: #ffffff;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}
.header-row { display: none; }
.header-desktop { display: block; }
.header-inner {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-logo { padding: 10px 0; margin: 4px 0; }
@media (min-width: 960px) { .site-logo { margin: 8px 0; } }
.site-logo a { display: block; }
.site-logo img { max-width: 165px; max-height: 80px; display: block; }

/* Primary nav */
.nav-ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 0 auto;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6em;
}
.nav-ul li { position: relative; padding: 10px 0; }
.nav-ul li:not(:last-child) { margin-right: 20px; }
.nav-ul a {
	display: flex;
	align-items: center;
	min-height: 25px;
	color: #393939;
	transition: color 0.3s ease;
}
.nav-ul a:hover, .nav-ul a:focus { color: #005496; }
.nav-ul li.current-menu-item > a { color: #005496; }
/* Live custom CSS pins Contact Us to #404248 (!important — no hover change) */
.nav-ul li.nav-contact > a, .nav-ul li.nav-contact > a:hover { color: #404248; }
.nav-search-icon svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Inline-expanding search box (Neve minimal mode) */
.nav-search-item { display: flex; align-items: center; }
.nav-search {
	position: absolute;
	top: 100%;
	right: 0;
	width: auto;
	padding: 10px 20px;
	background-color: #ffffff;
	border-top: 1px solid #ededed;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 100;
}
.nav-search-item.active .nav-search { opacity: 1; visibility: visible; }
.nav-search form { display: flex; align-items: center; }
.nav-search input[type="search"] {
	width: 200px;
	margin: 0;
	padding: 7px 12px;
	font-size: 14px;
	color: #393939;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 3px;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
}
.nav-search .search-submit {
	margin-left: 4px;
	padding: 6px 8px;
	background: none;
	border: 0;
	cursor: pointer;
	color: #393939;
}
.nav-search .search-submit svg { width: 15px; height: 15px; fill: #c9c9c9; display: block; }
.nav-clickaway-overlay {
	position: fixed;
	left: 0; right: 0; top: 0;
	width: 100%;
	height: 100vh;
	z-index: 90;
}

/* Hamburger (Neve .navbar-toggle) */
.navbar-toggle-wrapper { display: flex; align-items: center; }
.navbar-toggle {
	border-radius: 3px;
	background: none;
	cursor: pointer;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	border: 1px solid #393939;
}
.navbar-toggle:hover { background: none; box-shadow: none; }
.navbar-toggle .bars { display: block; }
.icon-bar {
	transition: all 0.1s ease;
	position: relative;
	display: block;
	border-radius: 2px;
	width: 15px;
	height: 2px;
	background-color: #393939;
}
.icon-bar:nth-child(2) { margin: 3px 0; }
body.menu-open .navbar-toggle .icon-bar:nth-child(1) { transform: rotate(45deg); top: 5px; }
body.menu-open .navbar-toggle .icon-bar:nth-child(2) { opacity: 0; }
body.menu-open .navbar-toggle .icon-bar:nth-child(3) { transform: rotate(-45deg); bottom: 5px; }
.navbar-toggle-close .icon-bar:nth-child(1) { transform: rotate(45deg); top: 5px; }
.navbar-toggle-close .icon-bar:nth-child(2) { opacity: 0; }
.navbar-toggle-close .icon-bar:nth-child(3) { transform: rotate(-45deg); bottom: 5px; }

/* Mobile slide-in sidebar (Neve .header-menu-sidebar, slide_left) */
.menu-sidebar {
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 360px;
	max-width: 100%;
	height: 100vh;
	background-color: #ffffff;
	z-index: 999900;
	visibility: hidden;
	display: flex;
	transform: translateX(-100%);
	transition: all 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.menu-sidebar-bg {
	position: relative;
	display: flex;
	flex-direction: column;
	word-wrap: break-word;
	width: 100%;
}
body.menu-open .menu-sidebar {
	transform: translate3d(0, 0, 0);
	visibility: visible;
}
.close-sidebar-panel {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px 10px;
	z-index: 999910;
}
.menu-sidebar-inner { padding: 20px 0; overflow: auto; height: 100%; }
.menu-sidebar-inner .nav-ul { flex-direction: column; align-items: stretch; margin: 0; }
.menu-sidebar-inner .nav-ul li { width: 100%; padding: 3px 20px; margin-right: 0 !important; }
.menu-sidebar-inner .nav-ul li a { padding: 3px 0; justify-content: flex-start; width: 100%; }
.menu-sidebar-inner .nav-search-item { display: block; }
.menu-sidebar-inner .nav-search { left: 20px; right: auto; }

.menu-sidebar-overlay {
	position: fixed;
	top: 0; bottom: 0; right: 0; left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999899;
	transition: all 0.3s linear;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
body.menu-open .menu-sidebar-overlay {
	visibility: visible;
	opacity: 1;
	pointer-events: unset;
}

/* Header responsive switch (Neve: desktop >= 960px) */
@media (max-width: 959px) {
	.header-desktop { display: none; }
	.header-mobile { display: block; }
	.site-logo img { max-width: 120px; }
}

/* ==========================================================================
   Footer (Neve footer-top; footer-bottom credit row hidden on live)
   ========================================================================== */
.site-footer { position: relative; z-index: 11; background-color: #24292e; color: #ffffff; }
.footer-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4px 15px;
}
@media (min-width: 960px) {
	.footer-inner { min-height: 50px; padding: 0 15px; }
}
.site-footer p { margin: 0; }

/* ==========================================================================
   Section 1 — HERO (post-207: 6bea8fc8)
   ========================================================================== */
.hero {
	background-image: url("/wp-content/uploads/2018/12/entrance-way.jpg");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0 0 70px;
	padding: 120px 0 80px;
	text-align: center;
}
.hero-title {
	font-size: 60px;
	font-weight: 500;
	line-height: 85px;
	color: #ffffff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	margin: 0 100px 18px;
}
.hero-ctas { display: flex; margin: 48px 0 0; padding: 0 40px 0 60px; }
.hero-cta { flex: 0 0 50%; max-width: 50%; padding: 0 10px; }
.hero-cta-right { text-align: right; }
.hero-cta-left { text-align: left; padding-left: 13px; }
.skj-button {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 50px;
	color: #ffffff;
	border-radius: 30px;
	padding: 0 40px;
	transition: opacity 0.3s ease;
}
.skj-button:hover { color: #ffffff; opacity: 0.9; }
.skj-button-light, .skj-button-light:hover, .skj-button-light:focus { background-color: #4777ae; }
.skj-button-dark, .skj-button-dark:hover, .skj-button-dark:focus { background-color: #005596; }
.hero-pills { display: flex; margin: 70px 0 30px; }
.hero-pill { flex: 0 0 33.333%; max-width: 33.333%; text-align: center; }
.hero-pill-icon {
	font-family: "Poppins", Sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 12px;
}
.hero-pill-icon i { font-size: 2.8em; color: #ffffff; }
.hero-pill-label {
	font-size: 18px;
	font-weight: 500;
	color: #ffffff;
	margin: 0;
}
@media (min-width: 1025px) {
	.hero { background-attachment: fixed; }
}
@media (max-width: 1024px) {
	.hero { margin-bottom: 0; }
	.hero-title { margin: 0; }
	.hero-ctas { margin-top: 30px; }
}
@media (max-width: 767px) {
	.hero { padding: 75px 0; }
	.hero-title { font-size: 37px; line-height: 53px; margin: 0 0 18px; }
	.hero-ctas { flex-wrap: wrap; padding: 0; margin-top: 38px; }
	.hero-cta { flex: 0 0 100%; max-width: 100%; text-align: center; padding: 0; }
	.hero-cta-right { margin: 25px 0 0; }
	.hero-cta-left { margin: 25px 0; }
	.hero-pills { flex-wrap: wrap; margin: 55px 0 0; }
	.hero-pill { flex: 0 0 100%; max-width: 100%; margin: 0 0 45px; }
}

/* ==========================================================================
   Section 2 — ABOUT (post-207: 450d1c77)
   ========================================================================== */
.about { background-color: #ffffff; padding: 0; }
.about-wrap { max-width: 1170px; margin: 0 auto; display: flex; }
.about-img { flex: 0 0 45.225%; max-width: 45.225%; }
.about-img img { display: block; width: 100%; }
.about-card-col { flex: 0 0 54.775%; max-width: 54.775%; display: flex; }
.about-card {
	background-color: #ffffff;
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.08);
	margin: 70px 0 70px -30px;
	width: 100%;
	position: relative;
	z-index: 1;
}
.about-title { text-align: left; }
.about-text {
	font-size: 15px;
	line-height: 27px;
	color: #616161;
	margin: 22px 0 0;
	padding: 0 70px 0 82px;
}
.color-strip { display: flex; margin: 95px 0 0; padding: 10px 0; }
.color-strip span { flex: 0 0 25%; max-width: 25%; height: 53px; border-bottom: 3px solid; }
.color-strip .cs-1 { border-color: #005596; }
.color-strip .cs-2 { border-color: #c94e14; }
.color-strip .cs-3 { border-color: #656bfc; }
.color-strip .cs-4 { border-color: #141bc9; }
@media (max-width: 1024px) {
	.about { padding: 55px 15px 65px; }
	.about-img { display: none; }
	.about-card-col { flex: 0 0 100%; max-width: 100%; }
	.about-card { margin: 0; }
	.about-text { margin-top: 42px; padding: 0 76px 0 82px; }
	.color-strip { margin-top: 40px; }
}
@media (max-width: 767px) {
	.about { padding: 0; }
	.about .watermark { padding-left: 5px; }
	.about-title { padding-left: 20px; }
	.about-text { padding: 0 18px 0 20px; }
}

/* ==========================================================================
   Section 3 — FOCUS (post-207: d6d86f0)
   ========================================================================== */
.focus { background-color: #f7f7f7; padding: 70px 0; }
.focus-cards { display: flex; flex-wrap: wrap; }
.focus-card {
	flex: 0 0 calc(33.333% - 30px);
	max-width: calc(33.333% - 30px);
	margin: 0 15px;
	background-color: #ffffff;
	padding: 60px 25px 53px;
	border-bottom: 3px solid;
	text-align: center;
}
.fc-border-1 { border-color: #005596; }
.fc-border-2 { border-color: #c94e14; }
.fc-border-3 { border-color: #656bfc; }
.focus-card-title {
	font-family: "Poppins", Sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 53px;
	color: #313131;
	margin: 0 0 10px;
}
.focus-icon { font-size: 2.8em; }
.fc-color-1 { color: #005596; }
.fc-color-2 { color: #c94e14; }
.fc-color-3 { color: #656bfc; }
.focus-card-desc {
	font-size: 15px;
	font-weight: 400;
	line-height: 27px;
	color: #313131;
	margin: 0;
}
@media (max-width: 1024px) and (min-width: 768px) {
	.focus-card { flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); margin-bottom: 15px; }
}
@media (max-width: 767px) {
	.focus-card { flex: 0 0 calc(100% - 30px); max-width: calc(100% - 30px); margin: 25px 15px 0; }
}
@media (max-width: 1024px) {
	.focus .section-tag { font-size: 17px; }
}
@media (max-width: 767px) {
	.focus .section-tag { padding: 0 20px; }
}

/* ==========================================================================
   Section 4 — STATS BAND (post-207: 599b73e; live order: right after Focus)
   ========================================================================== */
.stats {
	background-image: url("/wp-content/uploads/2019/04/skj-facilities-management-bathroom-1690x1080.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 100px 0;
}
.stats-row { display: flex; flex-wrap: wrap; text-align: center; }
.stat { flex: 0 0 33.333%; max-width: 33.333%; }
.stat-head {
	font-size: 20px;
	font-weight: 500;
	color: #ffffff;
	margin: 0 0 15px;
	line-height: 1.68421;
}
.stat-head i { font-size: 2.8em; line-height: 1.68421; color: #ffffff; }
.stat-num, .stat-suffix { color: #ffffff; }
.stat-label {
	font-size: 15px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}
.stat-dot { margin: 55px 0 0; font-size: 20px; line-height: 28px; color: #ffffff; }
@media (min-width: 1025px) {
	.stats { background-attachment: fixed; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.stat { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 767px) {
	.stats { padding: 150px 0 50px; }
	.stats .wrap { padding-top: 0; padding-bottom: 0; }
	.stat { flex: 0 0 100%; max-width: 100%; margin: 0 0 90px; padding: 10px 0; }
}

/* ==========================================================================
   Section 5 — MANAGEMENT (post-207: 490119e0)
   ========================================================================== */
.management { background-color: #f7f7f7; padding: 70px 0; }
.management .section-tag { margin-bottom: 0; }
.mgmt-cards { display: flex; flex-wrap: wrap; margin-top: 20px; padding: 15px 0; }
.person {
	flex: 0 0 calc(33.333% - 30px);
	max-width: calc(33.333% - 30px);
	margin: 0 15px;
	background-color: #ffffff;
	padding: 5px 0 15px;
	border-bottom: 3px solid;
	text-align: center;
}
.p-border-1 { border-color: #005596; }
.p-border-2 { border-color: #c94e14; }
.p-border-3 { border-color: #141bc9; }
.person-photo { margin: 0; }
.person-photo img { display: block; width: 95%; margin: 0 auto; }
.person-name {
	font-family: "Poppins", Sans-serif;
	font-size: 18px;
	font-weight: 500;
	margin: 8px 0 0;
}
.p-color-1 { color: #005596; }
.p-color-2 { color: #c94e14; }
.p-color-3 { color: #141bc9; }
.person-role {
	font-size: 13px;
	font-weight: 400;
	line-height: 27px;
	color: #7a7a7a;
	margin: 0;
}
@media (max-width: 1024px) and (min-width: 768px) {
	.person { flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); margin-bottom: 30px; }
}
@media (max-width: 767px) {
	.person { flex: 0 0 calc(100% - 10px); max-width: calc(100% - 10px); margin: 0 5px 30px; }
	.person:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   Section 6 — SKJ IN DETAIL (post-207: 538b1a0b; alternating staircase)
   ========================================================================== */
.detail { background-color: #ffffff; padding: 70px 0; }
.detail-rows { margin-top: 20px; }
.detail-row { display: flex; flex-wrap: nowrap; max-width: 1140px; margin: 0 auto; padding: 0 10px; }
.detail-row + .detail-row { margin-top: -48px; }
.detail-row.r3, .detail-row.r5 { margin-top: -60px; }
.detail-row.r4, .detail-row.r6 { margin-top: -45px; }
.d-col { flex: 0 0 50%; max-width: 50%; display: flex; position: relative; }
.d-col-card { z-index: 1; }
.d-card {
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: #ffffff;
	box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
	border-bottom: 3px solid;
	padding: 25px 40px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
.detail-row.r1 .d-card { padding-left: 38px; }
.row-left .d-card { margin: -20px 108px 80px 0; }
.detail-row.r1.row-left .d-card { margin-top: -15px; }
.row-right .d-card { margin: -30px 0 80px 670px; }
.dc-1 { border-color: #141ac9; }
.dc-2 { border-color: #656afc; }
.dc-3 { border-color: #005496; }
.dc-4 { border-color: #a36229; }
.dc-5 { border-color: #c94e14; }
.dc-6 { border-color: #141ac9; }
.d-num {
	font-family: "Libre Baskerville", Sans-serif;
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	color: #efefef;
	margin: 0 290px -65px 0;
	padding: 0 0 20px;
	width: 100%;
}
.d-title {
	font-family: "Poppins", Sans-serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 40px;
	text-transform: capitalize;
	color: #313131;
	margin: 20px 0 10px 80px;
	width: 100%;
}
.d-text {
	font-size: 15px;
	font-weight: 400;
	line-height: 27px;
	color: #616161;
	margin: 20px 0 0 80px;
	padding-right: 15px;
	width: 100%;
}
.d-text p { margin: 0 0 20px; }
.d-img { width: 100%; margin-left: -280px; padding: 10px; }
.d-img img { display: block; width: 540px; max-width: 100%; }
@media (max-width: 1024px) and (min-width: 768px) {
	.detail-row { flex-wrap: wrap; padding: 0; }
	.detail-row + .detail-row, .detail-row.r3, .detail-row.r4, .detail-row.r5, .detail-row.r6 { margin-top: -1px; }
	.d-col { flex: 0 0 100%; max-width: 100%; }
	.row-left .d-card, .detail-row.r1.row-left .d-card { margin: 1px 270px -325px 0; padding: 0; }
	.row-right .d-card { margin: 1px 0 -325px 270px; padding: 0; }
	.d-num { margin: 38px 38px -45px; padding: 0; }
	/* live post-207 tablet values: rows 3–6 numerals use -65px bottom */
	.detail-row.r3 .d-num, .detail-row.r4 .d-num, .detail-row.r5 .d-num, .detail-row.r6 .d-num { margin-bottom: -65px; }
	.d-title { margin: 20px 38px 0 120px; }
	.d-text { margin: 20px 60px 0 120px; padding: 0; }
	.d-img { margin-left: 0; padding: 0; }
}
@media (max-width: 767px) {
	.detail-row { flex-wrap: wrap; padding: 0; }
	.detail-row + .detail-row, .detail-row.r3, .detail-row.r4, .detail-row.r5, .detail-row.r6 { margin-top: -1px; }
	.detail-row.r1 { margin-top: 75px; }
	.d-col { flex: 0 0 100%; max-width: 100%; }
	.row-left .d-card, .row-right .d-card, .detail-row.r1.row-left .d-card { margin: 0; padding: 0 0 38px; }
	.d-num { margin: 38px 38px -45px; padding: 0; }
	/* live cascade: rows 3–6 numerals keep -65px bottom at mobile too */
	.detail-row.r3 .d-num, .detail-row.r4 .d-num, .detail-row.r5 .d-num, .detail-row.r6 .d-num { margin-bottom: -65px; }
	.d-title { margin: 20px 70px 0 20px; text-align: right; }
	.d-text { margin: 20px 0 0; padding: 0 55px 0 40px; }
	.d-col-img { margin-top: -135px; }
	.d-img { margin-left: 0; padding: 0; text-align: center; }
	.d-img img { display: inline-block; }
}

/* ==========================================================================
   Section 7 (live order) — YEARS OF SERVICE COUNTER BAND (post-207: b60dd7f)
   ========================================================================== */
.years {
	background-image: url("/wp-content/uploads/2018/12/snow-plow-3.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 140px 0;
	text-align: center;
}
.counter { display: flex; flex-direction: column; align-items: center; }
.counter-num {
	display: block;
	font-size: 69px;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
}
.counter-title {
	font-size: 19px;
	font-weight: 400;
	line-height: 2.5;
	color: #ffffff;
	margin: 0;
}
@media (min-width: 1025px) {
	.years { background-attachment: fixed; }
}
@media (max-width: 767px) {
	.years { padding: 70px 0; }
}

/* ==========================================================================
   Section 8 — WHY SELECT US (post-207: 83735d3)
   ========================================================================== */
.why { background-color: #ffffff; padding: 70px 0; }
.why .section-tag { margin-bottom: 0; }
.why-row { display: flex; flex-wrap: wrap; }
.why-row-1 { margin: 60px 0 70px; }
.why-row-2 { margin: 0 0 70px; }
.why-box { flex: 0 0 calc(33.333% - 50px); max-width: calc(33.333% - 50px); margin: 0 25px; }
.why-title {
	font-family: "Poppins", Sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	color: #313131;
	min-height: 63px;
}
.why-icon { float: left; font-size: 3.5em; line-height: 1; }
.why-text {
	font-size: 15px;
	font-weight: 400;
	line-height: 27px;
	color: #616161;
	margin: 45px 0 20px;
}
.why-cta { display: flex; align-items: center; }
.why-cta-text { flex: 0 0 59.911%; max-width: 59.911%; padding-right: 25px; text-align: right; }
.why-cta-text h4 {
	font-family: "Poppins", Sans-serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 40px;
	color: #313131;
	margin: 0;
}
.why-cta-btn { flex: 0 0 40.089%; max-width: 40.089%; }
.skj-button-primary, .skj-button-primary:hover, .skj-button-primary:focus { background-color: #005496; }
@media (max-width: 1024px) {
	.why { padding: 0 0 65px; }
	.why-cta { margin-top: 75px; }
}
@media (max-width: 767px) {
	.why { padding: 70px 0; }
	.why-row-1 { margin: 95px 0 0; }
	.why-row-2 { margin: 0 0 70px; }
	.why-box { flex: 0 0 calc(100% - 50px); max-width: calc(100% - 50px); margin: 0 25px 70px; }
	.why-cta { flex-wrap: wrap; margin-top: 0; }
	.why-cta-text { flex: 0 0 100%; max-width: 100%; padding: 0 10px 10px; text-align: center; }
	.why-cta-btn { flex: 0 0 100%; max-width: 100%; padding: 20px 0 25px; text-align: center; }
}

/* ==========================================================================
   Section 9 — TESTIMONIALS (post-207: 61d7c7d0)
   ========================================================================== */
.testimonials {
	background-image: url("/wp-content/uploads/2019/04/skj-facilities-management-customer-background-1690x1080.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 70px 0;
}
.testi-row { display: flex; align-items: center; }
.testi-img { flex: 0 0 33.661%; max-width: 33.661%; }
.testi-img img { display: block; width: 100%; border: 10px solid rgba(0, 0, 0, 0.2); }
.testi-quote {
	flex: 0 0 66.339%;
	max-width: 66.339%;
	background-color: #ffffff;
	background-image: url("/wp-content/uploads/2018/12/alexis-blockquote6.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 44px 0 45px;
	padding: 25px 0 0;
}
.quote-text {
	font-size: 15px;
	font-weight: 400;
	line-height: 27px;
	color: #616161;
	padding: 0 75px;
}
.quote-strip { margin: 40px 0 45px; padding: 0; }
.quote-strip span { height: 0; }
@media (min-width: 1025px) {
	.testimonials { background-attachment: fixed; }
}
@media (max-width: 1024px) {
	.testi-img { display: none; }
	.testi-quote { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 767px) {
	.quote-text { padding: 0 55px 0 60px; }
}

/* ==========================================================================
   Section 10 — BLOG (post-207: 5ddfa9f; obfx-posts-grid, 2-up desktop)
   ========================================================================== */
.blog { background-color: #f7f7f7; padding: 70px 0; }
.blog-grid-wrap { padding-left: 30px; margin-top: 20px; }
.blog-grid { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.blog-card {
	flex: 0 0 calc(50% - 30px);
	max-width: calc(50% - 30px);
	margin: 0 15px 15px;
	background-color: #ffffff;
	padding: 20px 35px;
	box-shadow: 0 -3px 0 0 #c94e14 inset;
}
.blog-card-img {
	display: block;
	overflow: hidden;
	position: relative;
	height: 275px;
	margin: 0 0 10px;
}
.blog-card-img a { display: block; height: 100%; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.blog-card-title {
	font-family: "Poppins", Sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	margin: 8px 0 0;
}
.blog-card-title a { color: #313131; }
.blog-card-meta { margin: 3px 0 10px; font-size: 15px; line-height: 27px; }
.blog-card-meta > span { margin-right: 10px; color: #616161; }
.blog-card-meta > span:last-of-type { margin-right: 0; }
.blog-card-meta i { margin-right: 8px; color: #005496; }
.blog-card-meta a, .blog-card-meta .blog-cat-link { color: #005496; }
.blog-card-excerpt {
	font-size: 15px;
	font-weight: 400;
	line-height: 27px;
	color: #616161;
	margin: 0 0 10px;
}
.blog-card-footer a {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 27px;
	color: #ffffff;
	background-color: #005496;
	padding: 0.375rem 0.75rem;
	border-radius: 30px;
}
.blog-card-footer a:hover { color: #ffffff; }
@media (max-width: 1024px) {
	.blog { padding: 0 0 60px; }
	.blog-grid-wrap { padding-left: 0; }
}
@media (max-width: 992px) {
	.blog-card { flex: 0 0 calc(100% - 30px); max-width: calc(100% - 30px); }
}
@media (max-width: 767px) {
	.blog { padding: 70px 0; }
}

/* ==========================================================================
   Section 11 — GET IN TOUCH (post-207: 175239c6)
   ========================================================================== */
.contact {
	background-color: #f7f7f7;
	background-image: url("/wp-content/uploads/2019/07/skj-facilities-management-lawn-care-2048x1072.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 70px 0;
}

/* Contact form (was Gravity Forms id 2; Netlify + honeypot now) */
.contact-form-wrap {
	max-width: 840px;
	margin: 0 auto 30px;
	padding: 0 20px;
	font-family: "Poppins", Sans-serif;
}
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 2%; grid-row-gap: 16px; }
.form-field { grid-column: 1 / -1; min-width: 0; }
.form-half { grid-column: span 6; }
.form-full { grid-column: span 12; }
.form-field input, .form-field textarea {
	display: inline-block;
	width: 100%;
	font-size: 15px;
	line-height: 27px;
	color: #393939;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 3px;
	padding: 8px;
	margin: 0;
	outline: 0;
	transition: all 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}
.form-field textarea { height: 288px; resize: none; font-family: inherit; }
.form-hp { display: none !important; position: absolute !important; left: -9000px; }
.form-submit { grid-column: 7 / 13; }
#cf-submit {
	display: block;
	margin: 14px auto;
	font-family: "Poppins", Sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 50px;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #005496;
	border: none;
	border-radius: 30px;
	padding: 0 40px;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
#cf-submit:hover { opacity: 0.9; }
#skj-form-confirmation {
	padding: 20px;
	background: #ffffff;
	text-align: center;
}
#skj-form-confirmation p { margin: 0; }
@media (max-width: 640px) {
	.form-grid { grid-column-gap: 0; }
	.form-half, .form-submit { grid-column: 1 / -1; }
}

/* Contact info band (post-207: 146e154a) */
.info-band {
	max-width: 1120px;
	margin: 0 auto;
	background-color: rgba(38, 39, 50, 0.85);
	display: flex;
	flex-wrap: wrap;
}
.info-card {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	padding: 50px 0 45px;
	border-bottom: 3px solid;
	text-align: center;
}
.ic-1 { border-color: #feb960; }
.ic-2 { border-color: #656afc; }
.ic-3 { border-color: #c94e14; }
.info-title {
	font-family: "Poppins", Sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 26px;
	margin: 0 0 28px;
}
.ic-1 .info-title { color: #feb960; }
.ic-2 .info-title { color: #656afc; }
.ic-3 .info-title { color: #c94e14; }
.info-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 27px;
	color: #ffffff;
	margin: 0;
}
.info-social { text-align: center; }
a.social-icons { font-size: 1.7em; color: #ffffff; }
a.social-icons:hover { color: #ffffff; }
@media (max-width: 1024px) {
	.contact { padding: 0 0 75px; }
}
@media (max-width: 767px) {
	.contact { padding: 70px 0; }
	.info-band { margin: 70px auto; }
	.info-card { flex: 0 0 100%; max-width: 100%; }
}

/* ==========================================================================
   Entrance animations (was Elementor waypoint + animate.css on live).
   Progressive enhancement: elements are fully visible by default; js/site.js
   adds .anim-hidden on DOMContentLoaded, then IntersectionObserver adds
   .anim-run on first intersection (run-once). Keyframes = animate.css,
   opacity/transform only — zero layout shift.
   ========================================================================== */
@keyframes skj-fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes skj-fadeInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes skj-fadeInDown {
	from { opacity: 0; transform: translate3d(0, -100%, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes skj-fadeInLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes skj-fadeInRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes skj-zoomIn {
	from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	50% { opacity: 1; }
	to { opacity: 1; transform: none; }
}

.anim-hidden { visibility: hidden; }
.anim-run {
	visibility: visible;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
.anim-run[data-anim-slow="1"] { animation-duration: 2s; }
.anim-run[data-anim="fadeIn"] { animation-name: skj-fadeIn; }
.anim-run[data-anim="fadeInUp"] { animation-name: skj-fadeInUp; }
.anim-run[data-anim="fadeInDown"] { animation-name: skj-fadeInDown; }
.anim-run[data-anim="fadeInLeft"] { animation-name: skj-fadeInLeft; }
.anim-run[data-anim="fadeInRight"] { animation-name: skj-fadeInRight; }
.anim-run[data-anim="zoomIn"] { animation-name: skj-zoomIn; }

/* Never hide or animate when the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.anim-hidden { visibility: visible; }
	.anim-run { animation: none; }
}

/* JB directive (final): no entrance motion at <=1024px — defense in depth
   alongside the JS gate; everything renders visible with no animation. */
@media (max-width: 1024px) {
	[data-anim], [data-anim].anim-hidden, [data-anim].anim-run {
		visibility: visible !important;
		animation: none !important;
	}
}