/*
 * Tablet/desktop presentation layer for the public site.
 * Mobile styles (up to 767px) remain owned by the existing theme and page CSS.
 */

.osr-trust-title {
	font-size: clamp(17px, 4.8vw, 24px) !important;
	line-height: 1.3 !important;
	white-space: nowrap;
}

/* Current reception guidance used in place of obsolete pest emergency art. */
.osr-pest-hours-hero {
	box-sizing: border-box;
	width: 100%;
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
	padding: 48px 24px;
	border-radius: 18px;
	background: linear-gradient(145deg, #06152f 0%, #0b2f66 62%, #1355a2 100%);
	box-shadow: 0 16px 38px rgba(4, 24, 58, 0.18);
	color: #fff;
	text-align: center;
}

.osr-pest-hours-kicker {
	display: inline-block;
	margin-bottom: 18px;
	padding: 7px 16px;
	border-radius: 999px;
	background: #e52b2f;
	font-weight: 800;
}

.osr-pest-hours-hero h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(31px, 7vw, 60px);
	line-height: 1.25;
}

.osr-pest-hours-hero h1 strong {
	color: #ffd74a;
}

.osr-pest-hours-hero > p {
	margin: 24px auto 0;
	font-size: 15px;
	line-height: 1.8;
}

.osr-pest-hours-list {
	display: grid;
	margin-top: 28px;
	gap: 10px;
}

.osr-pest-hours-list span {
	padding: 12px 10px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	font-weight: 700;
}

.osr-hours-icon {
	display: grid;
	width: 100%;
	min-height: 150px;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient(145deg, #e8f2ff, #f7fbff);
	font-size: 56px;
}

@media (min-width: 768px) {
	:root {
		--osr-site-max: 1200px;
		--osr-site-gutter: 24px;
		--osr-section-gap: 64px;
	}

	.osr-pest-hours-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Shared theme containers and heading rhythm. */
	body.page-id-30 .site-header-container.container,
	body.page-id-32 .site-header-container.container,
	body.page-id-34 .site-header-container.container,
	body.page-id-36 .site-header-container.container,
	body.page-id-38 .site-header-container.container,
	body.osr-service-detail .site-header-container.container,
	body.page-id-30 .site-body-container.container,
	body.page-id-32 .site-body-container.container,
	body.page-id-34 .site-body-container.container,
	body.page-id-36 .site-body-container.container,
	body.page-id-38 .site-body-container.container,
	body.osr-service-detail .site-body-container.container {
		box-sizing: border-box;
		max-width: calc(var(--osr-site-max) + (var(--osr-site-gutter) * 2)) !important;
		padding-right: var(--osr-site-gutter) !important;
		padding-left: var(--osr-site-gutter) !important;
	}

	body.page-id-30 .tp-center,
	body.page-id-30 .tp .inner,
	body.page-id-30 .tp-svc-grid,
	body.page-id-30 .tp-svc-links,
	body.page-id-30 .tp-promise-grid,
	body.page-id-30 .tp-flow-grid,
	body.page-id-30 .tp-voice-grid,
	body.page-id-30 .tp-faq-list,
	body.page-id-32 .sl-center,
	body.page-id-32 .sl-page .inner,
	body.page-id-32 .sl .inner,
	body.page-id-32 .sl-grid,
	body.page-id-32 .sl-links-grid,
	body.page-id-32 .sl-trust-grid,
	body.page-id-32 .sl-consult-box {
		box-sizing: border-box;
		width: calc(100% - (var(--osr-site-gutter) * 2)) !important;
		max-width: var(--osr-site-max) !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	body.page-id-30 .tp-svc-grid,
	body.page-id-30 .tp-svc-links,
	body.page-id-30 .tp-promise-grid,
	body.page-id-30 .tp-flow-grid,
	body.page-id-30 .tp-voice-grid,
	body.page-id-32 .sl-grid,
	body.page-id-32 .sl-links-grid,
	body.page-id-32 .sl-trust-grid {
		width: 100% !important;
	}

	body.page-id-30 .tp-section-title,
	body.page-id-32 .sl-section-title,
	body.page-id-36 .wk-section-title {
		margin-bottom: 28px !important;
	}

	/* Home and service-list cards: balanced tablet layout and aligned actions. */
	body.page-id-30 .tp-svc-grid,
	body.page-id-32 .sl-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}

	body.page-id-30 .tp-svc-card,
	body.page-id-32 .sl-card {
		display: flex !important;
		min-width: 0;
		height: 100%;
		flex-direction: column;
		overflow: hidden;
	}

	body.page-id-30 .tp-svc-img,
	body.page-id-32 .sl-img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	body.page-id-30 .tp-svc-img img,
	body.page-id-32 .sl-img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}

	body.page-id-30 .tp-svc-body,
	body.page-id-32 .sl-body {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		flex: 1 1 auto;
		flex-direction: column;
	}

	body.page-id-30 .tp-svc-arrow,
	body.page-id-32 .sl-btn,
	body.page-id-32 .sl-card a[class*="btn"] {
		margin-top: auto !important;
	}

	/* Booking page: retain the single-column flow while using desktop space. */
	body.page-id-38 .main-section--col--two,
	body.page-id-38 #main,
	body.page-id-38 #post-38 {
		float: none !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: none !important;
	}

	body.page-id-38 .sub-section--col--two,
	body.page-id-38 .sub-section {
		display: none !important;
	}

	body.page-id-38 #post-38 .entry-body {
		box-sizing: border-box;
		width: 100%;
		max-width: 1100px;
		margin-right: auto;
		margin-left: auto;
	}

	body.page-id-38 #post-38 .entry-body > img,
	body.page-id-38 #post-38 .entry-body > picture,
	body.page-id-38 #post-38 .entry-body > picture img {
		display: block;
		width: 100% !important;
		height: auto;
	}

	body.page-id-38 .osr-payment-notice {
		max-width: 900px;
	}

	/* Fixed-page detail markup carries a 480px inline cap. Widen and center it
	 * from tablet upward while leaving the existing mobile layout untouched. */
	body.osr-service-detail .svc-page,
	body.osr-service-detail .pn {
		box-sizing: border-box;
		width: calc(100% - (var(--osr-site-gutter) * 2)) !important;
		max-width: var(--osr-site-max) !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	/* Works/reviews: one shared centered content rail. */
	body.page-id-36 .wk-stats,
	body.page-id-36 .wk-filter,
	body.page-id-36 .wk-grid,
	body.page-id-36 .wk-reviews,
	body.page-id-36 .wk-linkgrid,
	body.page-id-36 .wk-cta {
		box-sizing: border-box;
		width: calc(100% - (var(--osr-site-gutter) * 2)) !important;
		max-width: var(--osr-site-max) !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	body.page-id-36 .wk-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}

	body.page-id-36 .wk-stat {
		box-sizing: border-box;
		min-width: 0;
		padding: 24px 16px !important;
	}

	body.page-id-36 .wk-filter {
		display: grid !important;
		grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
		align-items: center;
		gap: 24px;
	}

	body.page-id-36 .wk-search {
		box-sizing: border-box;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	body.page-id-36 .wk-chips {
		justify-content: flex-start !important;
		margin: 0 !important;
	}

	body.page-id-36 .wk-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}

	body.page-id-36 .wk-reviews {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}

	body.page-id-36 .wk-card,
	body.page-id-36 .wk-review {
		height: 100%;
	}
}

@media (min-width: 1024px) {
	:root {
		--osr-site-gutter: 32px;
		--osr-section-gap: 80px;
	}

	body.page-id-30 .tp-svc-grid,
	body.page-id-32 .sl-grid,
	body.page-id-36 .wk-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 28px !important;
	}

	/*
	 * Desktop pages share one 1200px content rail.  Several fixed pages contain
	 * inline max-width and negative-margin rules that were originally used to
	 * escape Lightning's two-column layout; neutralize those rules here.
	 */
	body.page-id-32 .main-section--col--two,
	body.page-id-34 .main-section--col--two,
	body.page-id-38 .main-section--col--two,
	body.osr-service-detail .main-section--col--two,
	body.page-id-32 #main,
	body.page-id-34 #main,
	body.page-id-38 #main,
	body.osr-service-detail #main,
	body.page-id-32 #post-32,
	body.page-id-34 #post-34,
	body.page-id-38 #post-38,
	body.osr-service-detail .entry-body {
		float: none !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: none !important;
	}

	body.page-id-32 .sub-section,
	body.page-id-34 .sub-section,
	body.page-id-38 .sub-section,
	body.osr-service-detail .sub-section {
		display: none !important;
	}

	body.page-id-32 .sl.rx-fullbleed,
	body.page-id-34 .pr-page.rx-fullbleed,
	body.osr-service-detail .svc-page,
	body.osr-service-detail .pn {
		box-sizing: border-box;
		width: 100% !important;
		max-width: var(--osr-site-max) !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	/* Home and service-list cards use the full common rail. */
	body.page-id-30 .tp .inner,
	body.page-id-30 .tp-services .inner,
	body.page-id-32 .sl .inner,
	body.page-id-32 .sl-page .inner {
		box-sizing: border-box;
		width: 100% !important;
		max-width: var(--osr-site-max) !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	/* Keep the complete home hero visible while reducing its desktop height. */
	body.page-id-30 .tp > img:first-of-type {
		display: block;
		width: 100% !important;
		max-width: 1300px !important;
		height: auto !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	/* Booking flow remains one column, but no longer looks phone-sized. */
	body.page-id-38 #post-38 .entry-body {
		max-width: 1000px;
	}

	body.page-id-38 .form-wrap {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 960px !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	/* Price page: all major sections follow the same rail and spacing. */
	body.page-id-34 .site-body {
		padding-top: 56px !important;
	}

	body.page-id-34 .pr-page {
		width: 100% !important;
		max-width: var(--osr-site-max) !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	body.page-id-34 .pr-sec {
		box-sizing: border-box;
		width: 100% !important;
		padding: 68px 0 !important;
	}

	body.page-id-34 .pr-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 28px !important;
	}

	body.page-id-34 .pr-opt-list {
		display: grid !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: none !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		padding: 18px !important;
	}

	body.page-id-34 .pr-opt-row {
		box-sizing: border-box;
		min-width: 0;
		height: 100%;
		padding: 18px !important;
		border: 1px solid #d7e0ee !important;
		border-radius: 12px;
		background: #fff;
	}

	body.page-id-34 .pr-flow {
		display: grid !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: none !important;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 16px;
	}

	body.page-id-34 .pr-flow-item {
		display: flex !important;
		box-sizing: border-box;
		min-width: 0;
		height: 100%;
		flex-direction: column;
		align-items: center;
		padding: 22px 14px !important;
		border: 1px solid #d7e0ee !important;
		border-radius: 14px;
		background: #fff;
		text-align: center;
	}

	body.page-id-34 .pr-safe-grid,
	body.page-id-34 .pr-cta-btns {
		width: 100% !important;
		max-width: 900px !important;
	}

	body.page-id-34 .pr-faq-list {
		width: 100% !important;
		max-width: none !important;
	}

	/* Air-conditioner detail: center the page and widen its card grids. */
	body.osr-service-detail .svc-page,
	body.osr-service-detail .pn {
		box-sizing: border-box;
		width: 100% !important;
		max-width: var(--osr-site-max) !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	body.osr-service-detail .svc-page > img,
	body.osr-service-detail .pn > .pn-hero-img {
		display: block;
		width: 100% !important;
		max-width: 1024px;
		height: auto !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	body.osr-service-detail .record-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}

	body.osr-service-detail .related-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 20px !important;
	}

	body.page-id-30 .tp-stats-grid,
	body.page-id-36 .wk-stats {
		width: min(900px, calc(100% - (var(--osr-site-gutter) * 2))) !important;
		max-width: 900px !important;
	}

	.osr-trust-title {
		font-size: 26px !important;
	}
}

@media (min-width: 1280px) {
	:root {
		--osr-site-gutter: 40px;
	}
}