/*
Theme Name: Kindling
Theme URI: https://github.com/matchboxdesigngroup/kindling
Author: Matchbox Design Group
Author URI: https://matchboxdesigngroup.com
Description: A modern, responsive, and accessible block theme for WordPress.
Version: 4.1.42
Requires at least: 6.7
Tested up to: 6.7.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kindling
Tags: full-site-editing, block-theme, accessibility-ready, editor-style, block-patterns, responsive-layout

Kindling WordPress Theme, (C) 2025 Matchbox Design Group, LLC.
Kindling is distributed under the terms of the GNU GPL.
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.0  CSS Reset
   2.0  Custom Styles & Base Typography
   3.0  Solutions & Hero Sections
   4.0  Hero Carousel & Service Areas
   5.0  Navigation & Page-Specific Sections
   6.0  Careers Page Styles
   7.0  Mobile Responsive & Announcement Banner
   8.0  Accessibility - WCAG 2.1 Compliance
   9.0  Column Stacking & Mobile Overrides
   10.0 Markup.io Audit Fixes
   11.0 Responsive Typography Fixes
   12.0 Page-Specific Mobile Fixes (by page-id)
   ========================================================================== */

/**
 * 1.0 CSS Reset
 *
 * Resetting the CSS to a more sane starting point.
 */

/* Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Allow percentage-based heights in the application. */
html,
body,
.wp-site-blocks {
	min-height: 100%;
}

/* Prevent horizontal overflow without creating scroll container */
html,
body {
	overflow-x: clip;
}

/* Remove height from the admin bar of the overall height. */
html {
	height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
	scroll-behavior: smooth;
}

/* Ensure the best type rendering. */
:root {
	font-feature-settings: 'kern';
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

/* Improve text rendering. */
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Improve media defaults. */
img,
picture,
video,
canvas,
svg {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Remove built-in form typography styles. */
input,
button,
textarea,
select {
	font: inherit;
}

/* Avoid text overflows. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
	text-wrap: pretty;
	/* pretty is the nicer result but it isn't supported as well. So balance is here as a fallback */
}

p {
	text-wrap: pretty;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	line-height: 30px;
}

/* Create a root stacking context. */
.wp-site-blocks {
	isolation: isolate;
}

/* Ensure the alt text is visible when an image is missing. */
img {
	font-size: var(--wp--preset--font-size--medium);
	font-style: italic;
	line-height: 1.5;
}

/* Enable view transitions. */
/* Note: scroll-behavior: smooth merged into html selector above */
@view-transition {
	navigation: auto;
}

/* Column overflow prevention - ensure images and content stay within column bounds */
.wp-block-column {
	min-width: 0;
	overflow-wrap: break-word;
}

.wp-block-column img {
	max-width: 100%;
	height: auto;
}

.wp-block-column .wp-block-image {
	max-width: 100%;
}

/* ==========================================================================
   Unified Heading + Separator Gap (30px)
   All h* + hr.wp-block-separator combinations should have consistent 30px gap
   Accounts for line-height (60px on 50px font = ~5px below baseline)
   ========================================================================== */
/*h1 + hr.wp-block-separator,
h2 + hr.wp-block-separator,
h3 + hr.wp-block-separator,
h4 + hr.wp-block-separator,
h5 + hr.wp-block-separator,
h6 + hr.wp-block-separator,
h1.wp-block-heading + hr.wp-block-separator,
h2.wp-block-heading + hr.wp-block-separator,
h3.wp-block-heading + hr.wp-block-separator,
h4.wp-block-heading + hr.wp-block-separator,
h5.wp-block-heading + hr.wp-block-separator,
h6.wp-block-heading + hr.wp-block-separator {
	margin-top: 30px !important;
	margin-bottom: 0; 
}*/

/* WordPress Admin Bar - prevent overlap with site content */
.admin-bar body {
	padding-top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar body {
		padding-top: 46px;
	}
}

/* Adjust fixed header elements when admin bar is present */
.admin-bar .wp-block-template-part {}

@media screen and (max-width: 782px) {
	.admin-bar .wp-block-template-part {}
}

/* ==========================================================================
   Mobile UI Elements - Hidden by default on desktop
   Shown via media query at max-width: 1024px
   ========================================================================== */
.mobile-header-bar,
.mobile-bottom-nav {
	display: none;
}

/**
 * 2.0 Custom Styles
 */

/* Prevent carousel clones from causing horizontal overflow */
.wp-block-kindling-carousel {
	overflow: hidden;
	max-width: 100%;
}

.splide {
	overflow: hidden;
}

.kindling-carousel-container {
	overflow: hidden;
}

/* Ensure splide track and list respect containment */
/* REQUIRED: !important to override Splide's draggable mode which sets overflow: visible */
.splide__track,
.splide__track--draggable {
	overflow: hidden !important;
}

.splide__list {
	/* No overflow:hidden here - let Splide handle transforms naturally */
}

/* Constrain carousel when inside grid items - override alignfull breakout */
.wp-block-kindling-grid-item .wp-block-kindling-carousel.alignfull {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.wp-block-kindling-grid-item .wp-block-kindling-carousel.alignfull .splide,
.wp-block-kindling-grid-item .wp-block-kindling-carousel.alignfull .kindling-carousel-container {
	max-width: 100%;
}

.wp-block-kindling-grid-item .wp-block-kindling-carousel.alignfull .splide__slide {
	max-width: 100%;
}

.wp-block-kindling-grid-item .wp-block-kindling-carousel.alignfull .splide__slide img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/**
 * Splide Carousel Smooth Transitions
 * Makes carousel transitions smoother and more consistent across the site
 * Uses a longer easing curve for a less "clunky" feel
 */

/* Smooth slide transitions with longer duration */
.splide__list {
	transition: transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Smooth opacity transitions for slide content */
.splide__slide {
	transition: opacity 600ms ease-in-out;
}

/* Ensure images within slides also transition smoothly */
.splide__slide img {
	transition: opacity 400ms ease-in-out;
}

/* Texture background for sections */
.has-texture-bg {
	position: relative;

}

/* Cache buster - updated 2026-01-07 */
/* Using JPG with 10% opacity pre-baked into image */

.has-texture-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2026/01/section-intro__pattern_10opacity.jpg') center / cover no-repeat;
	pointer-events: none;
	z-index: -1;
}

.has-texture-bg>* {
	position: relative;
}

/* Water ripple background for Project Zero section */
.has-water-ripple-bg {
	position: relative;
	overflow: hidden;
	/* Prevents ripple from bleeding into adjacent sections */
	background-color: rgba(244, 242, 237, 0.5);
}

/* Careers grid - remove constrained layout width for headings */
.has-water-ripple-bg .wp-block-group.alignwide>h1.wp-block-heading,
.has-water-ripple-bg .wp-block-group.alignwide>.wp-block-heading.has-text-align-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 100vw;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

/* Ensure parent containers are centered at all viewports */
.has-water-ripple-bg .wp-block-group.alignwide,
.has-texture-bg .wp-block-group.alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: 1440px;
}

/* Water ripple bg columns - flush left for intro sections */
.has-water-ripple-bg .wp-block-group.alignwide>.wp-block-columns.alignwide {
	margin-left: 0;
	margin-right: auto;
	justify-content: center;
	display: flex;

	width: 100%;
}

/* Careers grid - set columns to equal width */
.has-water-ripple-bg .wp-block-group.alignwide>.wp-block-columns.alignwide>.wp-block-column {
	flex: 1;
	min-width: 0;
}

/* Careers benefits - remove constrained layout width for headings */
.has-texture-bg.has-background .wp-block-group.alignwide>h1.wp-block-heading,
.has-texture-bg.has-background .wp-block-group.alignwide>.wp-block-heading.has-text-align-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 100vw;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

/* Careers benefits - center the columns with max-width */
.has-texture-bg .wp-block-group.alignwide>.wp-block-columns.alignwide {
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	display: flex;
	max-width: 1200px;
	width: 100%;
}

/* Careers benefits - 3 column layout properly centered */
.has-texture-bg .wp-block-columns.has-3-columns {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	gap: 40px;
}

/* Careers benefits - set columns to equal width */
.has-texture-bg .wp-block-group.alignwide>.wp-block-columns.alignwide>.wp-block-column {
	flex: 1;
	min-width: 0;
}

/* Ensure benefits section is centered at all viewports */
.has-texture-bg.has-theme-01-background-color.alignfull {

	justify-content: center;
}

.has-texture-bg.has-theme-01-background-color.alignfull>.wp-block-group.alignwide {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Using WebP with JPG fallback for 96% size savings */
.has-water-ripple-bg::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('/wp-content/uploads/2025/12/water-ripple-texture.webp') no-repeat center center;
	background-size: cover;
	opacity: 0.39;
	pointer-events: none;
	z-index: 0;
}

/* Fallback for browsers without WebP support */
@supports not (background-image: -webkit-image-set(url('/wp-content/uploads/2025/12/water-ripple-texture.webp') 1x)) {
	.has-water-ripple-bg::before {
		background: url('/wp-content/uploads/2025/12/water-ripple-texture.jpg') no-repeat center center;
		background-size: cover;
	}
}

.has-water-ripple-bg>* {
	position: relative;
	z-index: 1;
}

/* Operations Map Section - Communities We Serve */
/* Updated: Increased min-height for larger maps (Pittsburgh, etc.) */
.has-water-ripple-bg.operations-map-section {
	position: relative;
	min-height: 660px;
	padding-bottom: 80px;
	overflow: visible;
}

.operations-map-section .operations-map-content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.operations-map-section .operations-map-content .wp-block-heading {
	white-space: nowrap;
}

.operations-map-section .operations-map-content .wp-block-separator {
	margin-left: 0;
	margin-right: auto;
}

.operations-map-section .operations-map-content p {
	max-width: 550px;
	text-align: left;
}

.operations-map-section .operations-map-image {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.operations-map-section .operations-map-image img {
	width: 100%;
	height: auto;
	max-width: 1100px;
	margin: 0 auto;
	display: block;
}

body .has-inter-font-family.wp-container-content-8f9e1988 {
	margin-left: 0;
}

/* Safety Stats Section - ensure no background image bleed */
.safety-stats-section {
	background-image: none;
	position: relative;
	z-index: 2;
}

/* Safety Approach Section - Figma exact spacing */
.safety-approach-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.safety-approach-paragraph {
	max-width: 918px;
}

/* Project Zero Image Carousel - flush right to viewport */
/* At 1920px: margin-right = -232px to sit flush with viewport */
.service-areas-section .project-zero-carousel {
	position: relative;
	width: 952px;
	max-width: 100%;
	overflow: visible;
	margin-left: auto;
	margin-right: calc(-1 * max(16px, (100vw - 1440px) / 2 - 8px));
}

/* About Project Zero carousel - within viewport with proper spacing */
.project-zero-section .project-zero-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	margin-left: 0;
	margin-right: auto;
}

/* Safety section - flush left layout */
body .safety-section.wp-block-group {
	padding-left: 0;
}

body .safety-section .wp-block-columns.alignwide {
	margin-left: 0;
	padding-left: 0;
	max-width: 100%;
	width: 100%;
}

body .safety-section .wp-block-columns>.wp-block-column:first-child {
	padding-left: 0;
	margin-left: 0;
}

/* Safety section carousel - flush left within column */
.safety-section .project-zero-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	margin-left: 0;
	margin-right: auto;
}

.safety-section .project-zero-carousel .carousel-slides {
	height: 600px;
}

.safety-section .project-zero-carousel .carousel-slide img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Careers Safety Section - Kindling Carousel */
.careers-safety-carousel {
	margin-bottom: 0;
}

.careers-safety-carousel .splide__slide {
	height: 600px;
}

.careers-safety-carousel .carousel-slide {
	height: 100%;
}

.careers-safety-carousel .carousel-slide .wp-block-image {
	height: 100%;
	margin: 0;
}

.careers-safety-carousel .carousel-slide .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Careers Safety Carousel - pagination dots */
.careers-safety-carousel .splide__pagination {
	bottom: 20px;
	padding: 0;
	gap: 12px;
}

/* Touch target - 17x18px matching other carousels */
.careers-safety-carousel .splide__pagination__page {
	min-width: 17px;
	min-height: 18px;
	width: 17px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	opacity: 1;
	transform: scale(1);
}

/* Remove scale transform on active state */
.careers-safety-carousel .splide__pagination__page.is-active {
	transform: scale(1);
}

/* Visual dot via ::after - 18x18px with blue border */
.careers-safety-carousel .splide__pagination__page::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02);
}

/* Active/hover state - filled blue */
.careers-safety-carousel .splide__pagination__page:hover::after,
.careers-safety-carousel .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Partner trusted staffing section carousel - flush left to viewport */
.partner-trusted-staffing-section .project-zero-carousel {
	position: relative;
	width: 952px;
	max-width: 100%;
	overflow: visible;
	margin-left: calc(-1 * (80px + max(0px, (100vw - 1440px) / 2)));
	margin-right: auto;
}

.project-zero-carousel {
	position: relative;
	width: 952px;
	max-width: 100%;
	overflow: visible;
}

.project-zero-carousel .carousel-slides {
	position: relative;
	width: 100%;
	height: 714px;
	overflow: hidden;
}

.project-zero-carousel .carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}

.project-zero-carousel .carousel-slide.is-active {
	opacity: 1;
}

.project-zero-carousel .carousel-slide img {
	width: 100%;
	height: 714px;
	object-fit: cover;
	object-position: center 60%;
	display: block;
}

/* Carousel dots for Project Zero - centered under image */
.project-zero-carousel .project-zero-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}

/**
 * 2.4.1 Service Areas Carousel
 * Matches project-zero-carousel styling but for homepage service areas section
 */
.service-areas-carousel {
	position: relative;
	width: 100%;
	max-width: 584px;
	overflow: visible;
}

.service-areas-carousel .carousel-slides {
	position: relative;
	width: 100%;
	height: 580px;
	overflow: hidden;
}

.service-areas-carousel .carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}

.service-areas-carousel .carousel-slide.is-active {
	opacity: 1;
}

.service-areas-carousel .carousel-slide img {
	width: 100%;
	height: 580px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Carousel dots for Service Areas - centered under image */
.service-areas-carousel .service-areas-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}

/**
 * 2.5 Company Timeline Section
 */

/* Timeline section - contain horizontal overflow to prevent page scroll */
.company-timeline-section {
	margin-top: 0;
	overflow-x: clip;
	overflow-y: visible;
	position: relative;
	contain: paint;
	/* Paint containment to prevent child elements from reporting positions outside bounds */
	z-index: 10;
	/* Ensure it stays above following sections */
}

/* Timeline text wrapper - just add spacing between heading and separator */
.timeline-text-wrapper {
	display: block;
}

.timeline-text-wrapper h2 {
	margin-bottom: 24px;
}

/* Force left alignment for separator in timeline text wrapper */
/* REQUIRED: !important to override WP separator block inline centering styles */
.timeline-text-wrapper hr,
.timeline-text-wrapper .wp-block-separator,
body .company-timeline-section .timeline-text-wrapper hr.wp-block-separator {
	margin-top: 10px;
	margin-left: 0 !important;
	margin-right: auto !important;
	width: 224px;
}

/* Override constrained layout centering for timeline text wrapper */
body .company-timeline-section .timeline-text-wrapper {
	display: block;
}

body .company-timeline-section .timeline-text-wrapper>* {
	margin-left: 0;
	margin-right: auto;
}

/* Timeline text container - 2 column layout (heading left, text right) */
body .company-timeline-section .wp-block-columns.alignwide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	/* REQUIRED: Override inline style margin-bottom:182px from database */
	margin-bottom: 60px !important;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
}

/* Timeline container - full width horizontal scroll */
.company-timeline {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	overflow-x: auto;
	overflow-y: visible;
	padding: 0 0 40px 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Hide scrollbar for Firefox */
	cursor: grab;
	/* Drag to scroll */
}

/* Timeline track - align first year with heading above */
.company-timeline .timeline-track {
	position: relative;
	z-index: 5;
	/* Ensure dots are visible above the line */
	display: inline-flex;
	min-width: 100%;
	/* Align with heading: (viewport - 1440) / 2 + 53px spacing = 89px at 1512px */
	padding: 0 320px 0 calc(max(53px, (100vw - 1440px) / 2 + 53px));
}

/* Horizontal timeline line - starts at center of first dot */
.company-timeline .timeline-line {
	position: absolute;
	top: 6px;
	/* Start at center of first dot: offset + 7px (half of 14px dot) */
	left: calc(max(53px, (100vw - 1440px) / 2 + 53px) + 7px);
	right: 0;
	height: 3px;
	background-color: var(--wp--preset--color--theme-02);
	z-index: 0;
}

/* Timeline items container */
.company-timeline .timeline-items {
	display: flex;
	gap: 0;
	position: relative;
	z-index: 10;
}

/* Individual timeline item */
.company-timeline .timeline-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 220px;
	flex-shrink: 0;
	position: relative;
	z-index: 15;
}

/* Timeline dot */
.company-timeline .timeline-dot {
	width: 14px;
	height: 14px;
	border-radius: var(--wp--custom--border--rounded-full);
	background-color: var(--wp--preset--color--theme-02);
	margin-bottom: 24px;
	position: relative;
	flex-shrink: 0;
	pointer-events: none;
	/* Accessibility */
	z-index: 100;
}

/* Timeline content */
.company-timeline .timeline-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 100px;
}

/* Timeline year */
.company-timeline .timeline-year {
	font-family: var(--wp--preset--font-family--sansation), sans-serif;
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--theme-02);
}

/* Timeline description */
.company-timeline .timeline-description {
	font-family: var(--wp--preset--font-family--inter), sans-serif;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--black);
	margin: 0;
	max-width: 180px;
}

/* Custom scrollbar */
.company-timeline::-webkit-scrollbar {
	height: 0;
	display: none;
}

.company-timeline.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Disable scroll-snap during auto-scroll for smooth animation */
.company-timeline.is-auto-scrolling {
	scroll-snap-type: none;
}

/* Scroll indicators */
.company-timeline-section::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4ea2' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 10;
}

.company-timeline-section.can-scroll-right::after {
	opacity: 0.7;
	animation: bounce-right 1.5s ease-in-out infinite;
}

@keyframes bounce-right {

	0%,
	100% {
		transform: translateY(-50%) translateX(0);
	}

	50% {
		transform: translateY(-50%) translateX(5px);
	}
}

/* Water Wave Animation - clip-path wave effect for buttons */
@keyframes water-wave {

	0%,
	100% {
		clip-path: polygon(0% 45%,
				16% 44%,
				33% 50%,
				54% 60%,
				70% 61%,
				84% 59%,
				100% 52%,
				100% 100%,
				0% 100%);
	}

	50% {
		clip-path: polygon(0% 60%,
				15% 65%,
				34% 66%,
				51% 62%,
				67% 50%,
				84% 45%,
				100% 46%,
				100% 100%,
				0% 100%);
	}
}

/* ==========================================================================
   Company Timeline Grid - Column-Based Layout (replaces horizontal scroll)
   ========================================================================== */

/* Timeline grid container */
.company-timeline-grid {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--60);
}

/* Timeline columns - 4 per row */
.company-timeline-grid .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 24px;
}

/* Individual timeline column */
.company-timeline-grid .timeline-column {
	display: flex;
	flex-direction: column;
}

/* Timeline item block wrapper */
.company-timeline-grid .timeline-item-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Timeline dot wrapper */
.company-timeline-grid .timeline-dot-wrapper {
	margin-bottom: 16px;
}

/* Timeline dot - matching original design */
.company-timeline-grid .timeline-dot-block {
	width: 14px;
	height: 14px;
	border-radius: var(--wp--custom--border--rounded-full);
	background-color: var(--wp--preset--color--theme-02);
}

/* Timeline year heading */
.company-timeline-grid .timeline-year-block {
	margin: 0 0 8px 0;
}

/* Timeline description */
.company-timeline-grid .timeline-description-block {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	max-width: 200px;
}

/* Responsive: Stack to 2 columns on tablet */
@media (max-width: 1024px) {
	.company-timeline-grid .wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}

	.company-timeline-grid .timeline-description-block {
		max-width: 100%;
	}
}

/* Responsive: Single column on mobile */
@media (max-width: 600px) {
	.company-timeline-grid .wp-block-columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.company-timeline-grid {
		padding: 0 20px;
	}

	.company-timeline-grid .timeline-year-block {
		font-size: 24px !important;
		line-height: 30px !important;
	}
}

/**
 * 2.6 Solutions Section Styles
 */

/* Solutions sections padding */
.solutions-section {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
	overflow-x: clip;
}

.solutions-hero-section {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}

/* Solutions section column gaps */
.solutions-section .wp-block-columns {
	gap: var(--wp--preset--spacing--70);
}

/* Solutions headings - Sansation font */
.solutions-section h2.wp-block-heading,
.solutions-hero-section h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--sansation), Sansation, sans-serif;
	margin-bottom: var(--wp--preset--spacing--40);
}

.solutions-hero-section h4.wp-block-heading {
	font-family: var(--wp--preset--font-family--inter), Inter, sans-serif;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Solutions body text */
.solutions-section>.wp-block-columns>.wp-block-column>p,
.solutions-hero-section p {
	font-family: var(--wp--preset--font-family--inter), Inter, sans-serif;
	margin-bottom: var(--wp--preset--spacing--40);
}

/**
 * 3.0 Solutions Hero Section
 */

/* Solutions hero separator - left-aligned, exact width */
.solutions-hero-separator {
	width: 224px;
	max-width: 224px;
	height: 2px;
	margin-left: 0;
	margin-right: auto;
}

/**
 * 3.1 Safety Approach Section
 */

/* Safety Approach section with background image and overlay */
.safety-approach-section {
	position: relative;
	background-color: var(--wp--preset--color--black);
}

/* Grayscale background image layer */
.safety-approach-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2025/12/safety-approach-bg.jpg') center 30%/cover no-repeat;
	filter: grayscale(100%);
	pointer-events: none;
	z-index: 0;
}

/* Dark overlay - 55% opacity */
.safety-approach-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.55);
	pointer-events: none;
	z-index: 1;
}

.safety-approach-section>* {
	position: relative;
	z-index: 2;
}

/* Heading styling */
.safety-approach-section h2 {
	max-width: 1210px;
	margin-left: auto;
	margin-right: auto;
}

/* Body text styling */
.safety-approach-section p {
	max-width: 918px;
	margin-left: auto;
	margin-right: auto;
}

/**
 * 4.0 Hero Carousel Styles
 *
 * REQUIRED: !important declarations in this section override WordPress
 * Cover block inline styles and ensure carousel slides transition properly.
 * WP Core adds inline opacity/positioning that must be overridden for
 * carousel animation states (active/inactive slides).
 */

/* Hero carousel container */
.hero-carousel {
	position: relative;
	overflow: hidden;
}

.hero-carousel .wp-block-cover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
	pointer-events: none;
}

.hero-carousel .wp-block-cover.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

/* Show gradient overlay on hero carousel - REQUIRED: !important needed to override WordPress core inline styles */
.hero-carousel .wp-block-cover__background.has-background-dim-0,
.hero-carousel .wp-block-cover__gradient-background.has-background-dim-0,
.wp-block-cover.is-hero .wp-block-cover__background.has-background-dim-0,
.wp-block-cover.is-hero .wp-block-cover__gradient-background.has-background-dim-0 {
	opacity: 1 !important;
}

/* Carousel navigation dots - completely hidden on all pages */
/* REQUIRED: !important to override carousel JS inline display styles */
.hero-carousel-dots,
.home-hero-carousel-dots {
	display: none !important;
}

.hero-carousel-dot {
	width: 12px;
	height: 12px;
	border-radius: var(--wp--custom--border--rounded-full);
	background-color: rgba(255, 255, 255, 0.5);
	border: 2px solid white;
	cursor: pointer;
	transition: background-color 0.3s ease;
	padding: 0;
}

.hero-carousel-dot:hover,
.hero-carousel-dot.is-active {
	background-color: white;
}

/**
 * 3.5 Hero Carousel - Disable Sliding (Keep Dots as Decorative)
 *
 * Hero sections should show single media (video on home, image on other pages).
 * Dots remain visible as decorative design elements, not functional controls.
 */

/* Disable carousel sliding - only show first slide */
/* REQUIRED: !important to override carousel JS inline display/opacity styles */
.home-hero-carousel .carousel-slide:not(.is-active),
.hero-carousel-background .carousel-slide:not(.is-active),
.hero-carousel .wp-block-cover:not(.is-active),
.wp-block-kindling-blocks-hero-carousel .hero-slide:not(:first-child) {
	display: none !important;
}

/* Keep first slide permanently active */
/* REQUIRED: !important to override carousel JS inline display/opacity/position styles */
.home-hero-carousel .carousel-slide:first-child,
.hero-carousel-background .carousel-slide:first-child,
.hero-carousel .wp-block-cover:first-child,
.wp-block-kindling-blocks-hero-carousel .hero-slide:first-child {
	display: block !important;
	opacity: 1 !important;
	position: relative !important;
}

/* Disable dot interaction - dots are decorative only */
.home-hero-carousel-dots .carousel-dot,
.hero-carousel-dots .hero-carousel-dot,
.wp-block-kindling-blocks-hero-carousel .hero-carousel-dot {
	pointer-events: none;
	cursor: default;
}

/* Keep first dot active for visual consistency */
.home-hero-carousel-dots .carousel-dot:first-child,
.hero-carousel-dots .hero-carousel-dot:first-child,
.wp-block-kindling-blocks-hero-carousel .hero-carousel-dot:first-child {
	opacity: 1;
}

/**
 * 4.0 Trusted Partners Section
 */

/* Trusted Partners section - fine-tune overlay opacity to match Figma (77%) - REQUIRED: !important needed to override WordPress core cover block opacity */
body .trusted-partners-section .wp-block-cover__background {
	opacity: 0.77 !important;
}

/* Trusted Partners section - remove bottom margin to sit flush with footer */
.trusted-partners-section {
	margin-bottom: 0;
}

/* Remove gap before footer when trusted partners is the last content block */
.trusted-partners-section+footer,
main:has(.trusted-partners-section:last-child)+footer {
	margin-top: 0;
}

/* Ensure no gap between last block and footer in hero page template */
.wp-block-post-content>.trusted-partners-section:last-child {
	margin-bottom: 0;
}

/* Remove block gap after trusted partners section */
.wp-block-post-content:has(> .trusted-partners-section:last-child) {
	--wp--style--block-gap: 0;
}

/* Trusted Partners section padding */
.trusted-partners-section .wp-block-cover__inner-container {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
	max-width: 800px;
	margin: 0 auto;
}

/* Trusted Partners heading - Sansation font */
.trusted-partners-section h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--sansation), Sansation, sans-serif;
	margin-bottom: 0;
}

/* Trusted Partners body text */
.trusted-partners-section p {
	font-family: var(--wp--preset--font-family--inter), Inter, sans-serif;
}

/* Separator in Trusted Partners - centered, 224px width, 3px height */
.trusted-partners-section .wp-block-separator,
.trusted-partners-separator {
	width: 224px;
	height: 3px;
	border: none;
	margin: 0 auto var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--theme-03);
}

/**
 * 4.5 Solutions Accordion
 */

/* Solutions Accordion - using headings for reliability */
.solutions-accordion {
	margin-top: var(--wp--preset--spacing--50);
}

.solutions-accordion .accordion-item {
	font-family: var(--wp--preset--font-family--inter), Inter, sans-serif;
	font-size: clamp(14px, 0.875rem + ((1vw - 4.25px) * 0.591), 22px);
	padding: 22px 36px 22px 0;
	border-bottom: 2px solid var(--wp--preset--color--white);
	margin: 0;
	position: relative;
	cursor: pointer;
	min-height: 44px;
}

/* Chevron icon */
.solutions-accordion .accordion-item::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg width='26' height='16' viewBox='0 0 26 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L13 13L24 2' stroke='%23F4F2ED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.3s ease;
}

/* Rotate chevron when open */
.solutions-accordion .accordion-item.is-open::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Remove border-bottom when open */
.solutions-accordion .accordion-item.is-open {
	border-bottom: none;
}

/* Active accordion H3s - yellow color instead of white */
/* REQUIRED: !important to override WordPress has-white-color inline class */
.solutions-accordion .accordion-item.is-open,
.image-accordion-section .solutions-accordion .accordion-item.is-open,
.image-accordion-reversed .solutions-accordion .accordion-item.is-open {
	color: var(--wp--preset--color--theme-04) !important;
}

/* Solutions accordion images - flush to viewport */
.solutions-section .has-offset-pool-bg .wp-block-image {
	margin: 0;
	width: 100%;
	height: auto;
	max-width: none;
}

body .solutions-section .has-offset-pool-bg .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 802 / 555;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Vertically center accordion images */
.solutions-section .has-offset-pool-bg,
.solutions-section .has-offset-pool-bg-right {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Flush left - maintenance (offset on right and bottom) */
.solutions-maintenance .has-offset-pool-bg {
	margin-left: calc(-1 * (80px + max(0px, (100vw - 1440px) / 2)));
	margin-right: 104px;
	/* 176px total gap (72px from columns gap + 104px) */
}

/* Fixed 802x555 dimensions for maintenance image */
.solutions-maintenance .has-offset-pool-bg .wp-block-image {
	width: 802px;
	min-width: 802px;
	max-width: none;
}

.solutions-maintenance .has-offset-pool-bg .wp-block-image img {
	width: 802px;
	min-width: 802px;
	height: 555px;
	object-fit: cover;
}

.page-id-15 .solutions-maintenance .has-offset-pool-bg::before {
	left: auto;
	right: -63px;
	top: auto;
	bottom: -28px;
	width: 120%;
	height: 100%;
}

/* Flush right - management and repair (offset on left and bottom) */
.solutions-management .has-offset-pool-bg-right,
.solutions-repair .has-offset-pool-bg-right {
	position: relative;
	/* Shift the column to the right to reach viewport edge */
	right: -260px;
	margin-left: 0;
	margin-right: 0;
}

/* Make the image fill the extended space - fixed 802x555 dimensions */
.solutions-management .has-offset-pool-bg-right .wp-block-image,
.solutions-repair .has-offset-pool-bg-right .wp-block-image {
	width: 802px;
	min-width: 802px;
	max-width: none;
}

.solutions-management .has-offset-pool-bg-right .wp-block-image img,
.solutions-repair .has-offset-pool-bg-right .wp-block-image img {
	width: 802px;
	min-width: 802px;
	height: 555px;
	object-fit: cover;
}

.solutions-management .has-offset-pool-bg-right::before,
.solutions-repair .has-offset-pool-bg-right::before {
	left: -79px;
	right: auto;
	top: auto;
	bottom: -28px;
	width: 120%;
	height: 100%;
}

/* Accordion content paragraph */
.solutions-accordion .accordion-content {
	font-family: var(--wp--preset--font-family--inter), Inter, sans-serif;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	padding-right: 36px;
	margin-bottom: var(--wp--preset--spacing--40);
}

/**
 * 5.0 Navigation Styles
 *
 * REQUIRED: !important declarations in this section override WordPress
 * Navigation block defaults, sticky header positioning, and responsive
 * breakpoint behavior. These ensure consistent navigation appearance
 * across hero sections, sticky states, and various viewport sizes.
 */

/* Header template part - always above page content */
header.wp-block-template-part {
	position: relative;
	z-index: 1000;
}

/* Sticky Navigation - Fixed positioning and transitions */
.wp-block-template-part.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	transition: all 0.3s ease-in-out;
}

/* Admin bar offset for sticky header */
.admin-bar .wp-block-template-part.is-sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-block-template-part.is-sticky {
		top: 46px;
	}
}

/* Sticky header background - solid blue */
.wp-block-template-part.is-sticky>.wp-block-group.alignfull {
	background-color: var(--wp--preset--color--theme-02);
	transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
}

/* Reduce header padding when sticky */
body .wp-block-template-part.is-sticky .wp-block-group.alignfull {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Logo condensing - reduce size when sticky */
.wp-block-site-logo {
	transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

body .wp-block-site-logo.is-sticky {
	width: 48px;
}

body .wp-block-site-logo.is-sticky img {
	width: 48px;
	height: auto;
}

/* Ensure navigation text is visible on blue background when sticky */
body .wp-block-template-part.is-sticky .wp-block-navigation-item a {
	color: white;
}

body .wp-block-template-part.is-sticky .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--theme-03);
}

/* Sticky navigation - right justify the navigation */
body .wp-block-template-part.is-sticky .wp-block-group.is-layout-flex {
	justify-content: flex-end;
}

/* Keep logo on left when sticky - space-between for logo + nav container */
body .wp-block-template-part.is-sticky>.wp-block-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 40px;
	padding-right: 40px;
}

/* Navigation should be right-justified within its container */
body .wp-block-template-part.is-sticky .wp-block-navigation {
	margin-left: auto;
	justify-content: flex-end;
}

/* Sticky navigation buttons stay right */
body .wp-block-template-part.is-sticky .wp-block-buttons {
	margin-left: 20px;
}

/* Logo icon sizing when sticky */
body .wp-block-template-part.is-sticky .wp-block-outermost-icon-block {
	transition: width 0.3s ease-in-out;
}

body .wp-block-template-part.is-sticky .wp-block-outermost-icon-block .icon-container {
	width: 60px;
}

/* Homepage Hero Sticky Navigation */
body .hero-top-bar.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background-color: var(--wp--preset--color--theme-02);
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 40px;
	padding-right: 40px;
	transition: all 0.3s ease-in-out;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Hero navigation - right justify when sticky */
/* REQUIRED: !important to override mobile hiding rule at max-width: 1700px */
body .hero-top-bar.is-sticky .hero-navigation {
	margin-left: auto;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 32px;
}

body .hero-top-bar.is-sticky .wp-block-navigation {
	margin-left: auto;
	justify-content: flex-end;
}

/* Ensure cloned nav is visible in sticky mode */
/* REQUIRED: !important to override any inherited display:none and ensure cloned nav is visible in sticky state */
body .hero-top-bar.is-sticky .hero-nav-cloned {
	display: flex !important;
	gap: 32px;
}

/* MOBILE: Hide all hero navigation in sticky mode - hamburger menu takes over */
/* REQUIRED: !important to override the display:flex rules above */
@media (max-width: 1023px) {

	body .hero-top-bar.is-sticky .hero-navigation,
	body .hero-top-bar.is-sticky .hero-nav-cloned,
	body .hero-top-bar.is-sticky .wp-block-navigation,
	body:has(.hero-top-bar.is-sticky) nav.wp-block-navigation.hero-navigation-block {
		display: none !important;
	}
}

/* Hero navigation block from template part - make sticky along with hero-top-bar */
/* REQUIRED: !important to override WP Navigation block inline positioning, padding, and gap styles for sticky header state */
body:has(.hero-top-bar.is-sticky) nav.wp-block-navigation.hero-navigation-block {
	position: fixed !important;
	top: 15px !important;
	left: 160px !important;
	right: 40px !important;
	max-width: calc(100vw - 220px) !important;
	z-index: 100000 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	gap: 32px !important;
	justify-content: flex-end !important;
}

/* Admin bar offset for hero-navigation-block in sticky mode */
/* REQUIRED: !important to override the sticky top positioning and account for admin bar height */
.admin-bar body:has(.hero-top-bar.is-sticky) nav.wp-block-navigation.hero-navigation-block {
	top: 47px !important;
}

@media screen and (max-width: 782px) {
	.admin-bar body:has(.hero-top-bar.is-sticky) nav.wp-block-navigation.hero-navigation-block {
		top: 61px !important;
	}
}

/* Admin bar offset for sticky hero navigation */
.admin-bar .hero-top-bar.is-sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .hero-top-bar.is-sticky {
		top: 46px;
	}
}

/* Current page indicator for hero-navigation-block - yellow background like homepage */
/* REQUIRED: !important to override WP Navigation item default background and color styles */
body:has(.hero-top-bar.is-sticky) nav.wp-block-navigation.hero-navigation-block .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
body:has(.hero-top-bar.is-sticky) nav.wp-block-navigation.hero-navigation-block .wp-block-navigation-item__content[aria-current="page"] {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	padding: 8px 16px !important;
}

/* Current page indicator in non-sticky hero navigation */
/* REQUIRED: !important to override WP Navigation item inline background and padding for yellow pill styling */
nav.wp-block-navigation.hero-navigation-block .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
nav.wp-block-navigation.hero-navigation-block .wp-block-navigation-item__content[aria-current="page"] {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	padding: 8px 16px !important;
}

/* Hero logo condensing - reduce size when sticky */
body .hero-logo.is-sticky {
	width: 120px;
}

body .hero-logo.is-sticky svg {
	width: 100%;
	height: auto;
}

/* Sticky navigation at 1280px+ - seamless transition from hero nav */
/* REQUIRED: !important declarations override WP Navigation/Group block inline styles for sticky header transformation (sizing, positioning, spacing) */
@media (min-width: 1280px) {

	/* Sticky logo - switch to star-only image */
	body .hero-logo.is-sticky {
		width: 80px !important;
		height: 80px !important;
		margin-left: 5vw !important;
		margin-right: calc(65px - 5vw) !important;
		background-image: url('/wp-content/uploads/2026/01/AP-Logo-Mark-white_2.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	/* Hide the full SVG logo when sticky */
	body .hero-logo.is-sticky svg {
		opacity: 0 !important;
		visibility: hidden !important;
	}

	body .hero-top-bar.is-sticky {
		/* Match hero nav exactly for seamless transition */
		padding-top: 19px !important;
		padding-bottom: 16px !important;
		padding-left: 10px !important;
		padding-right: 25px !important;
		gap: 32px !important;
		justify-content: space-between !important;
		background-color: var(--wp--preset--color--theme-02);
		z-index: 100000;
	}

	/* Navigation should be right-aligned in sticky mode */
	body .hero-top-bar.is-sticky .hero-navigation {
		margin-left: auto !important;
		margin-right: 0 !important;
		justify-content: flex-end !important;
	}

	body .hero-top-bar.is-sticky .wp-block-navigation {
		margin-left: 0 !important;
		justify-content: normal !important;
	}

	body .hero-top-bar.is-sticky .hero-nav-cloned {
		margin-left: 40px !important;
	}

	/* Hide carousel dots when sticky nav is active */
	body:has(.hero-top-bar.is-sticky) .home-hero-carousel-dots {
		opacity: 0;
		pointer-events: none;
	}
}

/* Mobile adjustments for sticky navigation */
@media (max-width: 900px) {
	body .hero-top-bar.is-sticky {
		padding-left: 15px;
		padding-right: 15px;
	}

	body .hero-logo.is-sticky {
		width: 90px;
	}
}

header .icon-container {
	margin-left: 0;
	overflow: hidden;
}

header .wp-block-navigation .wp-block-buttons {
	position: relative;
	margin-top: 0;
}

/**
 * 4.8 Service Areas - Commercial Focused Expertise Section
 */

/* Fix heading wrapping at larger viewports */
@media (min-width: 1200px) {

	/* Remove max-width constraint on the inner group */
	.has-texture-bg .wp-block-columns .wp-block-column .wp-block-group.is-layout-constrained {
		max-width: none;
	}

	/* Also target the content width */
	.has-texture-bg .wp-block-columns .wp-block-column .wp-block-group.is-layout-constrained>* {
		max-width: none;
	}

	/* Ensure columns are 50/50 split for partner intro (2-column only) */
	.has-texture-bg>.wp-block-columns.alignwide:not(.has-3-columns)>.wp-block-column:first-child {
		flex-basis: 50%;
	}

	.has-texture-bg>.wp-block-columns.alignwide:not(.has-3-columns)>.wp-block-column:last-child {
		flex-basis: 50%;
	}

	/* 3-column layouts - equal width columns */
	.has-texture-bg .wp-block-columns.has-3-columns>.wp-block-column {
		flex: 1 1 0;
		max-width: 33.333%;
	}

	/* Target the heading specifically - ensure it doesn't wrap before the br */
	.has-texture-bg .wp-block-heading.has-sansation-font-family {
		max-width: 100%;
		width: 100%;
	}
}

/* Partner Intro Section - 50/50 split at 1920px viewport */
@media (min-width: 1920px) {
	.partner-intro-section .wp-block-columns.alignwide {
		max-width: 1920px;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		gap: 0;
	}

	.partner-intro-section .wp-block-columns.alignwide>.wp-block-column {
		flex-basis: 50%;
		max-width: 50%;
		flex-grow: 0;
		flex-shrink: 0;
	}

	.partner-intro-section .wp-block-columns.alignwide>.wp-block-column:first-child {
		margin-left: 0;
	}
}

/**
 * 4.9 Facility Grid Cards - Match Figma layout specs
 * SCOPED: Only applies to sections containing theme-07 cards
 * Target dimensions for 1440p: 584w x 329h per card
 */

/* Section padding: 96px top/bottom per Figma - only for cards section */
.has-texture-bg:has(.has-theme-07-background-color) {
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 0;
	padding-right: 0;
}

/* Inner content group - 1200px max width, centered */
.has-texture-bg:has(.has-theme-07-background-color)>.wp-block-group.is-layout-constrained {
	max-width: 1200px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
}

/* H2 and separator - no extra constraints */
.has-texture-bg:has(.has-theme-07-background-color) .wp-block-heading,
.has-texture-bg:has(.has-theme-07-background-color) .wp-block-separator {
	max-width: 100%;
}

/* Columns containing cards - centered with gap */
.has-texture-bg .wp-block-columns:has(.has-theme-07-background-color) {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	gap: 32px;
	justify-content: center;
}

.wp-container-core-columns-is-layout-0a54e2ac {
	margin-top: 30px !important;
}

/* Card columns - fixed 584px width per Figma */
.has-texture-bg .wp-block-columns:has(.has-theme-07-background-color)>.wp-block-column {
	flex-basis: 584px;
	flex-grow: 0;
	max-width: 584px;
}

/* Card images - 584x329 aspect ratio */
.has-texture-bg .has-theme-07-background-color .wp-block-image {
	margin: 0;
}

.has-texture-bg .has-theme-07-background-color .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 584 / 329;
	object-fit: cover;
}

/* First row of cards - 72px margin bottom */
.has-texture-bg .wp-block-group>.wp-block-columns:has(.has-theme-07-background-color):first-of-type {
	margin-bottom: 72px;
}

/* Remove constrained layout max-width on card content groups */
.has-theme-07-background-color .wp-block-group.is-layout-constrained,
.has-theme-07-background-color .wp-block-group-is-layout-constrained {
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
	max-width: 100%;
}

.has-theme-07-background-color .wp-block-group.is-layout-constrained>*,
.has-theme-07-background-color .wp-block-group-is-layout-constrained>* {
	max-width: 100%;
}

/* Target specific WordPress container classes */
.has-theme-07-background-color [class*="wp-container-core-group-is-layout"] {
	--wp--style--global--content-size: 100%;
	max-width: 100%;
}

.has-theme-07-background-color [class*="wp-container-core-group-is-layout"]>.wp-block-heading,
.has-theme-07-background-color [class*="wp-container-core-group-is-layout"]>p {
	max-width: 100%;
}

/* Override inline padding on text containers - match Figma spec (15px) - REQUIRED: !important to override WordPress database inline styles */
.has-theme-07-background-color>.wp-block-group,
body .has-theme-07-background-color>.wp-block-group.has-global-padding,
body .has-theme-07-background-color .wp-block-group[style*="padding-left"],
body .has-theme-07-background-color .wp-block-group[style*="padding-right"] {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* Card headings - responsive sizing */
.has-theme-07-background-color h3.wp-block-heading {
	font-size: clamp(16px, 2.5vw, 30px);
}

/* Hero nav container - align items on same line */
.is-hero .wp-block-group.alignwide {
	align-items: center;
}

/* Header layout - vertical centering and proper spacing */
.wp-block-group.alignfull:has(.wp-block-navigation) {
	align-items: center;
	/* Vertically center logo and navigation */
}

/* Remove padding and adjust vertical alignment for navigation wrapper - REQUIRED: !important to override inline styles */
.wp-block-group.is-layout-flow.wp-block-group-is-layout-flow:has(.wp-block-navigation) {
	padding-top: 0 !important;
	/*margin-top: -20px !important;*/
}

/* Desktop navigation - add spacing from logo and prevent wrapping */
.wp-block-group.alignfull>.wp-block-group:has(.wp-block-navigation) {
	margin-left: 100px;
	/* Add significant spacing from logo to match Figma */
}

/* Header navigation gap - REQUIRED: !important to override WordPress core navigation inline styles */
.wp-block-group.alignfull .wp-block-navigation,
.wp-block-group.alignfull .wp-block-navigation__container {
	gap: 32px;
	flex-wrap: nowrap !important;
}

/* About intro section - make image flush to left edge of viewport (exclude 3-column layouts) */
.has-texture-bg .wp-block-columns.alignwide:not(.has-3-columns)>.wp-block-column:first-child {
	margin-left: calc(-1 * max(16px, (100vw - var(--wp--style--global--wide-size, 1440px)) / 2));
	padding-left: 0;
}

/* Reset margin for 3-column layouts - override the above flush-left rule */
.has-texture-bg .wp-block-columns.alignwide.has-3-columns>.wp-block-column:first-child {
	margin-left: 0;
	padding-left: 0;
}

/* Navigation items gap - consistent 32px spacing - REQUIRED: !important to override WordPress core navigation block inline styles */
.is-hero .wp-block-navigation,
.has-theme-02-background-color .wp-block-navigation {
	gap: 32px;
	flex-wrap: nowrap !important;
}

.is-hero .wp-block-navigation__container,
body .has-theme-02-background-color .wp-block-navigation__container {
	gap: 32px;
	flex-wrap: nowrap;
}

/* Global navigation gap - applies to all navigation */
body .wp-block-navigation,
body .wp-block-navigation__container {
	gap: 32px;
	flex-wrap: nowrap;
}

/* Increased specificity to avoid !important - same selector as above with home page context */
body.home .wp-block-group.alignfull .wp-block-navigation,
body.home .wp-block-group.alignfull .wp-block-navigation__container {
	gap: 32px;
	flex-wrap: nowrap;
}

/* Navigation container - right justify navigation */
body .wp-block-navigation__container {
	flex-grow: 0;
	margin-left: auto;
}

/* Hero navigation - container uses space-between for right alignment */
/* No extra margins needed - parent padding controls edge spacing */
/* REQUIRED: !important to override WP Navigation block auto-margin styles */
.hero-navigation,
.hero-navigation-block-wrapper {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* At 1920px+, match Figma design exactly */
@media (min-width: 1920px) {

	/* Hero top bar gap for Figma design - NOTE: padding-right overridden to 80px at line ~6908 */
	.hero-top-bar {
		gap: 134px;
	}

	/* Navigation items gap - 68px per Figma design */
	body .hero-navigation {
		gap: 68px;
	}

	body .hero-navigation .hero-nav-cloned {
		gap: 68px;
	}

	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 68px;
	}

	/* Solutions hero carousel - reduce height at large viewports to show more content above fold */
	.solutions-hero-carousel .wp-block-kindling-blocks-hero-carousel,
	.solutions-hero-carousel .wp-block-kindling-blocks-hero-carousel>div,
	.solutions-hero-carousel .hero-carousel-wrapper,
	.solutions-hero-carousel .hero-carousel,
	.solutions-hero-carousel .hero-slide {
		min-height: 60vh;
		max-height: 60vh;
	}
}

/* Responsive margin adjustments for smaller viewports */
/* REQUIRED: !important to override WP Navigation block default margins at this breakpoint */
@media (max-width: 1919px) {

	.hero-navigation,
	.hero-navigation-block-wrapper {
		margin-right: 149px !important;
	}
}

/* Standard header navigation - ensure proper spacing between nav items and buttons */
/* REQUIRED: !important to override WP Navigation responsive container default alignment */
body .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center !important;
	gap: 32px;
}

body .wp-block-navigation__responsive-container-content>* {
	margin: 0;
}

/* Force entire navigation including buttons to stay on single row */
/* REQUIRED: !important to override WP Navigation container default flex alignment */
body .site-header .wp-block-navigation__container,
body .site-header .wp-block-navigation .wp-block-navigation__container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center !important;
}

/* Buttons container in navigation - keep buttons in row with nav items */
/* REQUIRED: !important needed to override WordPress wp-container-* generated gap classes */
body .wp-block-navigation .wp-block-buttons {
	display: flex;
	flex-direction: row;
	gap: 32px;
	margin: 0;
	flex-wrap: nowrap;
	align-items: center !important;
	flex-shrink: 0;
}

body .wp-block-navigation .wp-block-button {
	margin: 0;
	flex-shrink: 0;
}

/* Navigation buttons - prevent fixed width and consistent font styling per Figma */
body .wp-block-navigation .wp-block-button__link {
	width: auto;
	min-width: fit-content;
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.6px;
	white-space: nowrap;
}

/* All navigation links - consistent font styling per Figma */
.wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Homepage header navigation - white text for visibility over hero */
.home .wp-block-group .desktop-navigation .wp-block-navigation-item a,
.home .wp-block-group .wp-block-navigation-item a {
	color: white;
}

.home .wp-block-group .desktop-navigation .wp-block-navigation-item a:hover,
.home .wp-block-group .wp-block-navigation-item a:hover {
	opacity: 0.8;
}

/* Reduce gap between buttons - REQUIRED: !important to override WordPress core buttons block inline styles */
.is-hero .wp-block-buttons {
	gap: 32px !important;
}

/* Navigation responsive - reduce gaps at smaller desktop viewports to prevent overflow */
@media (max-width: 1560px) {
	body .wp-block-navigation__responsive-container-content {
		gap: 20px;
	}

	body .wp-block-navigation .wp-block-buttons {
		gap: 16px;
	}
}

@media (max-width: 1540px) {
	body .wp-block-navigation__responsive-container-content {
		gap: 12px;
	}

	body .wp-block-navigation .wp-block-buttons {
		gap: 10px;
	}

	body .wp-block-navigation .wp-block-button__link {
		padding: 8px 12px;
		font-size: var(--wp--preset--font-size--lg);
	}

	.wp-block-navigation-item a {
		font-size: var(--wp--preset--font-size--lg);
		padding: 8px 10px;
	}

	/* Partner With Us - match nav item size at this breakpoint (standard header) */
	body .wp-block-navigation .wp-block-button.is-style-subtle .wp-block-button__link {
		font-size: var(--wp--preset--font-size--lg) !important;
		padding: 0px 0 6px !important;
	}

	/* Become a Lifeguard - prevent overflow by scaling down further */
	body .wp-block-navigation .wp-block-button.is-style-wave .wp-block-button__link,
	body .wp-block-navigation .wp-block-button.is-style-outline .wp-block-button__link,
	body .wp-block-navigation a.wp-block-button__link[href*="become-a-lifeguard"] {
		font-size: var(--wp--preset--font-size--medium) !important;
		padding: 8px 12px !important;
	}

	/* Standard header specific - match hero template gaps for consistency */
	header.wp-block-template-part .wp-block-navigation__container,
	header.wp-block-template-part .wp-block-navigation__responsive-container-content {
		gap: 14px !important;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-buttons {
		gap: 12px !important;
		margin-left: 12px !important;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item a {
		padding: 8px 10px !important;
		font-size: var(--wp--preset--font-size--lg) !important;
	}

	/* Reduce logo margin at 1512px */
	header.wp-block-template-part .wp-block-group.alignwide .wp-block-outermost-icon-block {
		margin-right: 60px !important;
	}

}

/* All rounded buttons should be uppercase */
.wp-block-button__link[style*="border-radius: var(--wp--custom--border--rounded-2xl)"] {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Hero nav link base styles - padding 12px 17px to prevent shift on hover */
.is-hero .wp-block-navigation-item__content {
	padding: 12px 17px;
	border-radius: 0;
	transition: background-color 0.2s ease;
}

/* Nav link hover - blue background, no rounded corners */
.is-hero .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--theme-03);
	border-radius: 0;
	padding: 12px 17px;
}

/* All navigation link hovers - no border radius (blue rectangle) on all templates */
.wp-block-navigation-item a:hover,
.wp-block-navigation-item__content:hover,
.desktop-navigation .wp-block-navigation-item a:hover,
.site-header .wp-block-navigation-item a:hover,
.hero-navigation .wp-block-navigation-item a:hover,
.hero-navigation-block-wrapper .wp-block-navigation-item a:hover {
	border-radius: 0;
}

/* Dropdown submenu styles */
/* Submenu container - white background with dark blue text */
/* REQUIRED: !important to override WP Navigation submenu default background color */
.wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white) !important;
	border: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
	min-width: 200px;
}

/* Submenu links - dark blue text by default */
/* REQUIRED: !important to override inherited navigation link color */
.wp-block-navigation__submenu-container .wp-block-navigation-item a,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--theme-02) !important;
	padding: 12px 20px;
	display: block;
	transition: all 0.2s ease;
}

/* Submenu link hover - light blue background with white text */
/* REQUIRED: !important to override WP Navigation submenu hover default styles */
.wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--theme-03) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 0;
}

/* Dropdown caret/arrow - white, 14x14, NO stroke */
/* REQUIRED: !important to override WP Navigation block default SVG fill/stroke/sizing styles */
.wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon,
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
	fill: var(--wp--preset--color--white) !important;
	stroke: none !important;
	stroke-width: 0 !important;
	margin-left: 2px;
	/* 2px right from text */
	width: 14px !important;
	height: 14px !important;
}

/* REQUIRED: !important to override WP Navigation SVG element defaults for dropdown caret appearance */
.wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon svg,
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
	fill: var(--wp--preset--color--white) !important;
	stroke: none !important;
	stroke-width: 0 !important;
}

/* Ensure dropdown arrow inherits color in different contexts */
.wp-block-navigation-item.has-child .wp-block-navigation-item__content svg,
.wp-block-navigation-submenu .wp-block-navigation-item__content svg {
	fill: currentColor;
}

/* Override dropdown arrow to white on all page templates */
.home .wp-block-navigation-item.has-child svg,
.is-hero .wp-block-navigation-item.has-child svg,
header .wp-block-navigation-item.has-child svg,
.site-header .wp-block-navigation-item.has-child svg {
	fill: var(--wp--preset--color--white);
}

/* CONSISTENT DROPDOWN ALIGNMENT - Apply at ALL viewports */
/* Left justify dropdown nav items - ensure consistency across all screen sizes */
/* REQUIRED: !important to override WP Navigation submenu default text-align and flex alignment styles */
.wp-block-navigation__submenu-container {
	text-align: left !important;
	align-items: flex-start !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item {
	justify-content: flex-start !important;
	width: 100% !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item a {
	text-align: left !important;
	width: 100% !important;
	justify-content: flex-start !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-align: left !important;
	justify-content: flex-start !important;
}

/* Consistent caret positioning - keep caret 2px from text at all viewports */
/* The caret is a sibling of .wp-block-navigation-item__content, not a child */
/* So we need to reduce the padding-right on the content to bring the caret closer */
/* REQUIRED: !important to override WP core Navigation block inline padding/sizing for consistent dropdown caret positioning and styling */
body .wp-block-navigation .wp-block-navigation-item.has-child>a.wp-block-navigation-item__content,
body .wp-block-navigation .wp-block-navigation-submenu>a.wp-block-navigation-item__content,
body .wp-block-navigation-item.has-child>.wp-block-navigation-item__content,
body .wp-block-navigation-submenu>.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.has-child>.wp-block-navigation-item__content {
	padding-right: 2px !important;
}

/* Dropdown caret styling - white, no stroke, 14px across all viewports */
/* High specificity to override WordPress core navigation styles */
/* REQUIRED: !important to override WP core Navigation submenu toggle default sizing/spacing */
.wp-block-navigation .wp-block-navigation-submenu__toggle,
.wp-block-navigation .wp-block-navigation__submenu-icon,
.wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle,
.wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon,
button.wp-block-navigation-submenu__toggle {
	margin-left: 0 !important;
	width: 14px !important;
	height: 14px !important;
	min-width: 14px !important;
	min-height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* REQUIRED: !important to override WP core Navigation SVG icon default styles */
.wp-block-navigation .wp-block-navigation-submenu__toggle svg,
.wp-block-navigation .wp-block-navigation__submenu-icon svg,
.wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle svg,
.wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon svg,
button.wp-block-navigation-submenu__toggle svg {
	width: 14px !important;
	height: 14px !important;
	fill: var(--wp--preset--color--white) !important;
	stroke: none !important;
	stroke-width: 0 !important;
}

/* Subtle button style in navigation - removed individual margins, using container gap instead */

/* Page-default header - logo 190px from left viewport edge */
/* Override WordPress constrained layout to position content from left edge */
header.wp-block-template-part>.wp-block-group.is-layout-constrained {
	/* Remove constrained centering and padding */
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

header.wp-block-template-part>.wp-block-group>.wp-block-group.alignwide {
	/* Reset alignwide behavior - full width with left padding for logo position */
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 190px;
	padding-right: 40px;
}

/* Page-default navigation - 170px gap from logo */
@media (min-width: 1024px) {
	header.wp-block-template-part .site-header .desktop-navigation {
		margin-left: 170px;
	}

	/* Page-default nav link base styles (match hero navigation) */
	header.wp-block-template-part .site-header .desktop-navigation .wp-block-navigation-item a {
		padding: 12px 17px;
		border-radius: 0;
		transition: background-color 0.2s ease;
	}

	/* Page-default nav link hover - blue background, no border radius */
	header.wp-block-template-part .site-header .desktop-navigation .wp-block-navigation-item a:hover {
		background-color: var(--wp--preset--color--theme-03);
		border-radius: 0;
		padding: 12px 17px;
	}

	/* Header template part navigation (contact, etc.) - position nav closer to logo */
	/* REQUIRED: !important to override WP Group block inline justify-content for header nav layout */
	header.wp-block-template-part .wp-block-group.alignwide.is-content-justification-space-between {
		justify-content: flex-start !important;
		flex-wrap: nowrap;
		padding-right: 55px;
	}

	/* Add gap after logo icon */
	header.wp-block-template-part .wp-block-group.alignwide .wp-block-outermost-icon-block {
		margin-right: 120px;
	}

	/* Prevent nav items from wrapping */
	header.wp-block-template-part .wp-block-group .wp-block-navigation .wp-block-navigation-item {
		white-space: nowrap;
	}

	/* Header template part nav link base styles */
	header.wp-block-template-part .wp-block-group .wp-block-navigation .wp-block-navigation-item a {
		padding: 12px 17px;
		border-radius: 0;
		transition: background-color 0.2s ease;
		white-space: nowrap;
	}

	/* Header template part nav link hover - blue background, no border radius, no underline */
	/* REQUIRED: !important to override WordPress core navigation styles */
	header.wp-block-template-part .wp-block-group .wp-block-navigation .wp-block-navigation-item a:hover {
		background-color: var(--wp--preset--color--theme-03) !important;
		border-radius: 0;
		padding: 12px 17px;
		text-decoration: none;
	}

	/* Align button items with nav links and set consistent gap */
	header.wp-block-template-part .wp-block-navigation .wp-block-buttons {
		margin-top: 0;
		margin-left: 0;
		gap: 32px;
		justify-content: flex-start;
	}

	/* Gap between nav items */
	header.wp-block-template-part .wp-block-navigation__container {
		gap: 32px;
	}

	/* No underline on navigation button links (Partner With Us, Become a Lifeguard) on hover */
	header.wp-block-template-part .wp-block-navigation .wp-block-buttons .wp-block-button__link:hover,
	header.wp-block-template-part .wp-block-navigation .wp-block-buttons a:hover {
		text-decoration: none;
	}
}

/* ==========================================================================
   Header Small - Interior page sticky header with star logo
   ========================================================================== */

/**
 * REQUIRED: !important declarations in this section override WordPress
 * Navigation block flex alignment, sticky header positioning, and
 * responsive container layouts. These are necessary because:
 * - WP Navigation blocks generate inline flex properties that conflict with sticky behavior
 * - Header alignment must be consistent across all interior pages
 * - Responsive nav container requires display override for proper layout
 */

.site-header-small {
	position: sticky;
	top: 0;
	z-index: 100000;
}

/* Ensure vertical centering of all items in header-small */
.site-header-small.is-layout-flex {
	align-items: center !important;
}

/* Navigation container - ensure proper flex alignment */
.site-header-small .wp-block-navigation {
	align-items: center;
}

/* Logo sizing */
.site-header-small .header-small-logo {
	margin: 0;
	flex-shrink: 0;
}

.site-header-small .header-small-logo img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

/* Navigation should fill available space and align items to end - match home sticky nav */
body .site-header-small .header-small-navigation {
	flex-grow: 1;
	justify-content: flex-end !important;
}

body .wp-block-template-part.is-sticky .site-header-small.is-layout-flex {
	justify-content: space-between !important;
}

/* Container holding both nav items and buttons - match home sticky nav gap (16px) */
/* IMPORTANT: justify-content: flex-end to right-align navigation in default state (not just sticky) */
/* REQUIRED: !important to override WP Navigation responsive container default flex/alignment styles */
.site-header-small .header-small-navigation .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 16px !important;
}

/* REQUIRED: !important to override WP Navigation container default flex-grow for proper header layout */
.site-header-small .header-small-navigation .wp-block-navigation__container {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	align-items: center;
	flex-grow: 0 !important;
}

.site-header-small .header-small-navigation .wp-block-navigation-item {
	white-space: nowrap;
}

.site-header-small .header-small-navigation .wp-block-navigation-item a {
	color: var(--wp--preset--color--white);
	padding: 12px 17px;
	border-radius: 0;
	transition: background-color 0.2s ease;
	white-space: nowrap;
	line-height: 22px;
}

.site-header-small .header-small-navigation .wp-block-navigation-item a:hover {
	background-color: var(--wp--preset--color--theme-03);
	border-radius: 0;
}

/* Dropdown arrow color */
.site-header-small .wp-block-navigation-item.has-child svg {
	fill: var(--wp--preset--color--white);
}

/* Button styling within navigation - 16px gap to match nav items */
/* REQUIRED: !important declarations throughout this navigation button section override WP Button block and Navigation block inline styles to achieve custom link/button appearance and responsive breakpoint behavior */
.site-header-small .header-small-navigation .wp-block-buttons {
	margin: 0;
	flex-shrink: 0;
	gap: 16px !important;
	align-items: center;
	display: flex !important;
	margin-top: 1px !important;
}

/* Individual button wrapper alignment */
/* REQUIRED: !important to override WP Button block default display/alignment */
.site-header-small .header-small-navigation .wp-block-button {
	display: flex !important;
	align-items: center !important;
}

/* Partner With Us link styling */
/* REQUIRED: !important to override WP Button block default background/border/padding styles for link appearance */
.site-header-small .header-small-navigation a[href*="partner-with-us"],
.site-header-small .header-small-navigation .wp-block-button__link[href*="partner-with-us"] {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-bottom: 2px dotted var(--wp--preset--color--theme-04) !important;
	border-radius: 0 !important;
	padding: 12px 0 !important;
	line-height: 22px !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* REQUIRED: !important to override WP Button hover styles for link-style button */
.site-header-small .header-small-navigation a[href*="partner-with-us"]:hover,
.site-header-small .header-small-navigation .wp-block-button__link[href*="partner-with-us"]:hover {
	background: none !important;
	background-color: transparent !important;
	border-bottom: 2px solid var(--wp--preset--color--theme-05) !important;
	text-decoration: none !important;
}

/* Become a Lifeguard button - yellow wave background (matches sticky nav) */
/* REQUIRED: !important to override WP Button block inline styles for custom wave background button design */
.site-header-small .header-small-navigation .wp-block-button__link[href*="lifeguard"] {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave.png') !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	padding: 12px 20px !important;
	border: none !important;
	line-height: 22px !important;
	font-weight: 700 !important;
	text-transform: capitalize !important;
	letter-spacing: 0.6px !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-family: var(--wp--preset--font-family--sansation) !important;
	display: inline-flex !important;
	align-items: center !important;
}

.site-header-small .header-small-navigation .wp-block-button__link[href*="lifeguard"]:hover {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave-flipped.png') !important;
	color: var(--wp--preset--color--theme-03) !important;
}

/* Mobile: Hide navigation, show hamburger - matching hero pages breakpoint at 1140px */
/* REQUIRED: !important to override WP Navigation block display for mobile responsive behavior */
@media (max-width: 1140px) {
	.site-header-small .header-small-navigation {
		display: none !important;
	}

	.site-header-small .mobile-nav-toggle {
		display: flex !important;
	}
}

/* Desktop: Show navigation, hide hamburger - MUST override global mobile nav rules */
/* REQUIRED: !important to override mobile nav toggle visibility rules at desktop breakpoint */
@media (min-width: 1141px) {

	.site-header-small .mobile-nav-toggle,
	.site-header-small #mobile-nav-toggle,
	body .site-header-small .mobile-nav-toggle,
	body:not(.home) .site-header-small .mobile-nav-toggle {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

/* Desktop: Ensure navigation stays on single line */
/* REQUIRED: !important to override WP header/navigation flex wrapping for single-line desktop layout */
@media (min-width: 1141px) {
	.site-header-small {
		flex-wrap: nowrap !important;
	}

	.site-header-small .header-small-navigation {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
	}

	.site-header-small .header-small-navigation .wp-block-navigation__container {
		flex-wrap: nowrap !important;
	}
}

/* ==========================================================================
   Header Small - Responsive breakpoint adjustments (1141px to 1920px+)
   REQUIRED: !important declarations throughout these breakpoints override
   WP Navigation/Group block inline styles for consistent header spacing,
   padding, gaps, and sizing across all viewport widths. Without !important,
   the WP-generated inline styles would override our responsive adjustments.
   ========================================================================== */

/* Desktop 1141-1279px: tighter gaps to fit nav at smaller widths */
@media (min-width: 1141px) and (max-width: 1279px) {
	.site-header-small {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.site-header-small .header-small-logo img {
		width: 60px !important;
		height: 60px !important;
	}

	.site-header-small .header-small-navigation .wp-block-navigation__container {
		gap: 16px !important;
	}

	.site-header-small .header-small-navigation .wp-block-navigation-item a {
		padding: 8px 10px !important;
	}

	.site-header-small .header-small-navigation .wp-block-buttons {
		gap: 16px !important;
		margin-left: 12px !important;
	}

	/* Move operations dropdown caret up -4px */
	.site-header-small .header-small-navigation .wp-block-navigation-submenu__toggle svg {
		position: relative;
		top: -4px;
	}

	/* Align last two nav items with other nav items */
	.site-header-small .header-small-navigation .wp-block-buttons {
		transform: translateY(-3px);
	}

	/* Match font size for consistent sizing */
	.site-header-small .header-small-navigation a[href*="partner-with-us"],
	.site-header-small .header-small-navigation .wp-block-button__link[href*="lifeguard"] {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
	}
}

/* Desktop 1280-1511px: reduce padding and gaps to fit all nav items */
@media (min-width: 1280px) and (max-width: 1511px) {
	.site-header-small {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.site-header-small .header-small-navigation .wp-block-navigation__container {
		gap: 20px;
	}

	.site-header-small .header-small-navigation .wp-block-navigation-item a {
		padding: 10px 12px;
	}
}

/* Match home page sticky nav at 1440px - tightest padding */
@media (min-width: 1440px) and (max-width: 1511px) {
	.site-header-small {
		padding-left: 10px !important;
		padding-right: 20px !important;
	}

	/* At 1440px use 12px gaps for tighter spacing - consistent for all items */
	.site-header-small .header-small-navigation .wp-block-navigation__container {
		gap: 12px !important;
	}

	.site-header-small .header-small-navigation .wp-block-navigation__responsive-container-content {
		gap: 12px !important;
	}

	.site-header-small .header-small-navigation .wp-block-buttons {
		gap: 24px !important;
		margin-left: 12px !important;
	}
}

/* Match home page sticky nav at 1512px - tighter padding */
@media (min-width: 1512px) {
	.site-header-small {
		padding-left: 10px !important;
		padding-right: 20px !important;
	}

	.site-header-small .header-small-logo {
		margin-left: 5vw;
		margin-right: calc(144px - 5vw);
	}

	/* At 1512px use 14px gaps to match hero template nav gaps for consistency */
	.site-header-small .header-small-navigation .wp-block-navigation__container {
		gap: 14px !important;
	}

	.site-header-small .header-small-navigation .wp-block-navigation__responsive-container-content {
		gap: 14px !important;
	}

	.site-header-small .header-small-navigation .wp-block-buttons {
		gap: 12px !important;
		margin-left: 12px !important;
	}

	/* Align buttons vertically with nav items */
	.site-header-small .header-small-navigation .wp-block-button.is-style-subtle {
		margin-top: -5px !important;
	}
}

/* At 1600px+ use full 32px gaps - consistent for all items */
@media (min-width: 1600px) {
	.site-header-small .header-small-navigation .wp-block-navigation__container {
		gap: 32px !important;
	}

	.site-header-small .header-small-navigation .wp-block-navigation__responsive-container-content {
		gap: 32px !important;
	}

	.site-header-small .header-small-navigation .wp-block-buttons {
		gap: 32px !important;
	}
}

/* ==========================================================================
   Header Hero - Positioned absolutely over hero cover sections
   ========================================================================== */

.site-header-hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
}

/* Logo sizing */
.site-header-hero .header-hero-logo {
	margin: 0;
	flex-shrink: 0;
	width: 200px;
	transition: width 0.3s ease-in-out;
}

.site-header-hero .header-hero-logo a {
	display: block;
	width: 100%;
	height: auto;
}

.site-header-hero .header-hero-logo svg {
	width: 100%;
	height: auto;
	fill: white;
}

/* Navigation styling */
.site-header-hero .header-hero-navigation {
	flex-grow: 1;
}

.site-header-hero .header-hero-navigation .wp-block-navigation__container {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}

/* Force single line navigation layout */
.site-header-hero .wp-block-navigation.is-responsive {
	flex-wrap: nowrap;
}

.site-header-hero .wp-block-navigation .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
}

.site-header-hero .header-hero-navigation .wp-block-navigation-item {
	white-space: nowrap;
}

/* REQUIRED: Override default dark navigation colors for hero pages */
body .site-header-hero .header-hero-navigation .wp-block-navigation-item__content,
body .site-header-hero .header-hero-navigation .wp-block-navigation-item__label,
body .site-header-hero .header-hero-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--white) !important;
	padding: 10px 12px;
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

/* Submenu dropdown should stay dark for readability */
/* REQUIRED: !important to override parent white color inheritance for readable submenu text */
body .site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
body .site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	color: var(--wp--preset--color--theme-02) !important;
}

/* Dropdown arrow white for main nav - no stroke */
/* REQUIRED: !important to override WP Navigation SVG defaults for white hero dropdown caret */
body .site-header-hero .header-hero-navigation .wp-block-navigation__submenu-icon svg path {
	fill: var(--wp--preset--color--white) !important;
	stroke: none !important;
	stroke-width: 0 !important;
}

.site-header-hero .header-hero-navigation .wp-block-navigation-item a:hover {
	background-color: var(--wp--preset--color--theme-03);
	border-radius: 0;
	color: white;
}

/* Dropdown arrow color */
.site-header-hero .wp-block-navigation-item.has-child svg {
	fill: var(--wp--preset--color--white);
}

/* Partner With Us link styling */
/* REQUIRED: !important to override WP Button block inline styles for custom transparent/underlined link appearance */
.site-header-hero .header-hero-navigation a[href*="partner-with-us"],
.site-header-hero .header-hero-navigation .wp-block-button__link[href*="partner-with-us"] {
	background: none !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--white) !important;
	border: none !important;
	border-bottom: 2px dotted var(--wp--preset--color--theme-04) !important;
	border-radius: 0 !important;
	padding: 10px 0 8px !important;
}

/* REQUIRED: !important to override WP Button hover styles for transparent link appearance */
.site-header-hero .header-hero-navigation a[href*="partner-with-us"]:hover,
.site-header-hero .header-hero-navigation .wp-block-button__link[href*="partner-with-us"]:hover {
	background: none !important;
	background-color: transparent !important;
	border-bottom: 2px solid var(--wp--preset--color--theme-05) !important;
	text-decoration: none !important;
}

/* Become a Lifeguard button - yellow background */
/* REQUIRED: !important to override WP Button block inline background, color, padding styles */
.site-header-hero .header-hero-navigation .wp-block-button__link[href*="lifeguard"] {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	padding: 12px 24px !important;
	border: none !important;
}

/* REQUIRED: !important to override WP Button hover background color */
.site-header-hero .header-hero-navigation .wp-block-button__link[href*="lifeguard"]:hover {
	background-color: #e5c460 !important;
}

/* Mobile: Hide navigation, show hamburger - matching global breakpoint at 1279px */
@media (max-width: 1279px) {
	.site-header-hero .header-hero-navigation {
		display: none;
	}

	.site-header-hero .hero-mobile-toggle {
		display: flex;
	}
}

/* Desktop: Show navigation, hide hamburger */
@media (min-width: 1280px) {
	.site-header-hero .hero-mobile-toggle {
		display: none;
	}
}

/* ==========================================================================
   Site Header Hero - Desktop Dropdown Submenu on Hover
   CRITICAL: !important required to override WP Navigation block inline styles
   ========================================================================== */

/* Parent item needs position relative for absolute submenu positioning */
.site-header-hero .header-hero-navigation .wp-block-navigation-item.has-child,
.site-header-hero .header-hero-navigation .wp-block-navigation-submenu {
	position: relative !important;
}

/* Submenu hidden by default - MUST be absolute to overlay without pushing */
.site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	z-index: 10000 !important;
	min-width: 200px;
	background-color: var(--wp--preset--color--white) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
	margin: 0 !important;
}

/* Show submenu on hover of parent item */
.site-header-hero .header-hero-navigation .wp-block-navigation-item.has-child:hover>.wp-block-navigation__submenu-container,
.site-header-hero .header-hero-navigation .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column !important;
	position: absolute !important;
}

/* Submenu item styling */
.site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a,
.site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 12px 20px !important;
	color: var(--wp--preset--color--theme-02) !important;
	background: transparent !important;
	text-align: left;
	white-space: nowrap;
}

.site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.site-header-hero .header-hero-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--theme-03) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ==========================================================================
   Site Header Hero Sticky State
   ========================================================================== */

.site-header-hero.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: var(--wp--preset--color--theme-02);
	transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
	padding: 15px 20px;
}

/* Admin bar offset for sticky hero navigation */
.admin-bar .site-header-hero.is-sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header-hero.is-sticky {
		top: 46px;
	}
}

/* Logo sizing when sticky - Note: transition merged to line 2526 */
.site-header-hero.is-sticky .header-hero-logo {
	width: 120px;
}

/* Hide carousel dots when sticky nav is active */
body:has(.site-header-hero.is-sticky) .hero-carousel-dots {
	opacity: 0;
	pointer-events: none;
}

/* Current page indicator - no background styling */
.is-hero .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.is-hero .wp-block-navigation-item__content[aria-current="page"] {
	background-color: transparent;
	border-radius: 0;
}

/* Partner With Us button - transparent background, yellow dotted underline - REQUIRED: !important to override WordPress core button and theme.json button styles */
/* ONLY applies in header navigation */
.hero-navigation .wp-block-button.is-style-subtle .wp-block-button__link,
body .hero-navigation .wp-block-button.is-style-subtle .wp-block-button__link.wp-element-button,
body .hero-navigation-block-wrapper .wp-block-button.is-style-subtle .wp-block-button__link,
body .hero-navigation-block-wrapper .wp-block-button.is-style-subtle .wp-block-button__link.wp-element-button,
.wp-block-navigation a.wp-block-button__link[href*="partner-with-us"],
body .hero-navigation a.wp-block-button__link[href*="partner-with-us"],
.hero-navigation-block-wrapper a.wp-block-button__link[href*="partner-with-us"] {
	/* REQUIRED: !important to override WordPress core button styles */
	background: none !important;
	/* REQUIRED: !important to override WordPress core navigation styles */
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-bottom: 2px dotted var(--wp--preset--color--theme-04) !important;
	border-radius: 0 !important;
	padding: 10px 0 8px !important;
	color: #f4f2ed;
}

.hero-navigation .wp-block-button.is-style-subtle .wp-block-button__link:hover,
body .hero-navigation .wp-block-button.is-style-subtle .wp-block-button__link.wp-element-button:hover,
.hero-navigation-block-wrapper .wp-block-button.is-style-subtle .wp-block-button__link:hover,
body .hero-navigation-block-wrapper .wp-block-button.is-style-subtle .wp-block-button__link.wp-element-button:hover,
.wp-block-navigation a.wp-block-button__link[href*="partner-with-us"]:hover,
body .hero-navigation a.wp-block-button__link[href*="partner-with-us"]:hover,
.hero-navigation-block-wrapper a.wp-block-button__link[href*="partner-with-us"]:hover {
	/* REQUIRED: !important to override WordPress core button styles */
	background: none !important;
	background-color: transparent;
	background-image: none !important;
	border-bottom: 2px solid var(--wp--preset--color--theme-05) !important;
	color: #f4f2ed;
	text-decoration: none;
}

/* Become A Lifeguard button - water wave animation with clip-path (white base, yellow wave overlay) */
/* REQUIRED: !important to override WP Button block inline styles for animated wave button design */
.hero-navigation a.wp-block-button__link[href*="become-a-lifeguard"] {
	position: relative !important;
	overflow: hidden !important;
	/* No background - pseudo-elements provide colors */
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-xl) !important;
	border: none !important;
	padding: 10px 20px !important;
}

/* White base layer */
.hero-navigation a.wp-block-button__link[href*="become-a-lifeguard"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	border-radius: inherit;
	z-index: -2;
	pointer-events: none;
}

/* Yellow overlay with static wave shape - shows both colors */
.hero-navigation a.wp-block-button__link[href*="become-a-lifeguard"]::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--theme-04);
	border-radius: inherit;
	z-index: -1;
	pointer-events: none;
	/* Static wave shape showing both colors */
	clip-path: polygon(0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%);
}

.hero-navigation a.wp-block-button__link[href*="become-a-lifeguard"]:hover::after {
	animation: water-wave 2s ease-in-out infinite;
}

/* REQUIRED: !important to override WP Button default hover color for water-fill effect contrast */
.hero-navigation a.wp-block-button__link[href*="become-a-lifeguard"]:hover {
	color: var(--wp--preset--color--theme-02) !important;
	text-decoration: none;
}

/**
 * 4.10 Service Areas Map Section
 * Map takes full container width, stats boxes positioned absolutely on top
 * Target: .has-water-ripple-bg containing .has-theme-02-background-color (not cards section)
 *
 * REQUIRED: !important declarations override WordPress Column block inline styles
 * to achieve absolute positioning of stats overlay on the map. WP generates
 * flex-basis and margin styles that conflict with the absolute positioning layout.
 */

/* Map section container - relative positioning for absolute children */
.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color)) {
	position: relative;
	padding: 60px 0;
	overflow: visible;
}

/* Override the columns layout */
.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns {
	display: block;
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
}

/* Stats column - positioned absolutely in upper left, overlaying the map - REQUIRED: !important to override WordPress core column block inline styles */
.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child {
	position: absolute !important;
	left: 200px !important;
	top: 120px !important;
	bottom: auto !important;
	width: auto !important;
	max-width: 400px;
	z-index: 10;
}

/* Job Fit Section - exclude from Service Areas map overlay positioning */
/* This section uses has-water-ripple-bg but should NOT have display: block or absolute positioned columns */
/* REQUIRED: !important to override Service Areas map overlay positioning that also uses has-water-ripple-bg */
.job-fit-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
}

/* REQUIRED: !important to reset Service Areas absolute positioning for Job Fit section */
.job-fit-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 50% !important;
	max-width: none;
	z-index: auto;
}

/* Job Fit Section - text column should be 50% width, not 100% */
/* REQUIRED: !important to override Service Areas map full-width column styling */
.job-fit-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:last-child {
	width: 50% !important;
	max-width: 50% !important;
	flex-basis: 50% !important;
}

/* Is Job Right Section (Lifeguard page) - exclude from Service Areas map overlay positioning */
/* This section uses has-water-ripple-bg but should NOT have display: block or absolute positioned columns */
/* REQUIRED: !important to override Service Areas map overlay positioning that also uses has-water-ripple-bg */
.is-job-right-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns,
.is-job-right-section.has-water-ripple-bg>.wp-block-columns {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
}

/* REQUIRED: !important to reset Service Areas absolute positioning for Is Job Right section */
.is-job-right-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child,
.is-job-right-section.has-water-ripple-bg>.wp-block-columns>.wp-block-column:first-child {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 50% !important;
	max-width: none;
	z-index: auto;
}

/* Is Job Right Section - text column should be 50% width, not 100% */
/* REQUIRED: !important to override Service Areas map full-width column styling */
.is-job-right-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:last-child,
.is-job-right-section.has-water-ripple-bg>.wp-block-columns>.wp-block-column:last-child {
	width: 50% !important;
	max-width: 50% !important;
	flex-basis: 50% !important;
}

/* Is Job Right Section - Carousel flush left to viewport edge (desktop) */
@media (min-width: 1024px) {

	/* Section container - remove left padding */
	.is-job-right-section {
		padding-left: 0 !important;
	}





	/* Columns container - break out to viewport edge on left */
	.is-job-right-section>.wp-block-columns.alignwide {
		margin-left: calc(50% - 50vw) !important;
		max-width: none !important;
		width: 100vw !important;
		padding-left: 0 !important;
	}

	/* First column (carousel) - flush left, take up left half of viewport */
	.is-job-right-section>.wp-block-columns>.wp-block-column:first-child {
		padding-left: 0 !important;
		margin-left: 0 !important;
		flex-basis: 50vw !important;
		max-width: 50vw !important;
	}

	/* Carousel container - flush left */
	.is-job-right-section .wp-block-kindling-carousel,
	.is-job-right-section .kindling-carousel-container {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	/* Text column - positioned in right half with padding */
	.is-job-right-section>.wp-block-columns>.wp-block-column:last-child {
		flex-basis: 50vw !important;
		max-width: 50vw !important;
		padding-left: 80px !important;
		padding-right: var(--wp--preset--spacing--60) !important;
	}
}

/* Stats box container styling */
.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color)) .has-theme-02-background-color {
	display: inline-flex;
	gap: 6px;
	padding: 26px 35px;
}

/* Map column - full width of container - REQUIRED: !important to override WordPress core column block inline styles */
.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:last-child {
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
}

/* Map image - full width */
.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color)) .wp-block-image {
	margin: 0;
}

.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color)) .wp-block-image img {
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Service areas list text - centered below map */
.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:last-child>p {
	text-align: center;
	margin-top: 16px;
}

/* Responsive: Stack on smaller screens - REQUIRED: !important to override desktop absolute positioning */
@media (max-width: 1024px) {
	.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child {
		position: relative !important;
		left: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100%;
		text-align: center;
		padding: 40px 20px;
		order: 2;
	}

	.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:last-child {
		order: 1;
	}

	.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns {
		display: flex;
		flex-direction: column;
	}

	.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color)) .has-theme-02-background-color {
		justify-content: center;
	}
}

/* Full-height image style for Partner Contact section */
.is-style-full-height {
	height: 100%;
}

.is-style-full-height img {
	height: 100%;
	object-fit: cover;
}

.is-vertically-aligned-stretch .is-style-full-height {
	height: 100%;
}

/* Partner Contact - Section styling */
.has-droplet-bg {
	position: relative;
	overflow: hidden;
}

.has-droplet-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2025/12/texture-bg.png') 0px -537px / 100% 225% no-repeat;
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
}

.has-droplet-bg>* {
	position: relative;
	z-index: 1;
}

.has-droplet-bg>.wp-block-columns.alignwide {
	align-items: stretch;
}

/* Partner Contact - Image column - absolute positioned for full height - REQUIRED: !important to override WordPress core column block inline styles */
/* Desktop only - wrapped in min-width media query so mobile can override */
@media (min-width: 782px) {
	.has-droplet-bg .wp-block-column:last-child:not(.operations-contact-image-column):not(.partner-contact-image-column):not(.contact-contact-image-column):not(.contact-hero-form-image-column):not(.contact-image-column):not(.form-image-column) {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 770px !important;
		margin: 0 !important;
		flex-basis: auto !important;
		padding-right: 0 !important;
	}
}

/* Operations Contact - override absolute positioning for 50/50 layout */
/* REQUIRED: !important to override Partner Contact section absolute positioning for Operations-specific 50/50 layout */
.has-droplet-bg.operations-contact-section .operations-contact-image-column,
body .has-droplet-bg.operations-contact-section .wp-block-column.operations-contact-image-column,
.operations-contact-section .operations-contact-image-column {
	position: relative !important;
	width: 50%;
	flex-basis: 50%;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: flex !important;
	align-items: stretch !important;
}

/* Operations Contact - remove fixed height for 50/50 layout */
body .operations-contact-section {
	height: auto;
	min-height: auto;
	max-height: none;
	overflow: visible;
}

.operations-contact-section .wp-block-columns {
	height: auto;
	min-height: auto;
	max-height: none;
}

.operations-contact-section .operations-contact-image-column .wp-block-image,
.operations-contact-section .operations-contact-image-column figure {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	flex: 1;
}

.operations-contact-section .operations-contact-image-column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex: 1;
}

#wp--skip-link--target>div>div.wp-block-group.alignfull.has-texture-bg.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-fd821a17.wp-block-group-is-layout-constrained>div>div:nth-child(2)>div>h2 {
	margin-top: 10px;
}

.wp-container-core-group-is-layout-1fc92b39> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 670px;
	margin-left: 0;
	margin-right: auto;
}

/* Partner Contact - override absolute positioning for 50/50 layout */
.has-droplet-bg.partner-contact-section .partner-contact-image-column,
body .has-droplet-bg.partner-contact-section .wp-block-column.partner-contact-image-column,
.partner-contact-section .partner-contact-image-column {
	position: relative;
	width: 50%;
	flex-basis: 50%;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: flex;
	align-items: stretch;
}

/* Partner Contact - remove fixed height for 50/50 layout */
.partner-contact-section {
	height: auto;
	min-height: auto;
	max-height: none;
	overflow: visible;
}

.partner-contact-section .wp-block-columns {
	height: auto;
	min-height: auto;
	max-height: none;
}

.partner-contact-section .partner-contact-image-column .wp-block-image,
.partner-contact-section .partner-contact-image-column figure {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	flex: 1;
}

.partner-contact-section .partner-contact-image-column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex: 1;
}


.form-image-column .wp-block-image,
.form-image-column figure {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	flex: 1;
	border-radius: inherit;
	overflow: hidden;
}

.form-image-column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex: 1;
	border-radius: inherit;
}

/* Operations pages - Form + Image section should NOT have border-radius */
.single-operations .form-image-column,
.single-operations .form-image-column .wp-block-image,
.single-operations .form-image-column figure,
.single-operations .form-image-column img {
	border-radius: 0;
}

/* Contact Contact - override absolute positioning for 50/50 layout */
.has-droplet-bg.contact-contact-section .contact-contact-image-column,
body .has-droplet-bg.contact-contact-section .wp-block-column.contact-contact-image-column,
.contact-contact-section .contact-contact-image-column {
	position: relative;
	width: 50%;
	flex-basis: 50%;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: flex;
	align-items: stretch;
}

/* Contact Contact - remove fixed height for 50/50 layout */
.contact-contact-section {
	height: auto;
	min-height: auto;
	max-height: none;
	overflow: visible;
}

.contact-contact-section .wp-block-columns {
	height: auto;
	min-height: auto;
	max-height: none;
}

.contact-contact-section .contact-contact-image-column .wp-block-image,
.contact-contact-section .contact-contact-image-column figure {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	flex: 1;
}

.contact-contact-section .contact-contact-image-column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex: 1;
}

/* Contact Hero Form - override absolute positioning for 50/50 layout */
.has-droplet-bg.contact-hero-form-section .contact-hero-form-image-column,
body .has-droplet-bg.contact-hero-form-section .wp-block-column.contact-hero-form-image-column,
.contact-hero-form-section .contact-hero-form-image-column {
	position: relative;
	width: 50%;
	flex-basis: 50%;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: flex;
	align-items: stretch;
}

/* Contact Hero Form - remove fixed height for 50/50 layout */
.contact-hero-form-section {
	height: auto;
	min-height: auto;
	max-height: none;
	overflow: visible;
}

.contact-hero-form-section .wp-block-columns {
	height: auto;
	min-height: auto;
	max-height: none;
}

.contact-hero-form-section .contact-hero-form-image-column .wp-block-image,
.contact-hero-form-section .contact-hero-form-image-column figure {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	flex: 1;
}

.contact-hero-form-section .contact-hero-form-image-column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex: 1;
}

.contact-image-column .wp-block-image,
.contact-image-column figure,
.has-droplet-bg .wp-block-column:last-child:not(.operations-contact-image-column):not(.partner-contact-image-column):not(.contact-contact-image-column):not(.contact-hero-form-image-column) .wp-block-image,
.has-droplet-bg .wp-block-column:last-child:not(.operations-contact-image-column):not(.partner-contact-image-column):not(.contact-contact-image-column):not(.contact-hero-form-image-column) figure {
	height: 100%;
	width: 100%;
	margin: 0;
	border-radius: 0;
}

.contact-image-column .wp-block-image img,
.contact-image-column img,
.has-droplet-bg .wp-block-column:last-child:not(.operations-contact-image-column):not(.partner-contact-image-column):not(.contact-contact-image-column):not(.contact-hero-form-image-column) img,
.has-droplet-bg img[style*="border-radius"] {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Partner Contact - Reduce form input margins - REQUIRED: !important to override Gravity Forms plugin inline styles */
.has-droplet-bg .gform_wrapper .gfield {
	margin-bottom: 12px !important;
}

.has-droplet-bg .gform_wrapper .gform_fields {
	row-gap: 12px !important;
}

.has-droplet-bg .gform_wrapper .gfield_label {
	margin-bottom: 4px !important;
}

/**
 * 5.0 Partner Page Separator Styles
 * Fixed 224px width separator for Partner patterns
 * Prevents flex-basis from making separator tall in vertical flex containers
 * REQUIRED: !important to override WordPress core separator block inline styles
 */
.separator-224 {
	width: 224px !important;
	max-width: 224px !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	height: auto;
	/*margin: 30px auto 0 0 !important;*/
}


/**
 * 5.1 Aquatic Solutions Section
 */

/* Heading should stay on one line */
.aquatic-solutions-heading {
	white-space: nowrap;
}

/* Service card images - full width, no margin */
.aquatic-solutions-section .service-card-image {
	margin: 0;
}

.aquatic-solutions-section .service-card-image img {
	width: 100%;
	display: block;
}

/**
 * 5.2 Operations Solutions Section
 * Note: Background positioning controlled via WordPress editor focal point
 */

/* Solutions section - 80px padding top and bottom */
.solutions-section-cover {
	padding-top: 80px;
	padding-bottom: 80px;
	position: relative;
	z-index: 1;
}

.solutions-section-cover .wp-block-separator {
	margin-top: 30px;
}

/* Solutions section separator - centered, 224px width */
.solutions-section-cover .short-underline {
	width: 224px;
	max-width: 224px;
	height: 3px;
	margin-left: auto;
	margin-right: auto;
}

/* Metrics section (Proven Results at Scale) separator */
.is-style-section-2 .wp-block-separator {
	width: 224px;
	max-width: 224px;
	height: 3px;
	border: none;
	margin-bottom: 43px;
}

/* Metrics section - horizontal layout with 75px gap */
.is-style-section-2 .is-style-kindling-grid-system {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 75px;
}

.is-style-section-2 .is-style-grid-item-span-full-to-one-quarter {
	grid-column: span 1;
}

/* Solutions cards - 34px gaps between columns, responsive layout */
.solutions-section-cover>.wp-block-cover__inner-container>.wp-block-columns.alignwide {
	gap: 34px;
	max-width: 100%;
	justify-content: center;
	width: 100%;
}

/* Solutions column - max Figma width: 617px, responsive */
.solutions-section-cover .wp-block-column {
	max-width: 617px;
	flex: 1 1 auto;
	min-width: 280px;
	overflow: hidden;
}

/* Solutions card - responsive dimensions, vertical centering and padding */
body .solutions-card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 617px;
	height: auto;
	min-height: 600px;
}

body .solutions-card .wp-block-cover__inner-container {
	padding: 40px 98px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	box-sizing: border-box;
}

/* Short underline for solution cards - REQUIRED: !important to override WordPress core separator inline styles */
.short-underline-white {
	width: 224px !important;
	max-width: 224px !important;
	height: 3px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Natural state - no overlay or text by default - REQUIRED: !important to override WordPress core cover block opacity */
.solutions-card-natural .wp-block-cover__background {
	opacity: 0 !important;
	transition: opacity 0.3s ease-in-out;
}

.solutions-card-natural .wp-block-cover__inner-container {
	/* REQUIRED: !important to override WordPress core cover block opacity */
	opacity: 0 !important;
	transition: opacity 0.3s ease-in-out;
}

/* Hover state - overlay and text appear - REQUIRED: !important to override WordPress core cover block opacity */
.solutions-card-natural:hover .wp-block-cover__background {
	opacity: 0.7 !important;
}

.solutions-card-natural:hover .wp-block-cover__inner-container {
	/* REQUIRED: !important to override WordPress core cover block opacity */
	opacity: 1 !important;
}

/* Active state - always shows overlay */
.solutions-card-active {
	cursor: pointer;
}

.solutions-card-active .wp-block-cover__background {
	transition: opacity 0.3s ease-in-out;
}

/**
 * 5.2 Operations Intro Section
 * Full-bleed image left, text right layout per Figma
 *
 * REQUIRED: !important declarations override WordPress database inline styles
 * stored in post content. WP stores padding/margin values inline when blocks
 * are edited, which must be overridden for the designed full-bleed layout.
 */
.operations-intro-section {
	overflow: hidden;
}

.operations-intro-section>.wp-block-columns {
	max-width: none;
	margin: 0;
	gap: 0;
}

/* Image column - bleed to left edge - REQUIRED: !important to override WordPress database inline styles */
.operations-intro-section>.wp-block-columns>.wp-block-column:first-child {
	padding: 0 !important;
	margin: 0;
}

.operations-intro-section>.wp-block-columns>.wp-block-column:first-child .wp-block-image {
	margin: 0;
}

.operations-intro-section>.wp-block-columns>.wp-block-column:first-child .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Text column - add left padding for gap, constrain width on right - REQUIRED: !important to override WordPress database inline styles */
.operations-intro-section>.wp-block-columns>.wp-block-column:last-child {
	padding-left: var(--wp--preset--spacing--60) !important;
	padding-right: var(--wp--preset--spacing--50) !important;
	max-width: 730px;
}

/* Operations eyebrow text needs margin-bottom */

/* Operations separator needs margin-bottom */
.operations-intro-section .wp-block-separator {
	margin-bottom: 52px;
}

/* Hide empty buttons in operations pages (staging DB has extra empty button) */
.single-operations .wp-block-button__link[href="#"],
.single-operations a.wp-block-button__link:empty,
.has-texture-bg .wp-block-buttons a[href="#"] {
	display: none !important;
}

/* Single operations CPT - flush left first column */
.single-operations .has-texture-bg .wp-block-columns.alignwide:not(.has-3-columns)>.wp-block-column:first-child {
	margin-left: 0;
	padding-left: 0;
}

/**
 * 5.3 Operations Leadership Section
 * Heading and photos overlap the section above
 * Blue background starts partway through photos
 */
.leadership-wrapper {
	position: relative;
	z-index: 2;
	margin-top: -230px;
}

.leadership-section {
	position: relative;
	padding-top: 0;
	background: transparent;
}

/* Note: .leadership-section.has-theme-02-background-color moved to line ~13100 */

/* Blue background starts below heading, covers most of photos + names */
.leadership-section::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 150px;
	bottom: 0;
	background-color: var(--wp--preset--color--theme-02);
	z-index: -1;
}

.leadership-section .leadership-header {
	position: relative;
	z-index: 3;
}

.leadership-section .leadership-cards {
	gap: 32px;
	justify-content: center;
	position: relative;
	z-index: 1;
	margin-top: -40px;
}

.leadership-section .leadership-cards>.wp-block-column {
	flex-basis: 444px;
	flex-grow: 0;
	max-width: 444px;
}

.leadership-section .leadership-photo {
	margin: 0 0 30px 0;
	position: relative;
	cursor: pointer;
}

.leadership-section .leadership-photo img {
	width: 444px;
	height: 444px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* View Bio Overlay */
.leadership-photo__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(26, 78, 162, 0.9);
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.leadership-photo:hover .leadership-photo__overlay {
	opacity: 1;
	pointer-events: auto;
}

.leadership-photo__view-bio {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--custom--fontSize--3xl);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

/**
 * 5.4 Leadership Modal
 * Modal popup for team member bios
 *
 * REQUIRED: !important declarations in modal sections override page layout
 * when modal is open, ensuring proper z-index stacking and body scroll lock.
 */
.leadership-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.leadership-modal[aria-hidden="false"] {
	display: block;
}

.leadership-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
}

.leadership-modal__container {
	position: relative;
	max-width: 1468px;
	margin: 72px auto;
	background: white;
	z-index: 10000;
}

.leadership-modal__content {
	display: flex;
	gap: 84px;
	padding: 72px 56px;
	position: relative;
}

.leadership-modal__content::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2025/12/texture-bg.png');
	background-size: cover;
	opacity: 0.1;
	pointer-events: none;
}

.leadership-modal__photo-wrapper {
	position: relative;
	flex-shrink: 0;
	z-index: 1;
}

.leadership-modal__photo {
	width: 506px;
	height: 622px;
	object-fit: cover;
	background: #b2b2b2;
	display: block;
}

.leadership-modal__badge {
	position: absolute;
	bottom: -60px;
	left: 181px;
	background: var(--wp--preset--color--theme-02);
	padding: 26px 35px;
}

.leadership-modal__badge-inner {
	border: 2px solid white;
	padding: 6px 12px;
	text-align: center;
}

.leadership-modal__badge-number {
	display: block;
	font-family: 'Sansation', sans-serif;
	font-size: var(--wp--custom--fontSize--5xl);
	font-weight: 700;
	line-height: 53px;
	color: white;
	text-transform: uppercase;
}

.leadership-modal__badge-text {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 22px;
	color: white;
	text-transform: uppercase;
}

.leadership-modal__info {
	flex: 1;
	z-index: 1;
}

.leadership-modal__name {
	font-family: 'Sansation', sans-serif;
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 700;
	line-height: 60px;
	letter-spacing: 1.2px;
	color: var(--wp--preset--color--theme-02);
	text-transform: uppercase;
	margin: 0 0 9px;
}

.leadership-modal__title {
	font-family: 'Inter', sans-serif;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 30px;
	color: var(--wp--preset--color--theme-02);
	margin: 0 0 21px;
}

.leadership-modal__bio {
	font-family: 'Inter', sans-serif;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 30px;
	color: var(--wp--preset--color--theme-06);
	max-width: 763px;
}

.leadership-modal__bio p {
	margin: 0;
}

.leadership-modal__close {
	position: absolute;
	top: 80px;
	right: 32px;
	width: 34px;
	height: 34px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 10001;
}

.leadership-modal__close:hover svg line {
	stroke: var(--wp--preset--color--theme-03);
}

/**
 * 5.5 Lifeguard Love Section - Summer Pattern Background
 */

/* Summer pattern background for Why You'll Love Lifeguarding section */
.has-summer-pattern-bg {
	position: relative;
	background-color: var(--wp--preset--color--theme-04);
}

.has-summer-pattern-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2025/12/lifeguard-summer-pattern-bg.jpg') center/cover no-repeat;
	opacity: 0.81;
	pointer-events: none;
	z-index: 0;
}

.has-summer-pattern-bg>* {
	position: relative;
	z-index: 1;
}

/* Gap between benefit cards in Why You'll Love Lifeguarding section */
.has-summer-pattern-bg .wp-block-group+.wp-block-group {
	margin-top: 30px;
}

/**
 * 5.6 Lifeguard Gallery Section - Red Pattern Background
 */

/* Red pattern background for gallery section */
.has-red-pattern-bg {
	position: relative;
}

.has-red-pattern-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--theme-05) url('/wp-content/uploads/2025/12/section-gallery__background-scaled.png') center/cover no-repeat;
	pointer-events: none;
	z-index: 0;
}

.has-red-pattern-bg>* {
	position: relative;
	z-index: 1;
}

/* Lifeguard Gallery Strip - 3 images side by side */
.lifeguard-gallery-strip {
	width: 100%;
	overflow: hidden;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

.lifeguard-gallery-strip .gallery-images {
	display: flex;
	gap: 25px;
	justify-content: flex-start;
	padding: 0;
	max-width: 100vw;
	margin: 0;
}

.lifeguard-gallery-strip .gallery-image {
	flex: 1 1 0;
	aspect-ratio: 627 / 491;
	overflow: hidden;
	background-color: #e7e7e7;
}

.lifeguard-gallery-strip .gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.lifeguard-gallery-strip .gallery-image img:hover {
	opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.lifeguard-gallery-strip .gallery-images {
		gap: 15px;
		padding: 0;
	}
}

@media (max-width: 768px) {
	.lifeguard-gallery-strip .gallery-images {
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0;
	}

	.lifeguard-gallery-strip .gallery-image {
		flex: 0 0 calc(50% - 12.5px);
	}

}

/**
 * 5.8 Gallery Lightbox
 */
.gallery-lightbox {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.95);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.gallery-lightbox .lightbox-content {
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-lightbox .lightbox-image {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
}

.gallery-lightbox .lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xxx-large);
	cursor: pointer;
	padding: 10px;
	line-height: 1;
	transition: opacity 0.2s ease;
}

.gallery-lightbox .lightbox-close:hover {
	opacity: 0.7;
}

.gallery-lightbox .lightbox-prev,
.gallery-lightbox .lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--custom--fontSize--6xl);
	cursor: pointer;
	padding: 20px;
	line-height: 1;
	transition: opacity 0.2s ease;
}

.gallery-lightbox .lightbox-prev {
	left: 20px;
}

.gallery-lightbox .lightbox-next {
	right: 20px;
}

.gallery-lightbox .lightbox-prev:hover,
.gallery-lightbox .lightbox-next:hover {
	opacity: 0.7;
}

/**
 * 5.9 Lifeguard Love Grid - Centered columns
 */
.lifeguard-love-grid {
	justify-content: center;
}

/**
 * 5.7 Job Fit Section
 */
.job-fit-section {
	background-image: url('/wp-content/uploads/2025/12/water-ripple-bg.jpg');
	background-size: cover;
	background-position: center;
	padding: 100px 0;
	overflow: hidden;
}

.job-fit-container {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

.job-fit-carousel {
	flex: 0 0 auto;
	width: 859px;
	max-width: 859px;
	/* margin-left handled by rule at line ~8453 for responsive flush-left positioning */
}

/* Job Fit Carousel - match HTML class names (.carousel-slides, .carousel-slide) */
.job-fit-carousel .carousel-slides {
	position: relative;
	width: 100%;
	height: 644px;
}

.job-fit-carousel .carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}

.job-fit-carousel .carousel-slide.is-active {
	opacity: 1;
}

.job-fit-carousel .carousel-slide img {
	width: 100%;
	height: 644px;
	object-fit: cover;
	display: block;
}

.job-fit-slides {
	position: relative;
	width: 100%;
	height: 644px;
}

.job-fit-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}

.job-fit-slide.is-active {
	opacity: 1;
}

.job-fit-slide img {
	width: 100%;
	height: 644px;
	object-fit: cover;
	display: block;
}

.job-fit-dots,
.job-fit-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}

/* Match project-zero-carousel-dots pattern: touch target with ::after visual dot */
.job-fit-dot,
.job-fit-carousel-dots .carousel-dot {
	min-width: 17px;
	min-height: 18px;
	width: 17px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
	cursor: pointer;
	position: relative;
}

/* Visual dot using ::after pseudo-element - matches project-zero carousel */
.job-fit-dot::after,
.job-fit-carousel-dots .carousel-dot::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02);
	transition: background-color 0.3s ease;
	pointer-events: none;
}

.job-fit-dot:hover::after,
.job-fit-dot.is-active::after,
.job-fit-carousel-dots .carousel-dot:hover::after,
.job-fit-carousel-dots .carousel-dot.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

.job-fit-content {
	flex: 0 0 50%;
	margin-left: 156px;
	min-width: 0;
	overflow: hidden;
}

.job-fit-content h2 {
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--custom--fontSize--3xl-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 60px;
	color: var(--wp--preset--color--theme-02);
	margin: 0 0 20px 0;
}

.job-fit-content hr {
	width: 224px;
	height: 4px;
	background-color: var(--wp--preset--color--theme-02);
	border: none;
	margin: 0 0 30px 0;
}

.job-fit-content p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--black);
	line-height: 1.6;
	margin: 0 0 20px 0;
}

.job-fit-content ul {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--black);
	line-height: 1.6;
	margin: var(--wp--preset--spacing--40) 0 0 0;
	padding-left: 0;
	list-style: none;
}

.job-fit-content ul li {
	margin-bottom: 55px;
	padding-left: 55px;
	position: relative;
}

.job-fit-content ul li:last-child {
	margin-bottom: 0;
}

.job-fit-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 42px;
	height: 35px;
	background-image: url('/wp-content/uploads/2025/12/red-flag.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.job-fit-button,
.lifeguard-intro-section .wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 228px;
	height: 50px;
	min-width: 228px;
	min-height: 50px;
	padding: 0;
	/* REQUIRED: !important to override WordPress database inline padding */
	background-color: var(--wp--preset--color--theme-02);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--custom--fontSize--lg);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.44px;
	text-decoration: none;
	border-radius: var(--wp--custom--border--rounded-2xl);
	transition: background-color 0.3s ease;
}

.job-fit-button {
	margin-top: var(--wp--preset--spacing--50);
}

.job-fit-button:hover,
.lifeguard-intro-section .wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button:hover {
	background-color: var(--wp--preset--color--theme-04);
	color: var(--wp--preset--color--theme-02);
}

/**
 * 5.8 Red Arrow Markers List (Block-based version)
 * Used for "Is This Job Right For You?" section on Become a Lifeguard page
 */
.has-red-arrow-markers {
	list-style: none;
	padding-left: 0;
	margin: 24px 0 0 0;
}

.has-red-arrow-markers li {
	margin-bottom: 20px;
	padding-left: 55px;
	position: relative;
}

.has-red-arrow-markers li:last-child {
	margin-bottom: 0;
}

.has-red-arrow-markers li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 42px;
	height: 35px;
	background-image: url('/wp-content/uploads/2025/12/red-flag.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

/* Is This Job Right Section - layout fix to prevent carousel overlap */
.is-job-right-section .wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
}

.is-job-right-section .wp-block-columns>.wp-block-column:first-child {
	position: relative;
	overflow: hidden;
}

/* Parent column - allow overflow for dots */
.is-job-right-section .wp-block-columns>.wp-block-column:first-child:has(.is-job-right-carousel) {
	overflow: visible !important;
}

.is-job-right-section .wp-block-kindling-carousel.is-job-right-carousel {
	position: relative;
	overflow: hidden;
}

.is-job-right-section .is-job-right-carousel .splide__track {
	overflow: hidden;
}

.is-job-right-section .carousel-slide .wp-block-image img {
	width: 100%;
	height: 500px;
	object-fit: cover;
}

/* Override carousel-text-section overflow: visible for is-job-right-section */
.is-job-right-section.carousel-text-section .wp-block-columns {
	overflow: hidden;
}

.is-job-right-section .wp-block-columns>.wp-block-column:first-child {
	max-width: 50%;
	overflow: hidden;
}

.is-job-right-section .wp-block-kindling-carousel {
	max-width: 100%;
	overflow: hidden;
}

.is-job-right-section .splide__track {
	overflow: hidden;
}

/* Is Job Right Carousel - pagination dots below carousel
   REQUIRED: !important to override Splide library default positioning (bottom: 12px) */
/* Parent column - allow overflow for dots */
.is-job-right-section .wp-block-columns>.wp-block-column:first-child:has(.is-job-right-carousel) {
	overflow: visible !important;
}

.is-job-right-section .wp-block-kindling-carousel.is-job-right-carousel {
	overflow: visible !important;
	padding-bottom: 60px;
}

/* REQUIRED: !important to override kindling-blocks inline CSS overflow:hidden */
.is-job-right-section .is-job-right-carousel .kindling-carousel-container {
	overflow: visible !important;
}

.is-job-right-section .is-job-right-carousel .splide__pagination {
	position: absolute !important;
	top: 100% !important;
	bottom: auto !important;
	left: 0 !important;
	right: 0 !important;
	margin-top: 20px !important;
	padding: 0 !important;
	gap: 12px !important;
}

/* Touch target - 17x18px matching other carousels */
.is-job-right-section .is-job-right-carousel .splide__pagination__page {
	min-width: 17px;
	min-height: 18px;
	width: 17px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	opacity: 1;
}

/* Remove scale transform on active state */
.is-job-right-section .is-job-right-carousel .splide__pagination__page.is-active {
	transform: scale(1);
}

/* Visual dot via ::after - 18x18px with blue border */
.is-job-right-section .is-job-right-carousel .splide__pagination__page::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02);
}

/* Active/hover state - filled blue */
.is-job-right-section .is-job-right-carousel .splide__pagination__page:hover::after,
.is-job-right-section .is-job-right-carousel .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Removed overflow:hidden - breaks Splide carousel (see note at line 13794) */

/* Dark blue button hover - yellow background with dark blue text */
/* REQUIRED: !important to override WP Button block inline background-color and color styles */
.wp-block-button__link.has-theme-02-background-color:hover,
.wp-block-button__link.has-theme-02-background-color.wp-element-button:hover {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
}

/* Become a Lifeguard page - Apply Now buttons base styles */
/* Match home intro READ MORE button: 24px, 800 weight, 1.44px letter-spacing */
/* REQUIRED: !important to override WP Button block inline font-size/weight styles */
.page-id-23 .page-intro-section .wp-block-button__link,
.page-id-23 .page-intro-section .wp-block-button__link.wp-element-button,
.page-id-23 .is-job-right-section .wp-block-button__link,
.page-id-23 .is-job-right-section .wp-block-button__link.wp-element-button,
.page-id-23 .large-bg-overlay-section .wp-block-button__link {
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: 1.44px !important;
	text-transform: uppercase;
}

/* Become a Lifeguard page - Apply Now buttons hover */
/* Yellow background (#fbd872) with dark blue text (#1a4ea2) */
/* REQUIRED: !important to override WP Button block inline styles for page-specific hover state */
.page-id-23 .page-intro-section .wp-block-button__link:hover,
.page-id-23 .page-intro-section .wp-block-button__link.wp-element-button:hover,
.page-id-23 .is-job-right-section .wp-block-button__link:hover,
.page-id-23 .is-job-right-section .wp-block-button__link.wp-element-button:hover,
.page-id-23 .large-bg-overlay-section .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
}

/* White background button hover - yellow background with dark blue text */
.wp-block-button__link.has-white-color.has-background:hover,
.wp-block-button__link.has-white-color.has-background.wp-element-button:hover {
	background-color: var(--wp--preset--color--theme-04);
	color: var(--wp--preset--color--theme-02);
}

/* Dark blue text on white background button hover - dark blue background with white text */
.wp-block-button__link.has-theme-02-color.has-white-background-color:hover,
.wp-block-button__link.has-theme-02-color.has-white-background-color.wp-element-button:hover {
	background-color: var(--wp--preset--color--theme-02);
	color: white;
}

.lifeguard-intro-section .wp-block-column .wp-block-heading {
	line-height: 60px;
}

/* ==========================================================================
   Text Content Sections - Uniform Spacing with margin-bottom
   Default spacing for patterns with heading + separator + text + button
   ========================================================================== */

/* Remove flex gap - use margin-bottom for precise control */
/* REQUIRED: !important to override WP inline gap styles */
.page-intro-section .wp-block-group.is-layout-flex.is-vertical,
.lifeguard-intro-section .wp-block-group.is-layout-flex.is-vertical {
	gap: 0 !important;
}

/* Eyebrow text - gap to heading (TESTING: 30px) */
.page-intro-section .wp-block-group.is-vertical>p:first-child {
	margin-bottom: 30px !important;
}

/* Heading - gap to separator (TESTING: 30px) */
.page-intro-section .wp-block-group.is-vertical>h2.wp-block-heading {
	margin-bottom: 30px !important;
}

@media screen and (max-width: 430px) {
	.page-intro-section .wp-block-group.is-vertical>h2.wp-block-heading {
		margin-bottom: 15px !important;
	}

	.page-id-21 .form-content-column {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* Separator - no top margin, gap to paragraph below (TESTING: 30px) */
.page-intro-section .wp-block-group.is-vertical>hr.wp-block-separator {
	margin-top: 0 !important;
	margin-bottom: 30px !important;
	margin-right: auto !important;
	margin-left: unset !important;
}

/* Body paragraph - larger gap to button */
.page-intro-section .wp-block-group.is-vertical>hr.wp-block-separator+p {
	margin-bottom: 30px !important;
}

/* Button container - no additional margin needed */
/* REQUIRED: !important to override WP inline margin-top */
.page-intro-section .wp-block-group.is-vertical>.wp-block-buttons {
	margin-top: 0 !important;
}

/* ==========================================================================
   Is This Job Right Section - Compact spacing to match reference design
   ========================================================================== */
@media (max-width: 430px) {
	.is-job-right-section .wp-block-group hr.wp-block-separator+p {
		padding-right: 0 !important;
	}
}

@media (max-width: 1600px) {
	.wp-container-core-group-is-layout-3379e089 h2 {
		font-size: 45px !important;
	}
}

/* End of @media (max-width: 1600px) */


/* Intro paragraph - tight gap to list */
.is-job-right-section .wp-block-group hr.wp-block-separator+p {
	margin-top: 0 !important;
	margin-bottom: 8px !important;
	padding-right: 0 !important;
}

/* List items - spacing between items to match reference design */
.is-job-right-section .has-red-arrow-markers li {
	margin-bottom: 20px !important;
}

/* Button container - no top margin */
.is-job-right-section .wp-block-group .wp-block-buttons {
	margin-top: 0 !important;
}

/* Content column - add padding below button */
.is-job-right-section .wp-block-columns>.wp-block-column:last-child {
	padding-bottom: 40px !important;
}

/* Responsive */
/* 1600px breakpoint - reduce carousel size for medium-large screens */
@media (max-width: 1600px) {
	.job-fit-carousel {
		width: 720px;
		max-width: 720px;
	}
}

/* 1440px breakpoint - further reduce for standard laptop screens */
@media (max-width: 1440px) {
	.job-fit-carousel {
		width: 580px;
		max-width: 580px;
		/* margin-left handled by consolidated rule at line ~8463 */
	}
}

@media (max-width: 1300px) {
	.job-fit-container {
		padding: 0 40px;
	}

	.job-fit-carousel {
		flex: 0 0 50%;
		width: 50%;
		max-width: none;
	}

	.job-fit-content {
		margin-left: 80px;
	}

	.job-fit-slides {
		height: auto;
		aspect-ratio: 859 / 644;
	}

	.job-fit-slide img {
		height: auto;
		aspect-ratio: 859 / 644;
	}

	.job-fit-content h2 {
		font-size: var(--wp--preset--font-size--xxx-large);
		white-space: normal;
	}
}

@media (max-width: 1024px) {
	.job-fit-container {
		flex-direction: column;
		gap: 40px;
		padding: 0 40px;
	}

	.job-fit-carousel {
		flex: 0 0 100%;
		width: 100%;
		max-width: 600px;
	}

	.job-fit-content {
		flex: 0 0 100%;
		margin-left: 0;
		padding-right: 0;
	}

	.job-fit-content h2 {
		font-size: var(--wp--custom--fontSize--4xl);
	}

	.job-fit-content p,
	.job-fit-content ul {
		font-size: var(--wp--custom--fontSize--lg);
	}

	.job-fit-content ul li {
		padding-left: 45px;
	}

	.job-fit-content ul li::before {
		width: 32px;
		height: 27px;
	}

	.job-fit-button {
		width: 228px;
		height: 50px;
		font-size: var(--wp--custom--fontSize--lg);
	}
}

/**
 * 5.10 Lifeguard Intro Image
 */
.lifeguard-intro-image {
	margin: 0;
}

.lifeguard-intro-image img {
	width: 100%;
	height: auto;
	display: block;
}

/**
 * 5.11 Responsive Typography - Mobile Text Overflow Fix
 * CRITICAL: Fluid typography to prevent text truncation on small mobile screens (320px-480px)
 * Issue: Fixed 50px headings cause "THE TRUSTE..." truncation on narrow viewports
 * REQUIRED: !important to override WordPress database inline font-size styles for mobile responsiveness
 */

/* Hero cover headings - fluid scaling from 28px (320px) to 50px (1024px+) */
body .wp-block-cover h1[style*="font-size: var(--wp--custom--fontSize--5xl)"],
body .wp-block-cover h2[style*="font-size: var(--wp--custom--fontSize--5xl)"],
body .wp-block-cover h1.wp-block-heading,
body .wp-block-cover h2.wp-block-heading {
	font-size: clamp(28px, 5vw, 50px);
}

/* All 50px headings throughout site - responsive scaling */
body h1[style*="font-size: var(--wp--custom--fontSize--5xl)"],
body h2[style*="font-size: var(--wp--custom--fontSize--5xl)"],
body .has-texture-bg h1.wp-block-heading,
body .has-texture-bg h2.wp-block-heading,
body .has-water-ripple-bg h1.wp-block-heading,
body .has-red-pattern-bg h2.wp-block-heading,
body .has-theme-02-background-color h2.wp-block-heading,
body .home-mission-section h2.wp-block-heading {
	font-size: clamp(28px, 4.5vw, 50px);
}

/* Home hero carousel heading - larger base, maintains impact */
body .hero-bottom-content h1,
body .home-hero-carousel-content h1 {
	font-size: clamp(36px, 6vw, 77px);
}

/* Fine-tune for very small screens (320px) */
@media (max-width: 375px) {

	body .wp-block-cover h1[style*="font-size: var(--wp--custom--fontSize--5xl)"],
	body .wp-block-cover h2[style*="font-size: var(--wp--custom--fontSize--5xl)"],
	body h1[style*="font-size: var(--wp--custom--fontSize--5xl)"],
	body h2[style*="font-size: var(--wp--custom--fontSize--5xl)"] {
		font-size: clamp(24px, 7vw, 50px);
		line-height: 1.2;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}

/* Tablet adjustments (481px-768px) */
@media (min-width: 481px) and (max-width: 768px) {

	body .wp-block-cover h1[style*="font-size: var(--wp--custom--fontSize--5xl)"],
	body .wp-block-cover h2[style*="font-size: var(--wp--custom--fontSize--5xl)"],
	body h1[style*="font-size: var(--wp--custom--fontSize--5xl)"],
	body h2[style*="font-size: var(--wp--custom--fontSize--5xl)"] {
		font-size: clamp(32px, 5vw, 50px);
	}

	/* Home hero headline - larger at 768px for better readability */
	body .hero-bottom-content h1,
	body .home-hero-carousel-content h1 {
		font-size: clamp(40px, 6vw, 77px);
	}
}

/**
 * 6.0 Careers Page Styles
 */

/* Careers hero - 569px height on desktop */
@media (min-width: 1200px) {
	.careers-hero-section {
		min-height: 569px;
		display: flex;
		align-items: center;
	}
}

/* Careers hero - Figma exact column widths (690px / 656px) */
/* Increased specificity to override existing .has-texture-bg rule at line 719-724 which uses !important */
@media (min-width: 1200px) {
	body .careers-hero-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: 690px;
		min-width: 500px;
		flex-grow: 0;
	}

	body .careers-hero-section .wp-block-columns>.wp-block-column:last-child {
		flex-basis: 656px;
		flex-grow: 0;
	}

	.careers-hero-section .wp-block-columns {
		gap: 67px;
		justify-content: flex-start;
	}
}

/* Careers hero separator - fixed 224px width */
.careers-hero-section .wp-block-separator.is-style-wide {
	width: 224px;
	margin-left: 0;
	margin-right: auto;
}

/* Careers hero heading - force 2 lines: BECOME AN / AQUATICS SPECIALIST */
@media (min-width: 1200px) {
	.careers-hero-section .careers-hero-heading {
		min-width: 690px;
		width: 690px;
		white-space: pre-line;
	}
}

/* Careers CTA button - exact 225px x 46px sizing - increased specificity to override WordPress database inline styles from pattern */
body .careers-lifeguard-cta-section .wp-block-buttons .wp-block-button.careers-cta-button .wp-block-button__link.wp-element-button {

	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
}

/* REQUIRED: !important to override WP Button inline styles from database for consistent hover state */
body .careers-lifeguard-cta-section .wp-block-buttons .wp-block-button.careers-cta-button .wp-block-button__link.wp-element-button:hover {
	background-color: var(--wp--preset--color--theme-02) !important;
	color: var(--wp--preset--color--white) !important;
}

@media (max-width: 600px) {
	body .careers-lifeguard-cta-section .wp-block-buttons .wp-block-button.careers-cta-button .wp-block-button__link.wp-element-button {
		width: auto;
		height: auto;
		min-height: auto;
		padding: 12px 24px;
	}
}

/* Careers Benefits Section - optimized for 1920px viewport */
body .careers-benefits-section {
	overflow: visible;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: stretch;
}

/* Benefits table styling - match Figma design */
.benefits-table-wrapper {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
}

.benefits-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.benefits-table thead th {
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--custom--fontSize--3xl);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--theme-02);
	border: none;
	padding: 0 40px 24px 40px;
	text-align: center;
	vertical-align: middle;
}

.benefits-table tbody td {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--theme-06);
	border: none;
	padding: 0 40px;
	text-align: center;
	vertical-align: top;
}

/* Center the columns container and ensure proper width at 1920px */
@media (min-width: 1920px) {
	.careers-benefits-section .wp-block-columns.alignwide {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Ensure columns have equal width and proper spacing */
	.careers-benefits-section .wp-block-column {
		flex-basis: calc(33.333% - 40px);
	}

	/* Optimize table layout for 1920px viewport */
	.benefits-table-wrapper {
		max-width: 1440px;
	}

	.benefits-table thead th {
		padding: 0 60px 24px 60px;
	}

	.benefits-table tbody td {
		padding: 0 60px;
	}
}

/* Offset pool background for intro section images */
.has-offset-pool-bg {
	position: relative;
	margin-right: 30px !important;
	margin-bottom: 40px !important;
}



.has-offset-pool-bg::before {
	content: '';
	position: absolute;
	right: -30px;
	bottom: -40px;
	width: 100%;
	height: 100%;
	background: url('/wp-content/uploads/2025/12/pool-bg.png') center/cover no-repeat;
	z-index: 0;
}



.has-offset-pool-bg>* {
	position: relative;
	z-index: 1;
}

/* Careers intro section - percentage-based padding for responsiveness
   At 1512px, ~7.4vw = 112px (matches original spacing--80)
   Clamp ensures min 40px, max 120px for extreme viewports */
.page-id-27 .page-intro-section {
	padding-top: clamp(40px, 7.4vw, 120px) !important;
	padding-bottom: clamp(40px, 7.4vw, 120px) !important;
}

/* Careers grid - heading on one line */
.page-id-27 .has-water-ripple-bg h1.wp-block-heading {
	white-space: nowrap;
}

/* Careers grid - equal height cards */
.has-water-ripple-bg .wp-block-columns:has(.has-theme-07-background-color) {
	align-items: stretch;
}

.has-water-ripple-bg .wp-block-columns:has(.has-theme-07-background-color)>.wp-block-column {
	display: flex;
}

.has-water-ripple-bg .has-theme-07-background-color {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.has-water-ripple-bg .has-theme-07-background-color>.wp-block-group:last-child {
	flex: 1;
}

/* Careers Beyond Pool Deck cards - body copy should be dark gray (theme-06) not blue (theme-02) to match site aesthetic */
/* REQUIRED: !important to override WP database inline has-theme-02-color class */
.page-id-27 .service-areas-facility-grid p.has-theme-02-color {
	color: var(--wp--preset--color--theme-06) !important;
}

/* Careers grid - full width images with consistent aspect ratio */
.has-water-ripple-bg .has-theme-07-background-color .wp-block-image {
	width: 100%;
	margin: 0;
}

.has-water-ripple-bg .has-theme-07-background-color .wp-block-image img {
	width: 100%;
	aspect-ratio: 584 / 329;
	object-fit: cover;
	display: block;
}

/* Careers leadership - flush left image with section edge */
/* REQUIRED: !important to override inline padding from pattern */
.has-water-ripple-bg:has(.has-offset-pool-bg) {
	padding-left: 0 !important;
	padding-right: var(--wp--preset--spacing--50) !important;
}

.has-water-ripple-bg>.wp-block-columns.alignwide {
	max-width: 100%;
	overflow: hidden;
}

.has-water-ripple-bg .has-offset-pool-bg {
	margin-left: 0;
	padding-left: 0;
	margin-right: 29px;
	margin-bottom: 29px;
}

/* Text column needs padding since section padding-left is 0 */
.has-water-ripple-bg:has(.has-offset-pool-bg)>.wp-block-columns>.wp-block-column:last-child {
	padding-right: var(--wp--preset--spacing--50);
}

.has-water-ripple-bg .has-offset-pool-bg .wp-block-image {
	margin: 0;
}

.has-water-ripple-bg .has-offset-pool-bg .wp-block-image img {
	width: 100%;
	max-width: 100%;
	display: block;
}

/* Intro Sections - Full-width breakout layout */
/* At 1920px: image 859x644px flush left, text on right */
body .about-intro-section,
body .solutions-intro-section,
body .partner-intro-section,
body .operations-intro-section,
body .lifeguard-intro-section,
body .service-areas-expertise-section,
body .page-intro-section {
	padding-left: 0;
	padding-right: 0;
	overflow: visible;
	position: relative;
	z-index: 1;
	isolation: isolate;
}

/* Intro section h2 and hr spacing - match Figma design specs */
/* REQUIRED: !important to override WP Heading block default margins for heading-to-separator gap */
/* Figma node 144-518: 20px gap between heading and separator */
.about-intro-section h2,
.solutions-intro-section h2,
.partner-intro-section h2,
.operations-intro-section h2,
.lifeguard-intro-section h2,
.service-areas-section h2,
.page-intro-section h2 {
	margin-bottom: 20px !important;
}

/* REQUIRED: !important to override WP Separator block default margins */
/* Figma node 144-518: 0 top margin on separator, 20px bottom margin (gap to body text) */
.about-intro-section hr,
.about-intro-section .wp-block-separator,
.solutions-intro-section hr,
.solutions-intro-section .wp-block-separator,
.partner-intro-section hr,
.partner-intro-section .wp-block-separator,
.operations-intro-section hr,
.operations-intro-section .wp-block-separator,
.lifeguard-intro-section hr,
.lifeguard-intro-section .wp-block-separator,
.service-areas-section hr,
.service-areas-section .wp-block-separator,
.page-intro-section hr,
.page-intro-section .wp-block-separator {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}

/* Override WordPress is-layout-constrained centering */
.about-intro-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.solutions-intro-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.partner-intro-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.operations-intro-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .lifeguard-intro-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .service-areas-expertise-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .page-intro-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Remove all container constraints */
.about-intro-section .wp-block-group.alignwide,
.solutions-intro-section .wp-block-group.alignwide,
.partner-intro-section .wp-block-group.alignwide,
.operations-intro-section .wp-block-group.alignwide,
body .lifeguard-intro-section .wp-block-group.alignwide,
body .service-areas-expertise-section .wp-block-group.alignwide,
body .page-intro-section .wp-block-group.alignwide {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Override constrained layout within the section */
.about-intro-section .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.solutions-intro-section .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.partner-intro-section .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.operations-intro-section .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .lifeguard-intro-section .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .service-areas-expertise-section .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .page-intro-section .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Columns container - full viewport width */
.about-intro-section .wp-block-columns.alignwide,
.about-intro-section .wp-block-columns.alignfull,
.solutions-intro-section .wp-block-columns.alignwide,
.solutions-intro-section .wp-block-columns.alignfull,
.partner-intro-section .wp-block-columns.alignwide,
.partner-intro-section .wp-block-columns.alignfull,
.operations-intro-section .wp-block-columns.alignwide,
.operations-intro-section .wp-block-columns.alignfull,
.lifeguard-intro-section .wp-block-columns.alignwide,
.lifeguard-intro-section .wp-block-columns.alignfull,
body .service-areas-expertise-section .wp-block-columns.alignwide,
body .service-areas-expertise-section .wp-block-columns.alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	gap: 0;
}

/* Image column - fixed 859px + 29px offset at 1920px */
@media (min-width: 1920px) {

	.about-intro-section .wp-block-columns>.wp-block-column:first-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: calc(859px + 29px);
		flex-grow: 0;
		flex-shrink: 0;
		max-width: calc(859px + 29px);
		padding-left: 0;
		margin-left: 0;
	}

	.about-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img {
		width: 859px;
		height: 644px;
		object-fit: cover;
		display: block;
	}

	/* Text column - with gap from image (high specificity to override .has-water-ripple-bg:has(.has-offset-pool-bg)) */
	/* REQUIRED: !important to override WP Column block default max-width constraints for full-width intro layouts */
	.about-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.operations-intro-section.has-water-ripple-bg .wp-block-group.alignwide>.wp-block-columns.alignwide {
		max-width: none !important;
	}

	.operations-intro-section.has-texture-bg .wp-block-group.alignwide>.wp-block-columns.alignwide {
		max-width: none !important;
	}

	.about-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.operations-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.operations-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.lifeguard-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.service-areas-expertise-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child {
		flex-basis: 730px;
		flex-grow: 0;
		flex-shrink: 0;

	}

	/* Single Operations CPT - text column margin */
	/* REQUIRED: !important to override WP Column block default margin for operations-specific spacing */
	.single-operations .operations-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child {
		margin-left: 25px !important;
	}

	/* Operations intro section - 50/50 column width override */
	/* REQUIRED: !important to override WP Column block inline flex-basis/max-width for 50/50 split */
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: 50% !important;
		max-width: 50% !important;
	}

	/* REQUIRED: !important to override WP Image block inline dimensions for responsive aspect ratio */
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 881 / 660;
	}

	/* REQUIRED: !important to override WP column inline flex-basis, margin, padding styles for offset text layout */
	@media (min-width: 1200px) {

		.operations-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
		.operations-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child {
			flex-basis: calc(50% - 188px) !important;
			margin-left: 188px !important;
			padding-right: 8% !important;
		}
	}

	/* Single Operations CPT - OPERATIONS label styling */
	/* REQUIRED: !important to override inline styles from WordPress database content */
	.single-operations .operations-intro-section p.has-theme-06-color {
		color: var(--wp--preset--color--theme-06) !important;
		font-family: Inter, sans-serif;
		font-size: var(--wp--preset--font-size--xx-large) !important;
		font-style: normal;
		font-weight: 700;
		line-height: 115px !important;
		letter-spacing: 1.92px;
		text-transform: uppercase;
	}

	/* Single Operations CPT - location name title styling */
	/* REQUIRED: !important to override inline styles from WordPress database content */
	.single-operations .operations-intro-section h2.has-theme-03-color {
		color: #e0f !important;
		font-family: Sansation, sans-serif;
		font-size: var(--wp--custom--fontSize--5xl) !important;
		font-style: normal !important;
		font-weight: 700;
		line-height: 60px !important;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

}

/* Text column - desktop breakpoints (override inline styles) */
@media (min-width: 1024px) {

	.about-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.operations-intro-section.has-water-ripple-bg .wp-block-group.alignwide>.wp-block-columns.alignwide {
		max-width: none !important;
	}

	.operations-intro-section.has-texture-bg .wp-block-group.alignwide>.wp-block-columns.alignwide {
		max-width: none !important;
	}

	.about-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.operations-intro-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child,
	.operations-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.lifeguard-intro-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child,
	.service-areas-expertise-section.has-texture-bg .wp-block-columns>.wp-block-column:last-child {
		flex-basis: 50%;
		flex-grow: 0;
		flex-shrink: 0;

	}
}

.single-operations .operations-map-section>.wp-block-columns {
	position: static;
}

/* NOTE: .operations-map-content position/z-index/padding-top merged to line ~12163 */

/* Make the map column position absolutely to overlay */
.single-operations .operations-map-section .wp-block-columns>.wp-block-column:last-child {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 100%;
	z-index: 1;
}

/* Image block reset */
.about-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
.solutions-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
.partner-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
.operations-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
.service-areas-expertise-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
.page-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image {
	margin: 0;
}

.about-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image.has-offset-pool-bg,
.solutions-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image.has-offset-pool-bg,
.partner-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image.has-offset-pool-bg,
.operations-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image.has-offset-pool-bg,
.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image.has-offset-pool-bg,
.service-areas-expertise-section .wp-block-columns>.wp-block-column:first-child .wp-block-image.has-offset-pool-bg,
.page-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image.has-offset-pool-bg {
	margin-right: 0;
	margin-bottom: 29px;
}

/* Responsive - proportional scaling below 1920px */
@media (max-width: 1919px) {

	.about-intro-section .wp-block-columns>.wp-block-column:first-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:first-child,
	.page-intro-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: 46%;
		max-width: 46%;
		padding-left: 0;
		margin-left: 0;
	}

	.about-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.page-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 881 / 660;
	}

	.about-intro-section .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:last-child,
	.operations-intro-section .wp-block-columns>.wp-block-column:last-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:last-child,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:last-child,
	.page-intro-section .wp-block-columns>.wp-block-column:last-child {
		flex-basis: auto;
		flex-grow: 1;
		margin-left: clamp(30px, 5vw, 80px);
		padding-right: clamp(20px, 4vw, 60px);
	}

	/* Operations intro section - 50/50 column width override for smaller screens */
	/* REQUIRED: !important to override WP Column block inline flex-basis/max-width for 50/50 layout */
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: 50% !important;
		max-width: 50% !important;
	}

	/* REQUIRED: !important to override WP Column block inline flex/margin/padding for text column positioning */
	.operations-intro-section .wp-block-columns>.wp-block-column:last-child {
		flex-basis: 50% !important;
		flex-grow: 0 !important;
		margin-left: 188px !important;
		padding-right: 15% !important;
	}
}

/* Responsive - optimized layout for 1400-1600px viewports (prevents cramped feeling) */
@media (min-width: 1400px) and (max-width: 1600px) {

	.about-intro-section .wp-block-columns>.wp-block-column:first-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: 42%;
		max-width: 42%;
	}

	.about-intro-section .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:last-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:last-child,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:last-child {
		margin-left: clamp(60px, 6vw, 100px);
		padding-right: clamp(40px, 5vw, 80px);
	}

	/* Solutions intro - constrain columns to match About intro alignment at 1512px */
	/* About has nested alignwide group (1472px), Solutions columns go full viewport (1512px) */
	/* This neutralizes the -40px margin-right and matches About's column width */
	.solutions-intro-section>.wp-block-columns.alignwide {
		max-width: calc(100vw - 40px);
		margin-right: 0;
	}

	/* REQUIRED: Override inline style padding-left: 9% to match About's 10% */
	/* About text column has inline padding-left: 10%, Solutions has 9% (WP database content) */
	.solutions-intro-section .wp-block-columns>.wp-block-column:last-child[style*="padding-left"] {
		padding-left: 10% !important;
	}

	/* Responsive typography scaling for intro sections */
	/* REQUIRED: !important to override WP inline font-size styles from database for responsive clamp values */
	.about-intro-section .wp-block-heading,
	.solutions-intro-section .wp-block-heading,
	.partner-intro-section .wp-block-heading,
	.lifeguard-intro-section .wp-block-heading {
		font-size: clamp(40px, 3.5vw, 50px);
	}

	.about-intro-section p[style*="font-size: var(--wp--preset--font-size--xx-large)"],
	.solutions-intro-section p[style*="font-size: var(--wp--preset--font-size--xx-large)"],
	.partner-intro-section p[style*="font-size: var(--wp--preset--font-size--xx-large)"],
	.lifeguard-intro-section p[style*="font-size: var(--wp--preset--font-size--xx-large)"] {
		font-size: clamp(26px, 2.2vw, 32px) !important;
	}

	.about-intro-section p[style*="font-size: var(--wp--custom--fontSize--xl)"],
	.solutions-intro-section p[style*="font-size: var(--wp--custom--fontSize--xl)"],
	.partner-intro-section p[style*="font-size: var(--wp--custom--fontSize--xl)"],
	.lifeguard-intro-section p[style*="font-size: var(--wp--custom--fontSize--xl)"] {
		font-size: clamp(18px, 1.5vw, 22px) !important;
		line-height: 1.5;
	}
}

/* ==========================================================================
   Page Intro Section - Kindling Grid Layout
   Uses kindling grid instead of wp:columns for better responsive control
   ========================================================================== */

/* Grid container - full width handling */
.page-intro-section .is-style-kindling-grid-system {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	gap: 0;
	align-items: center;
}

/* Image grid item - reset margins */
.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image {
	margin: 0;
}

/* Image with pool offset background */
.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image.has-offset-pool-bg {
	margin-right: 0;
	margin-bottom: 29px;
}

/* Image sizing - Fixed dimensions per viewport for consistent offset background
   Aspect ratio: 859:644 = 1.334:1 (maintained across all sizes) */
.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
	object-fit: cover;
	display: block;
}

/* Desktop XL (1920px+) - 859x644 */
@media (min-width: 1920px) {
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
		display: flex;
		justify-content: flex-start;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 859px;
		height: 644px;
		max-width: 100%;
		aspect-ratio: 859/644;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		margin-left: 80px;
		padding-right: 30%;
	}


}

/* Desktop large (1512px to 1919px) - Proportionate between 859x644 and 747x563 */
@media (min-width: 1512px) and (max-width: 1919px) {
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 800px;
		height: 600px;
		max-width: 100%;
		aspect-ratio: 4/3;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		margin-left: 60px;
		padding-right: 80px;
	}
}

/* Desktop medium (1440px to 1511px) - 747x563 per Figma spec */
@media (min-width: 1440px) and (max-width: 1511px) {
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 747px;
		height: 563px;
		max-width: 100%;
		aspect-ratio: 747/563;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		margin-left: 50px;
		padding-right: 60px;
	}
}

/* Desktop small (1280px to 1439px) - Proportionate scale down */
@media (min-width: 1280px) and (max-width: 1439px) {
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 650px;
		height: 490px;
		max-width: 100%;
		aspect-ratio: 650/490;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		margin-left: 40px;
		padding-right: 40px;
	}
}

/* Desktop XS (1024px to 1279px) - Proportionate scale down */
@media (min-width: 1024px) and (max-width: 1279px) {
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 530px;
		height: 400px;
		max-width: 100%;
		aspect-ratio: 530/400;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		margin-left: 30px;
		padding-right: 30px;
	}
}

/* Tablet (768px to 1023px) - 600x450 stacked */
@media (min-width: 768px) and (max-width: 1023px) {
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item {
		grid-column: span 12;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 600px;
		height: 450px;
		max-width: 100%;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		padding-left: 5%;
		padding-right: 5%;
		margin-top: var(--wp--preset--spacing--50);
	}
}

/* Mobile (below 768px) - 350x263 stacked */
@media (max-width: 767px) {
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item {
		grid-column: span 6;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 350px;
		height: 263px;
		max-width: 100%;
	}

	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		padding-left: 0;
		padding-right: 0;
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   Operations Intro Section - Kindling Grid Layout
   Uses kindling grid instead of wp:columns for better responsive control
   ========================================================================== */

/* Grid container - full width handling */
.operations-intro-section .is-style-kindling-grid-system {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	gap: 0;
	align-items: center;
}

/* Image grid item - reset margins */
.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image {
	margin: 0;
}

/* Image with pool offset background */
.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image.has-offset-pool-bg {
	margin-right: 0;
	margin-bottom: 29px;
}

/* Image sizing - maintain aspect ratio (881x660 = Operations NY reference) */
.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 881 / 660;
	object-fit: cover;
	display: block;
}

/* Desktop - 1920px+ fixed dimensions (881x660 = Operations NY reference) */
@media (min-width: 1920px) {
	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
		max-width: calc(881px + 29px);
	}

	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 881px;
		height: 660px;
	}

	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		max-width: 730px;
	}
}

/* Desktop - 1024px to 1919px proportional scaling */
@media (min-width: 1024px) and (max-width: 1919px) {
	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
	}

	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		margin-left: clamp(30px, 5vw, 80px);
		padding-right: clamp(20px, 4vw, 60px);
	}
}

/* Tablet - 768px to 1023px stacked layout */
@media (min-width: 768px) and (max-width: 1023px) {
	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item {
		grid-column: span 12;
	}

	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		padding-left: 5%;
		padding-right: 5%;
		margin-top: var(--wp--preset--spacing--50);
	}
}

/* Mobile - below 768px full width stacked */
@media (max-width: 767px) {
	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item {
		grid-column: span 6;
	}

	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
		margin-top: var(--wp--preset--spacing--40);
	}

	/* Reset inline padding on mobile */
	/* REQUIRED: !important to override WP Grid Item inline padding styles from database for mobile spacing */
	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child[style*="padding"] {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

/* Typography scaling for 1400-1600px viewports */
/* REQUIRED: !important to override WP inline font-size styles from database for responsive clamp values */
@media (min-width: 1400px) and (max-width: 1600px) {
	.page-intro-section .wp-block-heading {
		font-size: clamp(40px, 3.5vw, 50px);
	}

	.page-intro-section p[style*="font-size: var(--wp--preset--font-size--xx-large)"] {
		font-size: clamp(26px, 2.2vw, 32px) !important;
	}

	.page-intro-section p[style*="font-size: var(--wp--custom--fontSize--xl)"] {
		font-size: clamp(18px, 1.5vw, 22px) !important;
		line-height: 1.5;
	}
}

/* End Page Intro Section - Kindling Grid Layout */

/* ==========================================================================
   Image + Accordion Sections - Kindling Grid Layout
   Standard: Text LEFT, Image RIGHT (flush right edge)
   Reversed: Image LEFT (flush left edge), Text RIGHT

   REQUIRED: !important declarations override WordPress core layout rules
   for proper edge-to-edge image positioning and full-width grid breakout.
   ========================================================================== */

/* Grid container - full viewport width, break out of parent padding */
/* NOTE: !important and body prefix needed to override WordPress core layout rules */
body .image-accordion-section .is-style-kindling-grid-system,
body .image-accordion-section .wp-block-group.is-style-kindling-grid-system,
body .image-accordion-section .wp-block-group.is-layout-grid {
	max-width: none !important;
	width: calc(100% + 80px) !important;
	margin-left: -40px !important;
	margin-right: -40px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	gap: 0 !important;
	align-items: center;
}

/* Image container - reset margins */
.image-accordion-section .wp-block-kindling-grid-item .wp-block-image {
	margin: 0;
}

/* Image sizing */
.image-accordion-section .wp-block-kindling-grid-item .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   STANDARD LAYOUT: Text LEFT, Image RIGHT (flush right)
   ========================================================================== */

/* Desktop 1024px+ - Standard layout */
@media (min-width: 1024px) {

	/* Text column (first child) */
	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
		padding-left: clamp(40px, 8vw, 188px);
		padding-right: clamp(30px, 4vw, 60px);
	}

	/* Image column (last child) - flush right */
	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		justify-self: end;
	}

	/* Image with pool offset - offset on LEFT side */
	.image-accordion-section:not(.image-accordion-reversed) .wp-block-kindling-grid-item.has-offset-pool-bg-right .wp-block-image {
		margin-left: 29px;
		margin-bottom: 29px;
	}


}

/* Desktop 1920px+ fixed dimensions - Standard */
@media (min-width: 1920px) {
	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		max-width: calc(720px + 29px);
	}

	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child .wp-block-image img {
		width: 720px;
		height: 540px;
	}
}

/* ==========================================================================
   REVERSED LAYOUT: Image LEFT (flush left), Text RIGHT
   ========================================================================== */

/* Desktop 1024px+ - Reversed layout */
@media (min-width: 1024px) {

	/* Image column (first child) - flush left */
	.image-accordion-section.image-accordion-reversed .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		grid-column: span 6;
		justify-self: start;
		margin-left: 0;
		padding-left: 0;
	}

	/* Image flush left, offset space on right */
	.image-accordion-section.image-accordion-reversed .wp-block-kindling-grid-item.has-offset-pool-bg .wp-block-image {
		margin-left: 0;
		margin-right: 29px;
		margin-bottom: 29px;
	}

	.image-accordion-section.image-accordion-reversed .wp-block-kindling-grid-item.has-offset-pool-bg::before {
		right: 15px;
		bottom: 15px;
	}

	/* Text column (last child) */
	.image-accordion-section.image-accordion-reversed .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		grid-column: span 6;
		padding-left: clamp(30px, 4vw, 60px);
		padding-right: clamp(40px, 8vw, 188px);
	}
}

/* Desktop 1920px+ fixed dimensions - Reversed */
@media (min-width: 1920px) {
	.image-accordion-section.image-accordion-reversed .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		max-width: calc(720px + 29px);
	}

	.image-accordion-section.image-accordion-reversed .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 720px;
		height: 540px;
	}
}

/* ==========================================================================
   TABLET & MOBILE - Both layouts stack
   ========================================================================== */

/* Tablet 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
	.image-accordion-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item {
		grid-column: span 12;
	}

	/* Standard: image comes after text on tablet */
	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		padding-left: 5%;
		padding-right: 5%;
	}

	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		margin-top: var(--wp--preset--spacing--50);
	}

	/* Reversed: image comes first, text after */
	.image-accordion-section.image-accordion-reversed .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		padding-left: 5%;
		padding-right: 5%;
		margin-top: var(--wp--preset--spacing--50);
	}

	/* Pool offset adjustments for tablet */
	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg .wp-block-image,
	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right .wp-block-image {
		margin: 0 29px 29px 0;
	}
}

/* Mobile below 768px */
@media (max-width: 767px) {
	.image-accordion-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item {
		grid-column: span 6;
	}

	/* Text content padding */
	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child,
	.image-accordion-section.image-accordion-reversed .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}

	/* Spacing between stacked items */
	.image-accordion-section:not(.image-accordion-reversed) .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child,
	.image-accordion-section.image-accordion-reversed .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		margin-top: var(--wp--preset--spacing--40);
	}

	/* Reset pool offset on mobile */
	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg .wp-block-image,
	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right .wp-block-image {
		margin: 0;
	}

	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg::before,
	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right::before {
		display: none;
	}
}

/* End Image + Accordion Sections */

/* ==========================================================================
   DESKTOP: No gap between accordion sections on Our Solutions page
   ========================================================================== */
@media (min-width: 1024px) {

	/* Remove gap between accordion sections on desktop */
	.image-accordion-section+.image-accordion-section {
		margin-top: 0;
	}
}

/* ==========================================================================
   CAROUSEL + TEXT PATTERNS: Carousel flush left to viewport edge
   ========================================================================== */

/* Service Areas Section - REVERSED layout (carousel on RIGHT) */
/* Override carousel-text-section flush-left behavior for this reversed section */
@media (min-width: 1024px) {

	/* Reset the full-width break-out for service-areas-section */
	.service-areas-section.carousel-text-section .wp-block-columns.alignwide {
		margin-left: 0;
		max-width: var(--wp--style--global--wide-size);
		width: auto;
		padding-left: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}

	/* Both columns should be 50% */
	.service-areas-section .wp-block-columns>.wp-block-column {
		flex-basis: 50%;
		flex-grow: 0;
		max-width: 50%;
	}

	/* Text column (first) - constrain content width */
	.service-areas-section .wp-block-columns>.wp-block-column:first-child {
		padding-right: 40px;
	}

	/* Carousel column (second) - proper sizing */
	.service-areas-section .wp-block-columns>.wp-block-column:last-child {
		padding-left: 40px;
	}
}

/* Mobile: Service Areas stacks properly */
@media (max-width: 1023px) {
	.service-areas-section .wp-block-columns>.wp-block-column {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   SERVICE AREAS SECTION - Separator & Carousel Dots Fixes
   1. Separator left-aligned (not centered)
   2. Carousel dots below image (not overlaid)
   Reference: Operations NY page carousel styling
   ========================================================================== */

/* Reusable left-aligned separator - 224px wide */
/* SOLUTION: Use calc() to match heading's centering offset */
/* Parent column is 708.5px, content area is 558px, so offset = (708.5 - 558)/2 = 75.25px */
/* Using calc() makes this responsive to any container width */
.separator-left-224 {
	width: 224px;
	max-width: 224px;
	margin-left: calc((100% - 558px) / 2) !important;
	/* Match heading's left edge position */
	margin-right: auto !important;
}

/* Splide pagination - position below carousel, centered under image */
/* REQUIRED: !important to override Splide plugin default absolute positioning */
.service-areas-section .splide__pagination,
.service-areas-carousel-splide .splide__pagination {
	position: relative !important;
	bottom: auto !important;
	left: 0 !important;
	right: auto !important;
	padding: 0 !important;
	gap: 12px !important;
	margin-top: 24px !important;
	justify-content: center !important;
	display: flex !important;
}

/* Pagination dots - 17x17px touch target, blue outlined style */
/* REQUIRED: !important to override Splide plugin styles */
.service-areas-section .splide__pagination__page,
.service-areas-carousel-splide .splide__pagination__page {
	min-width: 17px !important;
	min-height: 17px !important;
	width: 17px !important;
	height: 17px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
	background-color: transparent !important;
	border: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Visual dot via ::after - 18x18px with blue border */
/* REQUIRED: !important to override Splide plugin styles */
.service-areas-section .splide__pagination__page::after,
.service-areas-carousel-splide .splide__pagination__page::after {
	content: '';
	width: 18px !important;
	height: 18px !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none !important;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02) !important;
}

/* Active/hover state - filled blue */
.service-areas-section .splide__pagination__page:hover::after,
.service-areas-section .splide__pagination__page.is-active::after,
.service-areas-carousel-splide .splide__pagination__page:hover::after,
.service-areas-carousel-splide .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Desktop flush-left for carousel-text-section carousel column */
@media (min-width: 1024px) {

	/* Section container - remove left padding to allow flush positioning */
	body .carousel-text-section:not(.service-areas-section) {
		padding-left: 0;
	}

	.carousel-text-section .splide {
		padding: 0 !important;
	}

	/* Grid/columns container - break out to viewport edge on left */
	/* Exclude service-areas-section which has reversed layout (carousel on right) */
	.carousel-text-section:not(.service-areas-section) .wp-block-columns.alignwide,
	.carousel-text-section:not(.service-areas-section) .is-style-kindling-grid-system.alignwide {
		margin-left: calc(50% - 50vw);
		max-width: none;
		width: 100vw;
		padding-left: 0;
	}

	/* First column (carousel) - flush left, no padding */
	/* Exclude service-areas-section which has text in first column */
	.carousel-text-section:not(.service-areas-section) .wp-block-columns>.wp-block-column:first-child,
	.carousel-text-section:not(.service-areas-section) .wp-block-kindling-grid-item:first-child {
		padding-left: 0;
		margin-left: 0;
	}

	/* Carousel container - flush left positioning */
	/* Exclude service-areas-section which needs carousel flush RIGHT */
	.carousel-text-section:not(.service-areas-section) .wp-block-kindling-carousel,
	.carousel-text-section:not(.service-areas-section) .project-zero-carousel,
	.carousel-text-section:not(.service-areas-section) .kindling-carousel-container {
		margin-left: 0;
		padding-left: 0;
	}
}

/* Solutions Page (page-id-15) - specific adjustments for desktop */
@media (min-width: 1024px) {
	.page-id-15 .has-texture-bg .wp-block-columns.alignwide:not(.has-3-columns)>.wp-block-column:first-child {

		padding-left: 0;
	}

	.image-accordion-section .has-offset-pool-bg::before {
		right: -35px;
		bottom: 15px;
		height: 90%;
	}
}

/* Project Zero Section - flush left carousel on desktop */
body .project-zero-section {
	padding-left: 0;
	padding-right: 0;
	overflow: visible;
}

/* Override WordPress is-layout-constrained centering */
/* REQUIRED: !important to override WP constrained layout default margins for offset Project Zero layout */
.project-zero-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 188px !important;
	margin-right: 0 !important;
	max-width: none;
}

/* Columns container - full viewport width */
/* REQUIRED: !important to override WP Columns block default margins for full-width Project Zero breakout */
.project-zero-section .wp-block-columns.alignwide {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	padding-left: 0;
	padding-right: 0;
	gap: 0;
}

@media (min-width: 1024px) {

	/* Carousel column - flush left */
	.project-zero-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: 46%;
		max-width: 46%;
		padding-left: 0;
		margin-left: 0;
	}

	/* Text column */
	.project-zero-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child {
		flex-basis: auto;
		flex-grow: 1;
		margin-left: clamp(40px, 5vw, 80px);
		padding-right: clamp(30px, 5vw, 80px);
	}
}

@media (min-width: 1920px) {
	.project-zero-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: calc(859px + 29px);
		flex-grow: 0;
		flex-shrink: 0;
		max-width: calc(859px + 29px);
		padding-left: 0;
		margin-left: 0;
	}

	.project-zero-section.has-water-ripple-bg .wp-block-columns>.wp-block-column:last-child {
		flex-basis: 730px;
		flex-grow: 0;
		flex-shrink: 0;
		margin-left: 185px;
		padding-right: 15%;
	}
}

/* Home Hero Carousel */
body .home-hero-carousel-wrapper {
	position: relative;
	overflow: visible;
	min-height: 90vh !important;
	/* REQUIRED: override inline styles from WP database */
	z-index: 100000;
}

/* Ensure sticky nav stays above all page content */
.hero-top-bar.is-sticky {
	isolation: isolate;
}

/* ==========================================================================
   HERO NAVIGATION BLOCK - Template Part Positioning & Responsive Styles
   Styles for nav.wp-block-navigation.hero-navigation-block rendered from
   header-hero.html template part. Positioned absolute within hero section.
   ========================================================================== */

/* CRITICAL FIX: Hide hero-navigation-block-wrapper - navigation is cloned by JS into hero-top-bar */
/* The wrapper causes duplicate nav when JS doesn't hide it or on pages without hero carousels */
/* REQUIRED: !important to unconditionally hide wrapper that could cause duplicate nav elements */
.hero-navigation-block-wrapper {
	display: none !important;
}

/* MOBILE: Hide hero navigation block - hamburger menu takes over below 1024px */
/* REQUIRED: !important to override the display:flex rules below */
@media (max-width: 1023px) {

	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block,
	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container,
	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block>.wp-block-buttons,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block>.wp-block-buttons {
		display: none !important;
	}
}

/* Hero navigation block from template part - positioned absolute within hero */
/* This styles the navigation block that renders from header-hero.html template part */
/* Match homepage .hero-navigation positioning and spacing exactly */
/* REQUIRED: !important to override WP Navigation block default display, positioning, and flex layout for hero absolute positioning */
body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block,
body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block {
	position: absolute !important;
	top: 78px !important;
	left: 220px !important;
	right: auto !important;
	max-width: calc(100vw - 380px) !important;
	z-index: 10 !important;
	pointer-events: auto !important;
	overflow: visible !important;
	/* Force horizontal flex layout - items flow left to right */
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 32px !important;
}

/* At 1920px+, increase spacing from edges for larger screens */
/* REQUIRED: !important to override hero nav positioning for large viewport adjustments */
@media (min-width: 1920px) {

	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block {
		left: 280px !important;
		max-width: calc(100vw - 480px) !important;
		gap: 32px !important;
	}
}

/* The UL inside nav - also force inline */
/* REQUIRED: !important to override WP Navigation container default flex layout for horizontal menu */
body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container,
body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	align-items: center !important;
	width: auto !important;
	flex: 0 0 auto !important;
	position: static !important;
	overflow: visible !important;
}

/* Buttons block inside nav - inline with nav items */
/* REQUIRED: !important to override WP Buttons block default flex layout for inline hero nav buttons */
body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block>.wp-block-buttons,
body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block>.wp-block-buttons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 20px !important;
	align-items: center !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	position: static !important;
}

.hero-navigation-block .wp-block-navigation-item a {
	color: white;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 22px;
	white-space: nowrap;
	padding: 12px 17px;
}

.hero-navigation-block .wp-block-navigation-item a:hover {
	background-color: var(--wp--preset--color--theme-03);
	border-radius: 0;
}

/* Partner With Us link in hero-navigation-block */
.hero-navigation-block .wp-block-navigation-item a[href*="partner"] {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-style: dotted;
	text-underline-offset: 6px;
}

/* Become a Lifeguard button in hero-navigation-block - target the actual button class */
/* REQUIRED: !important to override WP Button block inline styles for custom wave background button */
.hero-navigation-block .wp-block-button.is-style-wave .wp-block-button__link,
.hero-navigation-block .wp-block-button__link[href*="lifeguard"] {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave.png') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	padding: 10px 20px !important;
}

/* REQUIRED: !important to override WP Button hover styles for wave button */
.hero-navigation-block .wp-block-button.is-style-wave .wp-block-button__link:hover,
.hero-navigation-block .wp-block-button__link[href*="lifeguard"]:hover {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave-flipped.png') !important;
	color: var(--wp--preset--color--theme-03) !important;
}

/* Partner With Us button - dotted underline style */
/* REQUIRED: !important to override WP Button block default background/text-decoration for link style */
.hero-navigation-block .wp-block-button.is-style-subtle .wp-block-button__link,
.hero-navigation-block .wp-block-button__link[href*="partner"] {
	background: transparent !important;
	text-decoration: underline !important;
	text-decoration-style: dotted !important;
	text-decoration-color: white !important;
	text-underline-offset: 6px !important;
	padding: 10px 17px !important;
	border-radius: 0 !important;
}

/* REQUIRED: !important to override WP Button/Navigation block hover defaults for hero nav styling */
.hero-navigation-block .wp-block-button.is-style-subtle .wp-block-button__link:hover,
.hero-navigation-block .wp-block-button__link[href*="partner"]:hover {
	background-color: var(--wp--preset--color--theme-03) !important;
	text-decoration: none !important;
}

/* Operations submenu dropdown - dotted underline like home page */
.hero-navigation-block .wp-block-navigation-submenu>.wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: white;
	text-underline-offset: 6px;
}

/* Become a Lifeguard button - target last navigation item (matches homepage styling) */
.hero-navigation-block .wp-block-navigation>ul.wp-block-navigation__container>li.wp-block-navigation-item:last-child a,
.hero-navigation-block .wp-block-navigation__container>li.wp-block-navigation-item:last-child a {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	color: var(--wp--preset--color--theme-02);
	padding: 10px 20px;
	border-radius: var(--wp--custom--border--rounded-xl);
	text-transform: capitalize;
	transition: background-image 0.2s ease;
}

.hero-navigation-block .wp-block-navigation>ul.wp-block-navigation__container>li.wp-block-navigation-item:last-child a:hover,
.hero-navigation-block .wp-block-navigation__container>li.wp-block-navigation-item:last-child a:hover {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave-flipped.png');
	color: var(--wp--preset--color--theme-03);
}

/* Reset background for Operations submenu parent - keep text white and visible */
/* REQUIRED: !important to override lifeguard button background styles leaking to submenu */
.hero-navigation-block .wp-block-navigation-submenu>.wp-block-navigation-item__content {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: white !important;
}

/* At 1560px and below (includes 1512px, 1440px), reduce gap and positioning for hero navigation */
/* This media query MUST come AFTER base styles above to properly override them */
/* REQUIRED: !important to override WP Navigation block base styles for smaller desktop viewport adjustments */
@media (max-width: 1560px) {

	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block {
		gap: 6px !important;
		left: 140px !important;
		right: 10px !important;
		width: auto !important;
		max-width: calc(100vw - 150px) !important;
		justify-content: flex-end !important;
	}

	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container {
		gap: 4px !important;
		flex-shrink: 1 !important;
	}

	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block>.wp-block-buttons,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block>.wp-block-buttons {
		gap: 4px !important;
		flex-shrink: 0 !important;
		margin-left: 8px !important;
	}

	/* Reduce nav item padding at smaller desktop viewports */
	.hero-navigation-block .wp-block-navigation-item a {
		padding: 10px 8px !important;
	}

	/* Reduce button padding at smaller desktop viewports */
	.hero-navigation-block .wp-block-button.is-style-wave .wp-block-button__link,
	.hero-navigation-block .wp-block-button__link[href*="lifeguard"] {
		padding: 8px 14px !important;
	}

	.hero-navigation-block .wp-block-button.is-style-subtle .wp-block-button__link,
	.hero-navigation-block .wp-block-button__link[href*="partner"] {
		padding: 8px 10px !important;
	}
}

/* Additional tightening for narrower viewports (1440px and below) */
/* REQUIRED: !important to override WP Navigation block base styles and 1560px rules for narrower viewports */
@media (max-width: 1480px) {

	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block {
		left: 150px !important;
		right: 25px !important;
		gap: 4px !important;
	}

	body:has(.hero-cover-section) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container,
	body:has(.hero-top-bar) nav.wp-block-navigation.hero-navigation-block>ul.wp-block-navigation__container {
		gap: 2px !important;
	}

	.hero-navigation-block .wp-block-navigation-item a {
		padding: 8px 6px !important;
		font-size: var(--wp--custom--fontSize--sm) !important;
	}

	.hero-navigation-block .wp-block-button.is-style-wave .wp-block-button__link,
	.hero-navigation-block .wp-block-button__link[href*="lifeguard"] {
		padding: 6px 12px !important;
		font-size: var(--wp--custom--fontSize--sm) !important;
	}

	.hero-navigation-block .wp-block-button.is-style-subtle .wp-block-button__link,
	.hero-navigation-block .wp-block-button__link[href*="partner"] {
		padding: 6px 8px !important;
		font-size: var(--wp--custom--fontSize--sm) !important;
	}
}

/* Cloned navigation in hero-navigation div */
/* 44px gap between all nav items */
/* flex: 0 1 auto to prevent expanding to fill space - keeps buttons away from viewport edge */
/* margin-left: auto pushes navigation to the right in flexbox parent */
/* REQUIRED: !important to ensure navigation is right-aligned at all desktop viewports */
body .hero-navigation {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 32px;
	flex: 0 1 auto;
	margin-left: auto !important;
}

body .hero-navigation .hero-nav-cloned,
body .hero-navigation .hero-nav-cloned.wp-block-navigation,
body .hero-navigation .hero-nav-cloned.wp-block-navigation__container,
body .hero-navigation .wp-block-navigation.hero-nav-cloned,
body .hero-navigation .wp-block-navigation__container.hero-nav-cloned {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero-navigation .hero-nav-cloned li {
	list-style: none;
	white-space: nowrap;
}

.hero-navigation .hero-nav-cloned a,
.hero-navigation .hero-nav-cloned .wp-block-navigation-item__content {
	color: white;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 22px;
	padding: 12px 17px;
	border-radius: 0;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

.hero-navigation .hero-nav-cloned a:hover,
.hero-navigation .hero-nav-cloned .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--theme-03);
	border-radius: 0;
	padding: 12px 17px;
}

/* ==========================================================================
   Hero Navigation Cloned - Desktop Dropdown Submenu on Hover
   Fix for cloned navigation losing WordPress interactivity scripts
   CRITICAL: !important required to override WP Navigation block inline styles
   ========================================================================== */

/* Parent item needs position relative for absolute submenu positioning */
.hero-navigation .hero-nav-cloned .wp-block-navigation-item.has-child,
.hero-navigation .hero-nav-cloned .wp-block-navigation-submenu {
	position: relative !important;
}

/* Submenu hidden by default - MUST be absolute to overlay without pushing */
.hero-navigation .hero-nav-cloned .wp-block-navigation__submenu-container {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	z-index: 10000 !important;
	min-width: 200px;
	background-color: var(--wp--preset--color--white) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
	margin: 0 !important;
}

/* Show submenu on hover of parent item */
.hero-navigation .hero-nav-cloned .wp-block-navigation-item.has-child:hover>.wp-block-navigation__submenu-container,
.hero-navigation .hero-nav-cloned .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column !important;
	position: absolute !important;
}

/* Submenu item styling */
.hero-navigation .hero-nav-cloned .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.hero-navigation .hero-nav-cloned .wp-block-navigation__submenu-container .wp-block-navigation-item a,
.hero-navigation .hero-nav-cloned .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 12px 20px !important;
	color: var(--wp--preset--color--theme-02) !important;
	background: transparent !important;
	text-align: left;
	white-space: nowrap;
}

.hero-navigation .hero-nav-cloned .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.hero-navigation .hero-nav-cloned .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--theme-03) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Button groups in hero navigation - consistent 32px gap */
/* REQUIRED: !important needed to override WordPress wp-container-* generated gap and justify classes */
body .hero-navigation .hero-nav-buttons-cloned,
body .hero-navigation .wp-block-buttons.hero-nav-buttons-cloned {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 32px;
	align-items: center;
	margin-left: 0;
	justify-content: flex-start !important;
}

/* Partner With Us button - subtle style with underline */
/* Figma: capitalize, 20px, letter-spacing 0.6px, dotted underline */
body .hero-navigation .hero-nav-buttons-cloned .wp-block-button.is-style-subtle .wp-block-button__link {
	background: transparent;
	border: none;
	border-bottom: 2px dotted var(--wp--preset--color--theme-04);
	color: white;
	padding: 12px 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: capitalize;
	letter-spacing: 0.6px;
	line-height: 22px;
	/* REQUIRED: !important to prevent button text wrapping in hero nav at narrow viewports */
	white-space: nowrap !important;
	width: auto !important;
	min-width: fit-content !important;
}

body .hero-navigation .hero-nav-buttons-cloned .wp-block-button.is-style-subtle .wp-block-button__link:hover {
	border-bottom: none;
	color: var(--wp--preset--color--theme-03);
	text-decoration: none;
}

/* Button wrapper alignment - ensure button links are vertically centered */
body .hero-navigation .hero-nav-buttons-cloned .wp-block-button {
	display: flex;
	align-items: center;
}

/* Become a Lifeguard button - wave style */
/* Figma: capitalize, 20px, letter-spacing 0.6px, yellow wave background, rounded */
/* Padding 12px top/bottom to vertically align with nav items (nav has 12px 17px) */
body .hero-navigation .hero-nav-buttons-cloned .wp-block-button.is-style-wave .wp-block-button__link,
body .hero-navigation .hero-nav-buttons-cloned .wp-block-button.is-style-outline .wp-block-button__link {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave.png');
	background-size: cover;
	background-position: center;
	background-color: transparent;
	color: var(--wp--preset--color--theme-02);
	padding: 12px 20px;
	border-radius: var(--wp--custom--border--rounded-xl);
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: capitalize;
	letter-spacing: 0.6px;
	line-height: 22px;
	border: none;
	/* REQUIRED: !important to prevent button text wrapping in hero nav at narrow viewports */
	white-space: nowrap !important;
	width: auto !important;
	min-width: fit-content !important;
}

body .hero-navigation .hero-nav-buttons-cloned .wp-block-button.is-style-wave .wp-block-button__link:hover,
body .hero-navigation .hero-nav-buttons-cloned .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave-flipped.png');
	color: var(--wp--preset--color--theme-03);
	text-decoration: none;
}

/* Wrapper is hidden by hero-navigation.js - fallback styles if JS fails */
.hero-navigation-block-wrapper .wp-block-navigation {
	pointer-events: all;
	gap: 32px;
}

/* Ensure all spans and labels are visible */
body .hero-navigation-block-wrapper .wp-block-navigation-item__label,
body .hero-navigation-block-wrapper .wp-block-navigation-item__content {
	display: inline;
	visibility: visible;
	color: white;
}

/* Force navigation to show items directly, not in responsive overlay */
/* Override WordPress Core responsive navigation behavior for hero nav */
/* REQUIRED: !important to override WP Core responsive navigation default flex-wrap for inline hero nav display */
.hero-navigation-block-wrapper nav.wp-block-navigation.is-responsive,
.hero-navigation nav.wp-block-navigation.is-responsive {
	/* Force flex layout to show items inline */
	flex-wrap: nowrap !important;
}

body .hero-navigation-block-wrapper .wp-block-navigation__responsive-container-open,
body .hero-navigation .wp-block-navigation__responsive-container-open {
	display: none;
}

/* Show navigation container for hero pages with navigation block in template part */
/* Use body:has() to detect hero pages and show the navigation */
/* REQUIRED: !important to override WP Navigation block responsive container default display:none */
body:has(.hero-cover-section) .hero-navigation-block-wrapper .wp-block-navigation__responsive-container,
body:has(.hero-top-bar) .hero-navigation-block-wrapper .wp-block-navigation__responsive-container {
	display: flex !important;
}

/* For cloned navigation, hide responsive container by default */
.hero-navigation .wp-block-navigation__responsive-container {
	display: none;
}

/* Cloned navigation (.hero-nav-cloned) styles are defined earlier (line ~3016) */

.hero-navigation-block-wrapper .wp-block-navigation-item a {
	color: white;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 22px;
	white-space: nowrap;
	padding: 12px 17px;
}

.hero-navigation-block-wrapper .wp-block-navigation-item a:hover {
	background-color: var(--wp--preset--color--theme-03);
	padding: 12px 17px;
}

/* Partner With Us navigation link - underline per Figma */
.hero-navigation-block-wrapper .wp-block-navigation-item a[href*="partner"],
.hero-navigation .wp-block-navigation-item a[href*="partner"],
.wp-block-navigation-item a[href*="partner-with-us"] {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px;
	text-underline-offset: 12px;
}

.hero-navigation-block-wrapper .wp-block-navigation-item a[href*="partner"]:hover,
.hero-navigation .wp-block-navigation-item a[href*="partner"]:hover,
.wp-block-navigation-item a[href*="partner-with-us"]:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--theme-05);
	text-decoration-thickness: 3px;
	text-underline-offset: 12px;
	color: #f4f2ed;
	background-color: transparent;
}

/* Partner With Us navigation - no extra margin needed, gap handles spacing */
@media (min-width: 1920px) {

	.hero-navigation-block-wrapper .wp-block-navigation-item a[href*="partner"],
	.hero-navigation .wp-block-navigation-item a[href*="partner"],
	.wp-block-navigation-item a[href*="partner-with-us"] {
		margin-left: 0;
	}

	/* Lifeguard CTA section - 745px height at 1920px viewport */
	body .lifeguard-cta-section {
		display: flex;
		height: 745px;
		padding-top: 159px;
		padding-bottom: 159px;
		padding-left: 415px;
		padding-right: 415px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.lifeguard-cta-section .wp-block-cover__inner-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
}

/* Lifeguard CTA section - background image positioning and focal point */
.lifeguard-cta-section .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center calc(30% + 70px);
}

/* Lifeguard CTA section - white background, blue text button */
/* REQUIRED: !important to override WP Button block inline background/color styles */
.lifeguard-cta-section .wp-block-button .wp-block-button__link,
.lifeguard-cta-section .wp-block-button .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border: none;
}

/* REQUIRED: !important to override WP Button hover default styles */
.lifeguard-cta-section .wp-block-button .wp-block-button__link:hover,
.lifeguard-cta-section .wp-block-button .wp-block-button__link.wp-element-button:hover {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
}

/* REQUIRED: Cover block positioning - ensures overlay and content display correctly */
.lifeguard-cta-section.wp-block-cover {
	position: relative;
}

.lifeguard-cta-section .wp-block-cover__background {
	position: absolute;
	inset: 0;
}

/* REQUIRED: Apply dim opacity when core cover block CSS isn't loaded */
.lifeguard-cta-section .wp-block-cover__background.has-background-dim-80 {
	opacity: 0.8;
}

.lifeguard-cta-section .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* Center buttons in lifeguard CTA section */
.lifeguard-cta-section .wp-block-buttons {
	display: flex;
	justify-content: center;
}

/* Operations Lifeguard CTA - white button with dark blue hover */
/* Target buttons linking to become-a-lifeguard with white background inside cover blocks */
/* REQUIRED: !important to override WP Button has-white-background-color hover styles */
.wp-block-cover .wp-block-button .wp-block-button__link.has-white-background-color[href*="become-a-lifeguard"]:hover,
.wp-block-cover .wp-block-button .wp-block-button__link.has-white-background-color[href*="lifeguard"]:hover,
.wp-block-cover .wp-block-button a.wp-block-button__link.has-white-background-color[href*="become-a-lifeguard"]:hover {
	background-color: var(--wp--preset--color--theme-02) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Navigation responsive spacing - progressive scaling strategy */
/* Mobile nav kicks in at 1100px, so we need smooth scaling from 1920px down to 1100px */

/* 1850px: Maintain consistent 44px gap */
@media (max-width: 1850px) {

	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-group.alignfull .wp-block-navigation,
	.wp-block-group.alignfull .wp-block-navigation__container,
	.is-hero .wp-block-navigation,
	.is-hero .wp-block-navigation__container,
	.has-theme-02-background-color .wp-block-navigation,
	.has-theme-02-background-color .wp-block-navigation__container {
		gap: 32px;
	}

	.wp-block-navigation-item a,
	.wp-block-navigation .wp-block-button__link {
		font-size: var(--wp--custom--fontSize--lg);
	}

	/* NOTE: .hero-top-bar and .hero-logo at 1850px consolidated to line ~6949 */

	/* Hero navigation responsive - consistent 32px gap at 1850px */
	body .hero-navigation {
		gap: 32px;
	}

	body .hero-navigation .hero-nav-cloned {
		gap: 32px;
	}

	/* REQUIRED: !important to override cloned buttons default gap at 1850px viewport */
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 32px !important;
	}

	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		font-size: var(--wp--custom--fontSize--lg);
	}
}

/* 1700px: Maintain consistent 32px gap */
@media (max-width: 1700px) {

	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-group.alignfull .wp-block-navigation,
	.wp-block-group.alignfull .wp-block-navigation__container,
	.is-hero .wp-block-navigation,
	.is-hero .wp-block-navigation__container,
	.has-theme-02-background-color .wp-block-navigation,
	.has-theme-02-background-color .wp-block-navigation__container {
		gap: 32px;
	}

	.wp-block-navigation-item a,
	.wp-block-navigation .wp-block-button__link {
		font-size: var(--wp--preset--font-size--medium);
	}

	/* NOTE: .hero-top-bar and .hero-logo at 1700px consolidated to line ~6949 */

	/* Hero navigation font scaling for 1700px */
	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		font-size: var(--wp--preset--font-size--medium);
		padding: 10px 12px;
	}
}

/* 1550px: Hero navigation font scaling */
@media (max-width: 1550px) {

	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-group.alignfull .wp-block-navigation,
	.wp-block-group.alignfull .wp-block-navigation__container,
	.is-hero .wp-block-navigation,
	.is-hero .wp-block-navigation__container,
	.has-theme-02-background-color .wp-block-navigation,
	.has-theme-02-background-color .wp-block-navigation__container {
		gap: 32px;
	}

	.wp-block-navigation-item a,
	.wp-block-navigation .wp-block-button__link {
		font-size: var(--wp--custom--fontSize--base-lg);
	}

	/* Hero top bar - compact spacing */
	.hero-top-bar {
		gap: 30px;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Hero logo - smallest before hamburger */
	.hero-logo {
		width: 160px;
	}

	/* Hero navigation font scaling for 1550px */
	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		font-size: var(--wp--custom--fontSize--base-lg);
		padding: 8px 10px;
	}
}

/* ==========================================================================
   1560px: Fit navigation at 1512px viewport with 20px text
   REQUIRED: !important declarations throughout this breakpoint override
   WP Navigation/Group/Logo block inline styles for consistent navigation
   spacing, sizing, and alignment at this tight viewport width.
   ========================================================================== */
@media (max-width: 1560px) {

	/* Consistent 14px gap across all navigation contexts at 1512px viewport */
	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-group.alignfull .wp-block-navigation,
	.wp-block-group.alignfull .wp-block-navigation__container,
	.is-hero .wp-block-navigation,
	.is-hero .wp-block-navigation__container,
	.has-theme-02-background-color .wp-block-navigation,
	.has-theme-02-background-color .wp-block-navigation__container {
		gap: 14px !important;
	}

	/* Navigation buttons - account for nav item padding with margin-left */
	.wp-block-navigation .wp-block-buttons {
		gap: 14px !important;
		margin-left: 14px !important;
	}

	/* Blue header - reduce alignwide padding */
	.has-theme-02-background-color .alignwide {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* 20px font size with minimal padding */
	.wp-block-navigation-item a {
		font-size: var(--wp--preset--font-size--large);
		padding-left: 0;
		padding-right: 0;
	}

	/* Logo size - larger to fill space */
	.wp-block-site-logo img,
	.has-theme-02-background-color .wp-block-outermost-icon-block {
		max-width: 224px !important;
		max-height: 224px !important;
	}

	/* Hero logo size - reduced to prevent button overflow at 1512px with 15px right gap */
	.hero-logo {
		width: 155px !important;
	}

	/* Hero top bar - tight gap and padding */
	.hero-top-bar {
		gap: 10px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Hero navigation gap override */
	.hero-navigation .wp-block-navigation,
	.hero-navigation .wp-block-navigation__container {
		gap: 10px !important;
	}

	/* Caret positioning now handled by base styles for consistency across all viewports */
	/* See "CONSISTENT DROPDOWN ALIGNMENT" section above line 1910 */

	/* Reduce header padding */
	.site-header>.wp-block-group.alignfull,
	.site-header .wp-block-group.alignfull {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Hero navigation wrapper */
	.hero-navigation-block-wrapper {
		padding-right: 10px !important;
	}

	/* Hero navigation responsive - consistent 14px gaps across all items */
	body .hero-navigation {
		gap: 14px !important;
		margin-left: auto !important;
		margin-right: 10px !important;
	}

	body .hero-navigation .hero-nav-cloned {
		gap: 14px !important;
	}

	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 14px !important;
		margin-left: 12px !important;
	}

	/* Ensure buttons container also has consistent gap */
	body .hero-navigation .wp-block-buttons {
		gap: 14px !important;
	}

	.hero-navigation .hero-nav-cloned a {
		font-size: var(--wp--custom--fontSize--lg);
		padding: 4px 0;
	}



	/* Add margin-left to navigation container */
	.wp-block-navigation__container {
		margin-left: 40px !important;
	}

	/* Left justify dropdown nav items */
	/* REQUIRED: !important to override WP Navigation submenu default center alignment for left-aligned dropdown */
	.wp-block-navigation__submenu-container {
		text-align: left !important;
		align-items: flex-start !important;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item {
		justify-content: flex-start !important;
		width: 100% !important;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item a {
		text-align: left !important;
		width: 100% !important;
		justify-content: flex-start !important;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		text-align: left !important;
		justify-content: flex-start !important;
	}

	/* Solutions Page - Fix accordion image overflow at 1512px viewport */
	/* Constrain fixed 802px images to viewport with responsive scaling */
	/* REQUIRED: !important to override WP Image block inline width/min-width for responsive 1512px viewport */
	.solutions-maintenance .has-offset-pool-bg .wp-block-image,
	.solutions-management .has-offset-pool-bg-right .wp-block-image,
	.solutions-repair .has-offset-pool-bg-right .wp-block-image {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 700px !important;
	}

	/* REQUIRED: !important to override WP Image block inline img dimensions for responsive scaling */
	.solutions-maintenance .has-offset-pool-bg .wp-block-image img,
	.solutions-management .has-offset-pool-bg-right .wp-block-image img,
	.solutions-repair .has-offset-pool-bg-right .wp-block-image img {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 700px !important;
		height: auto !important;
	}

	/* Reduce right shift for management/repair sections */
	/* REQUIRED: !important to override offset positioning styles for narrower 1512px viewport */
	.solutions-management .has-offset-pool-bg-right,
	.solutions-repair .has-offset-pool-bg-right {
		right: -80px !important;
	}

	/* Reduce maintenance left margin */
	/* REQUIRED: !important to override offset margin styles for narrower 1512px viewport */
	.solutions-maintenance .has-offset-pool-bg {
		margin-left: calc(-1 * (40px + max(0px, (100vw - 1440px) / 2))) !important;
		margin-right: 60px !important;
	}

	/* Ensure columns don't overflow viewport */
	.solutions-section .wp-block-columns {
		overflow: hidden;
		max-width: 100%;
	}

	/* Timeline responsive - prevent overflow at 1512px viewport */
	.company-timeline-section {
		overflow-x: hidden;
	}

	.company-timeline {
		max-width: 100vw;
		overflow-x: auto;
	}

	.company-timeline .timeline-track {
		/* Align with heading: (viewport - 1440) / 2 + 53px spacing */
		padding-left: calc(max(53px, (100vw - 1440px) / 2 + 53px));
		padding-right: 180px;
	}

	.company-timeline .timeline-line {
		/* Start at center of first dot: offset + 7px (half of 14px dot) */
		left: calc(max(53px, (100vw - 1440px) / 2 + 53px) + 7px);
	}

	.company-timeline .timeline-item {
		min-width: 180px;
	}

	.company-timeline .timeline-content {
		padding-right: 60px;
	}

	.company-timeline .timeline-year {
		font-size: var(--wp--custom--fontSize--4xl);
	}

	.company-timeline .timeline-description {
		font-size: var(--wp--custom--fontSize--base-sm);
		max-width: 160px;
	}
}

/* ==========================================================================
   1440px: Compact navigation for desktop display
   REQUIRED: !important declarations throughout this breakpoint override
   WP Navigation/Button block inline styles for compact navigation spacing,
   sizing, and button visibility at this narrower desktop viewport.
   ========================================================================== */
@media (max-width: 1440px) {

	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-group.alignfull .wp-block-navigation,
	.wp-block-group.alignfull .wp-block-navigation__container,
	.is-hero .wp-block-navigation,
	.is-hero .wp-block-navigation__container,
	.has-theme-02-background-color .wp-block-navigation,
	.has-theme-02-background-color .wp-block-navigation__container {
		gap: 32px !important;
	}

	.wp-block-navigation-item a,
	.wp-block-navigation .wp-block-button__link {
		font-size: var(--wp--preset--font-size--medium);
	}

	/* NOTE: .hero-top-bar at 1440px consolidated to line ~6636 */

	/* Hero logo - compact */
	.hero-logo {
		width: 120px;
	}

	/* Hero navigation responsive - reduced gap for 20px button font */
	body .hero-navigation {
		gap: 16px;
	}

	body .hero-navigation .hero-nav-cloned {
		gap: 16px;
	}

	/* Show buttons at 1440px - responsive layout keeps them visible */
	body .hero-navigation .hero-nav-buttons-cloned {
		display: flex !important;
		gap: 23px !important;
	}

	.hero-navigation .hero-nav-cloned a {
		font-size: var(--wp--custom--fontSize--sm);
		padding: 4px 4px;
		white-space: nowrap;
	}

	/* Show CTA buttons at 1440px with reduced size */
	.hero-navigation .wp-block-button {
		display: flex !important;
	}

	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		padding: 6px 10px !important;
		font-size: var(--wp--custom--fontSize--lg) !important;
	}
}

/* Note: Hero navigation switches to mobile hamburger at 1279px */
/* Desktop navigation visible from 1280px and above */

/* 1300px: Tighter navigation spacing */
@media (max-width: 1300px) {

	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-group.alignfull .wp-block-navigation,
	.wp-block-group.alignfull .wp-block-navigation__container,
	.is-hero .wp-block-navigation,
	.is-hero .wp-block-navigation__container,
	.has-theme-02-background-color .wp-block-navigation,
	.has-theme-02-background-color .wp-block-navigation__container {
		gap: 24px;
	}

	.wp-block-navigation-item a {
		font-size: var(--wp--custom--fontSize--base-lg);
	}

	/* Hero logo - smaller */
	.hero-logo {
		width: 140px;
	}

	/* Hero top bar */
	.hero-top-bar {
		gap: 24px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Hero navigation - tighter gaps */
	/* REQUIRED: !important to override hero navigation default gap at 1300px viewport */
	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned {
		gap: 24px !important;
	}

	.hero-navigation .hero-nav-cloned a {
		font-size: var(--wp--custom--fontSize--base-lg);
		padding: 4px 2px;
	}
}

/* 1280px: Minimum desktop nav size before switching to mobile */
@media (max-width: 1280px) {

	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-group.alignfull .wp-block-navigation,
	.wp-block-group.alignfull .wp-block-navigation__container,
	.is-hero .wp-block-navigation,
	.is-hero .wp-block-navigation__container,
	.has-theme-02-background-color .wp-block-navigation,
	.has-theme-02-background-color .wp-block-navigation__container,
	.page-id-23 .wp-block-navigation__container {
		gap: 20px;
	}

	.wp-block-navigation-item a {
		font-size: var(--wp--custom--fontSize--base-sm);
	}

	/* Hero logo - smallest */
	.hero-logo {
		width: 120px;
	}

	/* Hero top bar - smallest */
	.hero-top-bar {
		gap: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Hero navigation - minimum gaps */
	/* REQUIRED: !important to override hero navigation default gap at 1280px viewport */
	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned {
		gap: 20px !important;
	}

	.hero-navigation .hero-nav-cloned a {
		font-size: var(--wp--custom--fontSize--base-sm);
		padding: 3px 0;
	}
}

/* Lifeguard page - consistent 32px gap at 1850px and below (cascades to all smaller viewports) */
@media (max-width: 1850px) {
	.page-id-23 .wp-block-navigation__container {
		gap: 32px;
	}
}

/* NOTE: Removed redundant 1700px/1550px/1440px/1300px rules - same 32px value cascades from 1850px */

/* Hero Navigation - Override global responsive rules to match Figma design at 1440px */
/* At 1440px viewport, hero navigation should maintain proper spacing and layout */
/* REQUIRED: !important to override WP Navigation block default flex-wrap for inline hero nav at 1440px */
@media (max-width: 1440px) {

	.home .wp-block-group.alignfull .wp-block-navigation,
	.home .wp-block-group.alignfull .wp-block-navigation__container {
		gap: 32px;
		flex-wrap: nowrap !important;
	}

	.wp-block-group.alignfull>.wp-block-group:has(.wp-block-navigation) {
		margin-left: 0;
	}

	/* Merged: padding-right from earlier 1440px rule */
	.hero-top-bar {
		padding-left: 19px;
		padding-right: 15px;
		padding-top: 35px;
		gap: 60px;
	}

	.hero-navigation-block-wrapper {
		top: 100px;
		left: 280px;
		max-width: calc(100vw - 280px);
	}

	.hero-navigation {
		max-width: calc(100vw - 320px);
	}

	.hero-navigation .wp-block-navigation,
	.hero-navigation .wp-block-navigation__responsive-container,
	.hero-navigation .wp-block-navigation__responsive-dialog,
	.hero-navigation .wp-block-navigation__responsive-container-content {
		max-width: calc(100vw - 320px);
	}

	/* REQUIRED: !important to override WP Navigation block default flex-wrap for hero nav wrapper */
	.hero-navigation-block-wrapper .wp-block-navigation,
	.hero-navigation-block-wrapper .wp-block-navigation__container {
		gap: 32px;
		flex-wrap: nowrap !important;
	}

	/* REQUIRED: !important to prevent hero nav link text wrapping at 1440px viewport */
	.hero-navigation-block-wrapper .wp-block-navigation-item a {
		font-size: var(--wp--custom--fontSize--lg);
		white-space: nowrap !important;
		padding: 12px 10px;
	}

	.hero-navigation-block-wrapper .wp-block-button.is-style-wave {
		margin-left: 0;
	}

	.hero-navigation-block-wrapper .wp-block-navigation>ul.wp-block-navigation__container>li.wp-block-navigation-item:last-child a {
		padding: 10px 20px;
	}

	.wp-container-core-columns-is-layout-e524df8a {
		padding-left: 80px;
	}

	.wp-container-core-columns-is-layout-6886708d {
		padding-left: 80px;
		padding-right: 80px;
	}

	.wp-container-core-group-is-layout-88b8a797 {
		padding-left: 20px;
		padding-right: 80px;
	}

	.service-areas-expertise-content {
		padding-left: 20px;
		padding-right: 80px;
	}

	/* Leadership modal - smaller at 1440px */
	.leadership-modal__container {
		max-width: 1200px;
		margin: 60px auto;
	}

	.leadership-modal__content {
		gap: 60px;
		padding: 60px 48px;
	}

	.leadership-modal__photo {
		width: 420px;
		height: 516px;
	}

	.leadership-modal__badge {
		left: 140px;
	}
}

/* Become a Lifeguard button in hero navigation - only last item */
/* Gap is handled by navigation container - no extra margin needed */
.hero-navigation-block-wrapper .wp-block-button.is-style-wave {
	margin-left: 0;
}

.hero-navigation-block-wrapper .wp-block-navigation>ul.wp-block-navigation__container>li.wp-block-navigation-item:last-child a {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	color: var(--wp--preset--color--theme-02);
	padding: 10px 20px;
	border-radius: var(--wp--custom--border--rounded-xl);
	text-transform: capitalize;
	transition: background-image 0.2s ease;
}

.hero-navigation-block-wrapper .wp-block-navigation>ul.wp-block-navigation__container>li.wp-block-navigation-item:last-child a:hover {
	background-image: url('/wp-content/uploads/2025/12/yellow-wave-flipped.png');
	color: var(--wp--preset--color--theme-03);
}

.home-hero-carousel {
	position: relative;
	width: 100%;
	min-height: 90vh !important;
	/* REQUIRED: override inline styles from WP database */
	height: 90vh;
}

.home-hero-carousel .carousel-slides {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.home-hero-carousel .carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
}

/* Only first slide visible - carousel is static, no transitions */
.home-hero-carousel .carousel-slide:first-child {
	opacity: 1;
	visibility: visible;
}

.home-hero-carousel .carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero video styles */
.home-hero-carousel .carousel-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

/* Show desktop video on desktop, mobile video on mobile */
.hero-video-mobile {
	display: none;
}

@media (max-width: 768px) {
	.hero-video-desktop {
		display: none;
	}

	.hero-video-mobile {
		display: block;
	}
}

.home-hero-carousel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgb(26, 78, 162) 0%, rgba(26, 79, 163, 0) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Hero carousel background - Solutions page and other hero carousels */
.hero-carousel-background {
	position: relative;
	width: 100%;
	min-height: 75vh;
	height: 75vh;
}

.hero-carousel-background .carousel-slides {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hero-carousel-background .carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}

.hero-carousel-background .carousel-slide.is-active {
	opacity: 1;
}

.hero-carousel-background .carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #1a4ea2 0%, rgba(26, 78, 162, 0.9) 20%, rgba(26, 78, 162, 0.6) 40%, rgba(26, 78, 162, 0) 60%, rgba(26, 78, 162, 0) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Apply reversed gradient to about page hero - works for both new and existing pages */
body .about-hero-wrapper .home-hero-carousel-overlay,
body .about-hero-wrapper .about-hero-overlay {
	background: linear-gradient(180deg, #1a4ea2 0%, rgba(26, 78, 162, 0.9) 20%, rgba(26, 78, 162, 0.6) 40%, rgba(26, 78, 162, 0) 60%, rgba(26, 78, 162, 0) 100%);
}

.home-hero-carousel-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0;
}

.hero-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20) 0;
	padding-left: 55px;
	padding-right: 55px;
	padding-top: 19px;
	gap: 134px;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 100;
}

/* At 1920px+, increase right padding to keep button away from edge */
@media (min-width: 1920px) {
	.hero-top-bar {
		padding-right: 80px;
	}
}

/* Hero top bar responsive gap overrides - MUST come after base rule to apply */
/* ==========================================================================
   Hero Navigation Progressive Responsive Scaling (1850px down to 1460px)
   These override the gap: 134px base rule defined above.
   Also includes hero-navigation internal gap overrides to prevent button overflow.
   REQUIRED: !important declarations throughout these breakpoints override
   WP Navigation/Button block inline styles for progressive gap and padding
   reduction as viewport narrows from 1850px to 1460px.
   ========================================================================== */

@media (max-width: 1850px) {
	.hero-top-bar {
		gap: 80px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.hero-logo {
		width: 220px;
	}
}

@media (max-width: 1700px) {
	.hero-top-bar {
		gap: 40px;
		padding-left: 30px;
		padding-right: 30px;
	}

	.hero-logo {
		width: 200px;
	}

	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned,
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 28px !important;
	}
}

@media (max-width: 1600px) {
	.hero-top-bar {
		gap: 25px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.hero-logo {
		width: 180px;
	}

	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned,
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 20px !important;
	}

	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		padding: 10px 12px !important;
	}
}

/* 1512px-1560px specific: reduce gaps and padding to prevent button overflow */
/* CRITICAL: overflow-y: visible required for dropdown submenus to display */
@media (min-width: 1512px) and (max-width: 1560px) {
	.hero-top-bar {
		padding-right: 15px;
		overflow-x: clip;
		overflow-y: visible;
	}

	body .hero-navigation {
		max-width: calc(100% - 180px);
		/* Account for logo width */
		overflow-x: clip;
		overflow-y: visible;
	}

	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned,
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 12px !important;
	}

	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		padding: 8px 10px !important;
		font-size: var(--wp--custom--fontSize--md-sm) !important;
	}
}

@media (max-width: 1511px) {
	.hero-top-bar {
		gap: 15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.hero-logo {
		width: 165px;
	}

	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned,
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 14px !important;
	}

	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		padding: 8px 10px !important;
		font-size: var(--wp--custom--fontSize--md-sm) !important;
	}
}

@media (max-width: 1500px) {
	.hero-top-bar {
		gap: 10px;
		padding-left: 12px;
		padding-right: 12px;
	}

	.hero-logo {
		width: 150px;
	}

	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned,
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 10px !important;
	}

	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		padding: 8px 8px !important;
		font-size: var(--wp--preset--font-size--medium) !important;
	}
}

@media (max-width: 1460px) {
	.hero-top-bar {
		gap: 8px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.hero-logo {
		width: 140px;
	}

	body .hero-navigation,
	body .hero-navigation .hero-nav-cloned,
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 6px !important;
	}

	.hero-navigation .hero-nav-cloned a,
	.hero-navigation .hero-nav-buttons-cloned .wp-block-button__link {
		padding: 6px 6px !important;
		font-size: var(--wp--custom--fontSize--base-lg) !important;
	}
}

/* Hero cover section - Desktop min-height 90vh */
@media (min-width: 1024px) {

	.page-template-page-hero .hero-cover-section,
	.page-template-page-hero-carousel .hero-cover-section,
	body.single-operations .hero-cover-section {
		min-height: 90vh !important;
		/* REQUIRED: override inline styles from WP database */
	}
}

/* Hide cover block's built-in overlay - we use our own gradient instead */
/* REQUIRED: !important to override WP Cover block default overlay opacity */
.hero-cover-section .wp-block-cover__background {
	opacity: 0 !important;
}

/* Default gradient overlay for hero sections - matches homepage gradient */
.hero-cover-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(rgb(26, 78, 162) 0%, rgba(26, 78, 162, 0) 100%);
	z-index: 1;
	pointer-events: none;
}

/* REQUIRED: !important to override WP Cover block default relative positioning for full-cover inner container */
.hero-cover-section .wp-block-cover__inner-container {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
	/* Above the gradient overlay */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.hero-cover-section .hero-top-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.hero-logo {
	width: 240px;
	flex-shrink: 0;
	transition: width 0.3s ease-in-out;
}

@media (max-width: 1568px) {
	.hero-logo {
		width: 190px;
		flex-shrink: 0;
		transition: width 0.3s ease-in-out;
	}
}

.hero-logo a {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	pointer-events: all;
}

/* Make Outermost Icon Block clickable in hero sections */
.wp-block-outermost-icon-block {
	cursor: pointer;
}

.wp-block-outermost-icon-block .icon-container {
	pointer-events: all;
}

/* NOTE: Main .hero-navigation styles are defined earlier (line ~3684) */
/* This rule supplements with additional properties */
/* flex: 0 1 auto to prevent expanding to fill space - keeps buttons away from viewport edge */
.hero-navigation {
	flex: 0 1 auto;
	max-width: calc(100vw - 380px);
	flex-wrap: nowrap;
	overflow: visible;
}

/* At 1920px+, increase spacing from right edge */
@media (min-width: 1920px) {
	.hero-navigation {
		max-width: calc(100vw - 480px);
	}
}

.hero-navigation .wp-block-navigation {
	gap: 32px;
	flex-shrink: 0;
}

.hero-navigation .wp-block-navigation__container {
	gap: 32px;
}

body .hero-navigation .wp-block-navigation-item a {
	color: white;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 22px;
	white-space: nowrap;
}

.hero-navigation .wp-block-navigation-item a:hover {
	opacity: 0.8;
}

/* Legacy Become a Lifeguard button styling - only applies if lifeguard link is in navigation items */
body .hero-navigation .wp-block-navigation-item>a[href*="become-a-lifeguard"],
.hero-navigation .wp-block-navigation-item>a[href*="lifeguard"] {
	background-color: var(--wp--preset--color--theme-04);
	color: var(--wp--preset--color--theme-02);
	padding: 10px 20px;
	border-radius: var(--wp--custom--border--rounded-xl);
	text-transform: capitalize;
}

body .hero-navigation .wp-block-navigation-item>a[href*="become-a-lifeguard"]:hover,
.hero-navigation .wp-block-navigation-item>a[href*="lifeguard"]:hover {
	opacity: 1;
	background-color: #fcd45f;
}

.hero-logo svg {
	width: 100%;
	height: auto;
	fill: white;
}

/* Hide page title on front page (hero has its own heading) */
body.home .wp-block-post-title,
body.page-template-front-page .wp-block-post-title {
	display: none;
}

.hero-bottom-content {
	padding-bottom: var(--wp--preset--spacing--50);
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: auto;
}

.hero-bottom-content h1 {
	color: var(--wp--preset--color--white);
	text-align: center;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--custom--fontSize--7xl);
	font-style: normal;
	font-weight: 700;
	line-height: 115px;
	letter-spacing: 3.08px;
	text-transform: uppercase;
	margin: 0;
	max-width: 100%;
	width: 100%;
}

/* REMOVED: Red hero carousel indicator dots - display: none to completely hide */
.home-hero-carousel-dots {
	display: none !important;
	/* Red dots removed per design decision */
}

/* REMOVED: Red hero carousel indicator dots for interior pages */
.hero-carousel-dots {
	display: none !important;
	/* Red dots removed per design decision */
}

.hero-carousel-dots .carousel-dot {
	min-width: 14px;
	min-height: 19px;
	width: 14px;
	height: 19px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	transition: all 0.3s ease;
	cursor: default;
	pointer-events: none;
}

.hero-carousel-dots .carousel-dot.is-active {
	width: 102px;
}

.hero-carousel-dots .carousel-dot::after {
	background: #d94040;
	opacity: 1;
	border: none;
	width: 14px;
	height: 14px;
	border-radius: var(--wp--custom--border--rounded-sm-lg);
	transition: all 0.3s ease;
	position: static;
	transform: none;
	display: block;
	content: '';
}

.hero-carousel-dots .carousel-dot.is-active::after {
	background: #d94040;
	opacity: 1;
	width: 102px;
	height: 19px;
	border-radius: 9.5px;
	position: static;
	transform: none;
	display: block;
	content: '';
}

/* Show only 4 dots total (1 long indicator + 3 short dots) - hide 5th and beyond */
.hero-carousel-dots .carousel-dot:nth-child(n+5) {
	display: none;
}

/* Hide hero carousel dots on pages with header-small (non-hero pages) */
body:has(.site-header-small) .hero-carousel-dots {
	display: none !important;
}

/* Show red indicator dots on hero template pages */
/* Position dots at bottom of hero cover using :has() to anchor to hero-cover-section */
.page-template-page-hero .hero-carousel-dots,
.page-template-page-hero-carousel .hero-carousel-dots {
	display: none !important;
	/* Hide by default, we'll use the hero-cover-section pseudo-element instead */
}

/* Interior hero pages - position header-hero template part over the hero cover */
/* The header is a sibling of main, so we position it absolutely over the hero */
body:has(.hero-cover-section) header:has(.hero-top-bar) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100001;
	pointer-events: none;
}

body:has(.hero-cover-section) header:has(.hero-top-bar) .hero-top-bar {
	pointer-events: auto;
}

body:has(.hero-cover-section) header:has(.hero-top-bar) .hero-mobile-nav-wrapper {
	pointer-events: auto;
}

body:has(.hero-cover-section) header:has(.hero-top-bar) .hero-navigation-block-wrapper {
	pointer-events: auto;
}

/* Announcement banner offset - push header below banner when visible */
/* Homepage: header offset parent is body, so we need top: 78px to position below banner */
body.home:has(#announcement-banner:not([style*="display: none"]):not([style*="display:none"])):has(.hero-cover-section) header:has(.hero-top-bar),
body.home:has(.announcement-banner:not([style*="display: none"]):not([style*="display:none"])):has(.hero-cover-section) header:has(.hero-top-bar) {
	top: 78px;
}

/* Interior pages: header offset parent is already below banner, so top: 0 is correct */
body:not(.home):has(#announcement-banner:not([style*="display: none"]):not([style*="display:none"])):has(.hero-cover-section) header:has(.hero-top-bar),
body:not(.home):has(.announcement-banner:not([style*="display: none"]):not([style*="display:none"])):has(.hero-cover-section) header:has(.hero-top-bar) {
	top: 0;
}

/* REMOVED: Hero Indicator Dots - Red dots removed per design decision */
.hero-indicator-dots {
	display: none !important;
	/* Red dots removed per design decision */
}

.hero-dot {
	width: 12px;
	height: 12px;
	border-radius: var(--wp--custom--border--rounded-full);
	background-color: var(--wp--preset--color--theme-05, #d22730);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	opacity: 0.5;
}

.hero-dot.active {
	width: 60px;
	height: 16px;
	border-radius: var(--wp--custom--border--rounded-small);
	background-color: var(--wp--preset--color--theme-05, #d22730);
	opacity: 1;
}

.hero-dot:hover {
	opacity: 0.8;
}

/* Ensure page-intro-section stays below header on non-hero pages */
body:has(.site-header-small) .page-intro-section {
	position: relative;
	z-index: 1;
}

/* Home hero carousel dots - sizing moved to accessibility section below (line ~2922) */

/* Home About Section (Intro) */
.has-theme-01-background-color.has-texture-bg {
	min-height: 569px;
	position: relative;
	z-index: 1;
}

.has-theme-01-background-color.has-texture-bg .wp-block-separator {
	margin-left: 0;
	margin-right: auto;
}

/* Home About Section - Figma exact spacing */
body .home-about-section {
	padding-top: 182px;
	padding-bottom: 182px;
}

/* Heading - force break after "YOUR POOL IS" */
body .home-about-section .wp-block-heading {
	margin-bottom: 0;
	max-width: 454px;
}

body .home-about-section .wp-block-separator {
	margin-top: 19px;
	margin-bottom: 0;
	width: 224px;
	max-width: 224px;
}

/* Paragraph - 690px max width from Figma */
.home-about-section p.has-black-color {
	max-width: 690px;
}

/* Home About Section - add horizontal margin at laptop viewports (60px each side) */
/* Target the inner alignwide grid element which uses auto margins */
@media (max-width: 1512px) and (min-width: 1025px) {
	body .home-about-section .wp-block-group.alignwide.is-style-kindling-grid-system {
		max-width: calc(100% - 120px) !important;
		margin-left: 60px !important;
		margin-right: 60px !important;
	}
}

@media (min-width: 1440px) {

	/* Solutions Section - headings with exact Figma styling */
	/* H2 "Our Solutions": 50px, line-height 60px, letter-spacing 1.5px */
	.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h2.wp-block-heading {
		font-size: 50px !important;
		line-height: 60px !important;
		letter-spacing: 1.5px;
		white-space: nowrap;
	}
}



@media (max-width: 430px) {

	/* Solutions Section - headings with exact Figma styling */
	/* H2 "Our Solutions": 50px, line-height 60px, letter-spacing 1.5px */
	.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h2.wp-block-heading {
		font-size: 35px !important;
		line-height: normal !important;
	}
}



/* H3 (card titles): 40px, line-height 60px, letter-spacing 1.2px, Sansation Bold */
.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h3.wp-block-heading,
.solutions-section-cover .solutions-card-new h3.wp-block-heading,
.solutions-section-cover h3.wp-block-heading,
.our-solutions-section h3.wp-block-heading,
.single-operations .our-solutions-section h3.wp-block-heading {
	font-size: 40px !important;
	line-height: 60px !important;
	letter-spacing: 1.2px;
	font-family: var(--wp--preset--font-family--sansation), Sansation, sans-serif;
	font-weight: 700;
	white-space: nowrap;
}

/* Body text (cards): 20px, line-height 30px, Inter Regular */
.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container p,
.solutions-section-cover .solutions-card-new p,
.solutions-section-cover p:not(.solutions-read-more),
.our-solutions-section .solutions-card-new p:not(.solutions-read-more) {
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 30px !important;
	font-family: var(--wp--preset--font-family--inter), Inter, sans-serif;
	font-weight: 400;
}

/* 1440px: Allow solutions card titles to wrap to prevent "REPAIR & RENOVAT..." truncation */
@media (max-width: 1440px) {

	.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h3.wp-block-heading,
	.solutions-section-cover .solutions-card-new h3.wp-block-heading,
	.solutions-section-cover h3.wp-block-heading,
	.our-solutions-section h3.wp-block-heading {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/* Our Solutions: Responsive card heading sizes */
/* REQUIRED: !important to override inline styles from pattern */
@media (max-width: 1530px) {

	.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h3.wp-block-heading,
	.solutions-section-cover .solutions-card-new h3.wp-block-heading,
	.solutions-section-cover h3.wp-block-heading,
	.our-solutions-section h3.wp-block-heading,
	.single-operations .our-solutions-section h3.wp-block-heading {
		font-size: 36px !important;
		line-height: 54px !important;
	}
}

@media (max-width: 1440px) {

	.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h3.wp-block-heading,
	.solutions-section-cover .solutions-card-new h3.wp-block-heading,
	.solutions-section-cover h3.wp-block-heading,
	.our-solutions-section h3.wp-block-heading,
	.single-operations .our-solutions-section h3.wp-block-heading {
		font-size: 32px !important;
		line-height: 48px !important;
	}
}

@media (max-width: 1200px) {

	.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h3.wp-block-heading,
	.solutions-section-cover .solutions-card-new h3.wp-block-heading,
	.solutions-section-cover h3.wp-block-heading,
	.our-solutions-section h3.wp-block-heading,
	.single-operations .our-solutions-section h3.wp-block-heading {
		font-size: 28px !important;
		line-height: 42px !important;
	}
}

.solutions-card-new .wp-block-image img {
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 617 / 645;
	object-fit: cover;
	display: block;
}

/* Home Service Areas Section */
.service-areas-section {
	min-height: auto;
	padding-bottom: 80px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Desktop min-height for Service Areas - prevents overflow */
@media (min-width: 1024px) {
	.service-areas-section {
		min-height: 997px;
	}

	/* Vertically center the columns container */
	.service-areas-section .wp-block-columns {
		align-items: center;
	}
}

/* Tablet: reduced min-height */
@media (min-width: 768px) and (max-width: 1023px) {
	.service-areas-section {
		min-height: 700px;
	}
}

.service-areas-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/wp-content/uploads/2025/12/water-ripple-texture.webp') no-repeat center center;
	background-size: cover;
	opacity: 0.39;
	z-index: 0;
}

/* Fallback for browsers without WebP support */
@supports not (background-image: -webkit-image-set(url('/wp-content/uploads/2025/12/water-ripple-texture.webp') 1x)) {
	.service-areas-section::before {
		background: url('/wp-content/uploads/2025/12/water-ripple-texture.jpg') no-repeat center center;
		background-size: cover;
	}
}

.service-areas-section>* {
	position: relative;
	z-index: 1;
}

/* Home Service Areas Carousel - pagination dots below carousel, centered */
/* REQUIRED: !important to override Splide plugin styles */
.home-service-areas-carousel .splide__pagination {
	position: relative !important;
	bottom: auto !important;
	padding: 0 !important;
	gap: 12px !important;
	margin-top: 24px !important;
	justify-content: center !important;
	display: flex !important;
}

/* Touch target - 17x17px matching home-gallery-section */
/* REQUIRED: !important to override Splide plugin styles */
.home-service-areas-carousel .splide__pagination__page {
	min-width: 17px !important;
	min-height: 17px !important;
	width: 17px !important;
	height: 17px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
	background-color: transparent;
	border: none !important;
	opacity: 1 !important;
	transform: none;
	flex-shrink: 0 !important;
}

/* Visual dot via ::after - 18x18px with blue border */
/* REQUIRED: !important to override Splide plugin styles */
.home-service-areas-carousel .splide__pagination__page::after {
	content: '';
	width: 18px !important;
	height: 18px !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none !important;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02) !important;
}

/* Active/hover state - filled blue */
.home-service-areas-carousel .splide__pagination__page:hover::after,
.home-service-areas-carousel .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Service Areas Carousel (kindling/carousel) - Blue outlined dots matching job-fit-carousel */
.service-areas-carousel .splide__pagination {
	position: relative;
	bottom: auto;
	padding: 0;
	gap: 12px;
	margin-top: 24px;
	justify-content: center;
	display: flex;
}

.service-areas-carousel .splide__pagination__page {
	min-width: 17px;
	min-height: 17px;
	width: 17px;
	height: 17px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	cursor: pointer;
	opacity: 1;
}

.service-areas-carousel .splide__pagination__page::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02);
	transition: background-color 0.3s ease;
	pointer-events: none;
}

.service-areas-carousel .splide__pagination__page:hover::after,
.service-areas-carousel .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Carousel container - ensure proper height and no excess spacing */
.home-service-areas-carousel {
	margin-bottom: 0;
}

.home-service-areas-carousel .splide__slide {
	height: 400px;
}

.home-service-areas-carousel .carousel-slide {
	height: 100%;
}

.home-service-areas-carousel .carousel-slide .wp-block-image {
	height: 100%;
	margin: 0;
}

.home-service-areas-carousel .carousel-slide .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Home Service Areas Carousel - Flush right at all viewports */
@media (min-width: 768px) {

	/* Section container - full viewport width, override WP constrained layout */
	.service-areas-section {
		width: 100vw !important;
		max-width: 100vw !important;
		/* Position to reach both viewport edges */
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		position: relative;
		overflow: hidden;
	}

	/* Columns container - override WP layout constraints */
	.service-areas-section .wp-block-columns.has-2-columns {
		display: flex !important;
		align-items: center;
		gap: 0 !important;
		max-width: none !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Text column - 50% width for consistent 50/50 layout */
	.service-areas-section .wp-block-columns.has-2-columns>.wp-block-column:first-child {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
		padding-left: max(calc((100vw - 1280px) / 2), 40px);
		padding-right: 30px;
		box-sizing: border-box;
	}

	/* Carousel column - 50% width for consistent 50/50 layout */
	.service-areas-section .wp-block-columns.has-2-columns>.wp-block-column:last-child {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Carousel container fills column */
	.home-service-areas-carousel {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	/* Remove Splide padding so carousel extends to edge */
	.home-service-areas-carousel .splide {
		padding: 0 !important;
	}

	/* Carousel images fill the space */
	.home-service-areas-carousel .splide__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Desktop adjustments - maintain 50/50 layout */
@media (min-width: 1024px) {
	.service-areas-section .wp-block-columns.has-2-columns>.wp-block-column:first-child {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}
}

/* Large desktop - 1440px+ - maintain 50/50 layout */
@media (min-width: 1440px) {
	.service-areas-section .wp-block-columns.has-2-columns>.wp-block-column:first-child {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
		padding-left: calc((100vw - 1280px) / 2);
	}
}

/* Home Service Areas Carousel - 1920px+ specific sizing per Figma: 952x714px, flush right */
@media (min-width: 1920px) {

	/* Section spans full viewport, flush right */
	.service-areas-section {
		width: 100vw !important;
		max-width: none !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Grid container - full width, flush right */
	.service-areas-section .is-style-kindling-grid-system {
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
		display: flex !important;
		gap: 80px !important;
	}

	/* Text column (first grid item) - 50% width for consistent layout */
	.service-areas-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
		padding-left: max(calc((100vw - 1280px) / 2), 80px);
	}

	/* Carousel column (last grid item) - 50% width for consistent layout */
	.service-areas-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:last-child {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
		margin-right: 0 !important;
		padding-right: 0 !important;
	}

	/* Carousel container - fills 50% column */
	.home-service-areas-carousel {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
	}

	/* Splide track flush right */
	.home-service-areas-carousel .splide__track {
		margin-right: 0 !important;
		padding-right: 0 !important;
	}

	.home-service-areas-carousel .splide__slide {
		width: 952px !important;
		height: 714px !important;
	}

	.home-service-areas-carousel .splide__slide img {
		width: 952px !important;
		height: 714px !important;
		object-fit: cover;
	}
}

/* Home Mission Section */
.home-mission-section {
	min-height: 938px;
}

/* Home Gallery Section */
.home-gallery-section {
	overflow: hidden;
}

.home-gallery-section .wp-block-cover__inner-container {
	max-width: 100%;
	overflow: hidden;
}

.home-gallery-section h2 {
	max-width: 100%;
}

/* Ensure carousel wrapper clips splide clones */
.home-gallery-section .wp-block-kindling-carousel {
	overflow: hidden;
	max-width: 100%;
	contain: paint;
}

.home-gallery-section .splide {
	overflow: hidden;
	contain: paint;
}

.home-gallery-section .kindling-carousel-container {
	overflow: hidden;
	contain: layout paint;
	padding-left: 0;
	padding-right: 0;
}

/* Consistent image dimensions in home gallery carousel */
.home-gallery-section .splide__slide {
	height: 485px !important;
}

.home-gallery-section .splide__slide .carousel-slide,
.home-gallery-section .splide__slide figure {
	height: 100% !important;
	margin: 0;
}

.home-gallery-section .splide__slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Texture overlay for home gallery cover block - must be above white overlay */
.home-gallery-section.has-texture-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2026/01/section-intro__pattern_10opacity.jpg') center / cover no-repeat;
	pointer-events: none;
	z-index: 2;
}

.home-gallery-section.has-texture-bg .wp-block-cover__inner-container {
	z-index: 3;
}

/* Service Areas Facility Grid Cards */
/* Container - 1200px to hold two 584px cards + 32px gap */
.service-areas-facility-grid>.wp-block-group {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Heading - single line, centered */
.service-areas-facility-grid h2.has-text-align-center {
	text-align: center;
	white-space: nowrap;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Equal height for all columns - exact Figma dimensions */
.service-areas-facility-grid .wp-block-columns {
	align-items: stretch;
	display: flex;
	gap: 32px;
	margin-bottom: 72px;
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.service-areas-facility-grid .wp-block-columns:last-of-type {
	margin-bottom: 0;
}

.service-areas-facility-grid .wp-block-column {
	display: flex;
	flex: 1 1 calc(50% - 16px);
	max-width: 584px;
	min-width: 280px;
}

/* Card wrapper - full height */
.service-areas-facility-grid .wp-block-column>.wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Images - responsive with Figma aspect ratio */
.service-areas-facility-grid .wp-block-image {
	width: 100%;
	aspect-ratio: 584 / 329;
	margin: 0;
	flex-shrink: 0;
	overflow: hidden;
}

.service-areas-facility-grid .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Text area - responsive with minimum height */
.service-areas-facility-grid .wp-block-group.has-theme-07-background-color {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ==========================================================================
   Operations Facility Grid - Equal Height Cards
   Used by * Image Quad Operations pattern
   ========================================================================== */

/* Container - constrained width */
.operations-facility-grid>.wp-block-columns {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Columns - equal height stretch */
.operations-facility-grid .wp-block-columns {
	align-items: stretch;
	display: flex;
	gap: 32px;
}

/* Column - flex container */
.operations-facility-grid .wp-block-column {
	display: flex;
	flex: 1 1 calc(50% - 16px);
	max-width: 584px;
}

/* Card wrapper - full height flex column */
.operations-facility-grid .wp-block-column>.wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/* Image - fixed aspect ratio, no shrink */
.operations-facility-grid .wp-block-image {
	width: 100%;
	aspect-ratio: 584 / 329;
	margin: 0;
	flex-shrink: 0;
	overflow: hidden;
}

.operations-facility-grid .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Text area container - flex grow to fill remaining space */
.operations-facility-grid .wp-block-group.has-theme-07-background-color>.wp-block-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* Description paragraph - flex grow to push content evenly */
.operations-facility-grid .wp-block-group.has-theme-07-background-color p {
	flex-grow: 1;
}

/* Mobile - stack columns */
@media (max-width: 768px) {
	.operations-facility-grid .wp-block-columns {
		flex-direction: column;
		gap: 40px;
	}

	.operations-facility-grid .wp-block-column {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Operations Facility Grid - Enhanced Mobile Styles (match Service Areas) */
@media (max-width: 781px) {
	.operations-facility-grid {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.operations-facility-grid .wp-block-columns {
		flex-direction: column;
		gap: 24px;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.operations-facility-grid .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	/* Card text area - full width rounded corners */
	.operations-facility-grid .wp-block-group.has-theme-07-background-color {

		padding: 0 0 16px;
	}

	/* Card images - proper proportions */
	.operations-facility-grid .wp-block-image {

		overflow: hidden;
	}

	.operations-facility-grid .wp-block-image img {
		object-fit: cover;
		width: 100%;
		height: auto;
		min-height: 180px;
		max-height: 280px;
		aspect-ratio: auto;
	}

	/* Heading styles */
	.operations-facility-grid h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px);
		line-height: 1.15;
		padding-left: 0;
		padding-right: 0;
	}

	/* Card headings */
	.operations-facility-grid .wp-block-group h3.wp-block-heading {
		font-size: clamp(16px, 4.5vw, 20px);
		line-height: 1.2;
		margin-bottom: 8px;
	}

	/* Card paragraphs */
	.operations-facility-grid .wp-block-group.has-theme-07-background-color p {
		font-size: clamp(14px, 3.5vw, 16px);
		line-height: 1.5;
	}
}

/* Home Dual CTA Section */
.home-cta-dual-section {
	margin-top: 20px;
	gap: 20px;
}

.home-cta-dual-section .wp-block-cover__inner-container>p {
	max-width: 552px;
	margin-left: auto;
	margin-right: auto;
}

/* Home Dual CTA buttons - layout, sizing, colors */
/* REQUIRED: !important to override inline and class-based styles */
.home-cta-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px !important;
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-full) !important;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Blue Wave Button Style */
.wp-block-button.is-style-outline.is-blue-wave {
	margin-top: 40px;
}

.wp-block-button.is-style-outline.is-blue-wave .wp-block-button__link {
	background-image: url('/wp-content/uploads/2025/12/blue-wave.png');
	background-size: cover;
	background-position: center;
	border: 2px solid var(--wp--preset--color--theme-03);
	border-radius: var(--wp--custom--border--rounded-2xl);
	color: white;
	font-family: var(--wp--preset--font-family--sansation);
	font-size: var(--wp--custom--fontSize--xl-lg);
	font-weight: 700;
	text-transform: capitalize;
	padding: 12px 52px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 150px;
}

/**
 * 7.0 Mobile Responsive Styles
 */

/* Service Areas Facility Grid - Responsive Styles */
@media (max-width: 1024px) {
	.service-areas-facility-grid .wp-block-columns {
		gap: 24px;
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 768px) {
	.service-areas-facility-grid .wp-block-columns {
		flex-direction: column;
		gap: 40px;
		margin-bottom: 40px;
	}

	.service-areas-facility-grid .wp-block-column {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 100%;
	}
}

/* Home Service Areas Carousel - Mobile */
@media (max-width: 768px) {
	.home-service-areas-carousel .splide__slide {
		height: 300px;
	}

	/* Keep dots below carousel on mobile, just reduce gap */
	.home-service-areas-carousel .splide__pagination {
		gap: 10px !important;
		margin-top: 16px !important;
	}

	.home-service-areas-carousel .splide__pagination__page {
		min-width: 14px !important;
		min-height: 14px !important;
		width: 14px !important;
		height: 14px !important;
	}

	.home-service-areas-carousel .splide__pagination__page::after {
		width: 14px !important;
		height: 14px !important;
	}

	/* Home Gallery Carousel - Mobile consistent heights */
	.home-gallery-section .splide__slide {
		height: 300px !important;
	}
}

/* Home Gallery Carousel - Tablet consistent heights */
@media (min-width: 769px) and (max-width: 1024px) {
	.home-gallery-section .splide__slide {
		height: 380px !important;
	}
}

/* Contact Hero Form - Mobile Responsive - overriding desktop layout */
@media (max-width: 768px) {

	/* Stack columns on mobile */
	body .has-droplet-bg .wp-block-columns {
		flex-direction: column;
	}

	/* Remove absolute positioning on image column for mobile */
	body .has-droplet-bg .wp-block-column:last-child {
		position: relative;
		width: 100%;
		top: auto;
		right: auto;
		bottom: auto;
		height: 400px;
		/* Fixed height for mobile image */
	}

	/* Form column - full width on mobile */
	body .has-droplet-bg .wp-block-column:first-child {
		width: 100%;
		flex-basis: 100%;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	/* Ensure image maintains aspect ratio on mobile */
	body .has-droplet-bg .wp-block-column:last-child img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
}

/* Gravity Forms - Touch Target Optimization for Mobile */
/* REQUIRED: Overriding Gravity Forms plugin inline styles */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="number"],
body .gform_wrapper textarea,
body .gform_wrapper select {
	min-height: 44px !important;
	padding: 12px 16px !important;
	/* REQUIRED: !important to override Gravity Forms plugin inline styles */
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: 1.5;
	border: 1px solid #d1d5db !important;
	border-radius: var(--wp--custom--border--rounded-small) !important;
	background-color: var(--wp--preset--color--white);
	color: #1f2937;
	font-family: var(--wp--preset--font-family--inter);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Input focus states */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--theme-02);
	/* REQUIRED: !important to override Gravity Forms plugin styles */
	box-shadow: 0 0 0 3px rgba(26, 78, 162, 0.1) !important;
}

/* Textarea specific styling */
.gform_wrapper textarea {
	min-height: 120px !important;
	resize: vertical !important;
}

/* Placeholder styling */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: #9ca3af;
	/* REQUIRED: !important to override browser default */
	opacity: 1 !important;
}

/* Select dropdown styling */
.gform_wrapper select {
	appearance: none !important;
	/* REQUIRED: !important to override Gravity Forms plugin styles */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234E4B48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 36px !important;
}

/* Ensure labels are readable and match Figma design */
body .gform_wrapper .gfield_label {
	font-size: var(--wp--custom--fontSize--base-sm);
	font-weight: 600;
	margin-bottom: 8px !important;
	color: var(--wp--preset--color--theme-06);
	font-family: var(--wp--preset--font-family--inter);
	display: block;
}

/* Submit button - consistent styling across all forms matching Figma design */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button[type="submit"],
body .gform_wrapper .gform_button,
body .gform_wrapper input.gform_button {
	display: inline-flex;
	width: auto !important;
	min-width: 180px !important;
	padding: 12px 32px !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	min-height: 48px !important;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	/* REQUIRED: !important to override Gravity Forms plugin styles */
	border-radius: var(--wp--custom--border--rounded-small) !important;
	border: none !important;
	cursor: pointer !important;
	text-align: center;
	box-sizing: border-box !important;
	background-color: var(--wp--preset--color--theme-02);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	text-transform: none;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Submit button hover state */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer button[type="submit"]:hover,
body .gform_wrapper .gform_button:hover,
body .gform_wrapper input.gform_button:hover {
	background-color: #153a7a;
	transform: translateY(-1px);
}

/* Submit button active state */
body .gform_wrapper .gform_footer input[type="submit"]:active,
body .gform_wrapper .gform_footer button[type="submit"]:active,
body .gform_wrapper .gform_button:active,
body .gform_wrapper input.gform_button:active {
	transform: translateY(0);
}

/* Ensure checkbox/radio inputs have adequate touch targets */
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
	width: 22px !important;
	height: 22px !important;
	margin-right: 10px !important;
}

/* Form field spacing and layout */
.gform_wrapper .gfield {
	margin-bottom: 20px !important;
}

body .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column !important;
	gap: 20px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

@media (min-width: 768px) {
	#gform_1 {
		margin-top: 30px;
	}
}

/* Required field indicator styling */
.gform_wrapper .gfield_required {
	color: var(--wp--preset--color--theme-05);
	margin-left: 4px !important;
}

/* Validation error states */
.gform_wrapper .gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--wp--preset--color--theme-05);
	background-color: #fef2f2;
}

.gform_wrapper .gfield_error .gfield_label {
	color: var(--wp--preset--color--theme-05);
}

.gform_wrapper .validation_message {
	color: var(--wp--preset--color--theme-05);
	font-size: var(--wp--custom--fontSize--base-sm);
	margin-top: 6px !important;
	font-family: var(--wp--preset--font-family--inter);
}

/* Form footer alignment */
.gform_wrapper .gform_footer {
	padding: 0 !important;
	margin-top: 24px !important;
}

/* Disabled field styling */
.gform_wrapper input:disabled,
.gform_wrapper textarea:disabled,
.gform_wrapper select:disabled {
	background-color: #f3f4f6;
	cursor: not-allowed !important;
	/* REQUIRED: !important to override Gravity Forms plugin styles */
	opacity: 0.6 !important;
}

/* Additional mobile optimization for smaller screens - REQUIRED: !important for mobile font scaling */
@media (max-width: 428px) {

	/* Heading font size adjustment */
	body .has-droplet-bg .wp-block-heading {
		font-size: var(--wp--custom--fontSize--4xl);
		line-height: 1.2;
	}

	/* Paragraph font size adjustment */
	body .has-droplet-bg p {
		font-size: var(--wp--custom--fontSize--lg);
		line-height: 1.5;
	}

	/* Reduce padding on smallest screens */
	body .has-droplet-bg .wp-block-column:first-child {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

/* iPhone SE and very small screens (320px) - REQUIRED: !important for mobile font scaling */
@media (max-width: 375px) {
	body .has-droplet-bg .wp-block-heading {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	body .has-droplet-bg p {
		font-size: var(--wp--preset--font-size--medium);
	}

	body .has-droplet-bg .wp-block-column:first-child {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}
}

/**
 * 7.0 Announcement Banner
 */
.announcement-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	text-align: center;
}

.announcement-banner p {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1;
}

#announcement-banner-close {
	position: absolute;
	right: var(--wp--preset--spacing--50);
}

/* Mobile line break in banner - hidden on desktop */
.mobile-break {
	display: none;
}

/* Announcement Banner - Mobile responsive typography */
@media (max-width: 428px) {
	.announcement-banner p {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.4;
		gap: 6px;
		flex-wrap: wrap;
		padding-right: 40px;
	}

	#announcement-banner {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}

	/* Ensure announcement close button doesn't overlap hamburger menu on mobile */
	#announcement-banner-close {
		right: 60px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 40;
	}
}

@media (max-width: 375px) {
	.announcement-banner p {
		font-size: var(--wp--custom--fontSize--base-lg);
		gap: 5px;
	}
}

@media (max-width: 320px) {
	.announcement-banner p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.3;
		gap: 4px;
	}

	#announcement-banner {
		padding-left: var(--wp--preset--spacing--20);
		padding-right: var(--wp--preset--spacing--20);
	}
}

/* Service Areas - Facility Grid Cards - REMOVED DUPLICATE (now at line 2472) */

/* Service Areas Map - left align text with heading */
.service-areas-map-image~.wp-block-group p,
.has-water-ripple-bg .wp-block-columns .wp-block-group.has-theme-02-background-color~.wp-block-group p {
	text-align: left;
}

/* Service Areas - Large Map Section with Counter Overlay */
.service-areas-map-section .service-areas-map-container {
	position: relative;
	min-height: 920px;
	overflow: visible;
}

.service-areas-map-section .service-areas-counter-overlay {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	max-width: 500px;
}

.service-areas-map-section .service-areas-map-image {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100vw - 25vw);
	max-width: none;
}

.service-areas-map-section .service-areas-map-image img {
	width: 100%;
	height: auto;
}

/* Counter boxes side by side */
/* REQUIRED: !important to override inline padding:0 from WordPress block editor */
.service-areas-counter-overlay>.wp-block-group.has-theme-02-background-color {
	display: flex;
	flex-direction: row;
	padding: 10px !important;
}

/* Text below stats box */
.service-areas-counter-overlay>p {
	margin-top: 16px;
}

/* Disclaimer text below the map */
/* REQUIRED: !important to override inline style from WP database content */
.service-areas-map-section>p.has-text-align-center {
	position: relative;
	z-index: 5;
	margin-top: 40px !important;
}

/* Responsive adjustments for Large Map */
@media (max-width: 1024px) {
	.service-areas-map-section .service-areas-counter-overlay {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin: 0 auto 24px;
		max-width: 100%;
	}

	.service-areas-map-section .service-areas-map-container {
		min-height: auto;
	}

	.service-areas-map-section .service-areas-map-image {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
	}
}

/* Mobile - reduce 150px margin-top on map disclaimer text to 30px */
@media (max-width: 781px) {
	.service-areas-map-section>p.has-text-align-center {
		margin-top: 30px !important;
	}
}

/* ==========================================================================
   Operations Map Section - Large Map with Text Overlay
   Heading, separator, description overlaid on top-left of centered map

   REQUIRED: !important declarations ensure separator width and alignment
   remain consistent regardless of block editor settings.
   ========================================================================== */

/* Operations Map - Container with relative positioning */
/* Updated: Reduced min-height after removing Leadership Team overlap */
.operations-map-section .operations-map-container {
	position: relative;
	min-height: 400px;
	overflow: visible;
}

/* Operations Map - Text content positioned top-left over map */
.operations-map-section .operations-map-text-content {
	position: absolute;
	left: var(--wp--preset--spacing--50);
	top: 0;
	z-index: 10;
	max-width: 450px;
}

/* Operations Map - Heading styling */
.operations-map-section .operations-map-text-content .wp-block-heading {
	margin-bottom: 16px;
}

/* Operations Map - Separator width and left alignment */
/* REQUIRED: !important to override WP separator block inline width/centering styles */
.operations-map-section .operations-map-text-content .wp-block-separator,
.operations-map-section .operations-map-text-content hr {
	width: 224px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 24px;
}

/* Note: .operations-map-section .operations-map-image consolidated to line 404 */

/* Operations Map - Responsive adjustments */
@media (max-width: 1024px) {
	.operations-map-section .operations-map-text-content {
		position: relative;
		left: auto;
		top: auto;
		max-width: 100%;
		margin-bottom: 24px;
		padding: 0 var(--wp--preset--spacing--50);
	}

	.operations-map-section .operations-map-container {
		min-height: auto;
	}
}

/* Florida Operations - Wider map text content */
.postid-2089 .operations-map-section .operations-map-text-content {
	max-width: 100%;
}

/* Florida Operations - Shorter solutions card images (2-col layout) */
.postid-2089 .solutions-card-new .wp-block-cover.solutions-card-image {
	padding-bottom: 45%;
}

/* Partner Contact - Parent container adjustments for flush-right image */
/* REQUIRED: !important to override WP has-global-padding inline styles */
.has-droplet-bg.has-global-padding {
	padding-right: 0 !important;
}

/* REQUIRED: !important to override WP columns block alignwide/alignfull inline styles */
.has-droplet-bg .wp-block-columns.alignwide,
.has-droplet-bg .wp-block-columns.alignfull {
	max-width: none !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}

/* Partner Contact / Let's Connect - full height image flush right with exact desktop dimensions */
/* REQUIRED: !important to override WP column block inline width/flex-basis styles */
.has-droplet-bg .partner-contact-image-column {
	margin-right: 0 !important;
	padding-right: 0 !important;
	display: flex;
	align-items: stretch;
	width: 770px !important;
	height: 932px !important;
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
}

.has-droplet-bg .partner-contact-image-column .wp-block-image {
	height: 100%;
	width: 100%;
	margin: 0;
	flex: 1;
}

.has-droplet-bg .partner-contact-image-column .wp-block-image img {
	width: 770px;
	height: 932px;
	object-fit: cover;
	display: block;
	object-position: center;
}

/* Operations Contact / Partner Contact - full height image flush right with exact desktop dimensions - REQUIRED: !important to override WordPress core column block inline styles */
.operations-contact-section,
.partner-contact-section {
	position: relative;
	min-height: 932px;
	overflow: visible;
}

.operations-contact-section.has-global-padding,
.has-droplet-bg.operations-contact-section,
.partner-contact-section.has-global-padding,
.has-droplet-bg.partner-contact-section,
.contact-contact-section.has-global-padding,
.has-droplet-bg.contact-contact-section,
.contact-hero-form-section.has-global-padding,
.has-droplet-bg.contact-hero-form-section {
	padding-right: 0 !important;
}

/* Also handle if it's just has-droplet-bg without operations-contact-section class */
.has-droplet-bg:has(.partner-contact-image-column),
.has-droplet-bg:has(.contact-image-column) {
	padding-right: 0 !important;
	overflow: visible;
	position: relative;
	min-height: 932px;
}

.has-droplet-bg:has(.partner-contact-image-column) .wp-block-columns,
.has-droplet-bg:has(.contact-image-column) .wp-block-columns,
.operations-contact-section .wp-block-columns,
.partner-contact-section .wp-block-columns {
	position: relative;
	min-height: 932px;
	max-width: none !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}

/* NOTE: Contact form column padding consolidated to line ~12428 with padding-top: 50px */

/* Reduce spacing in contact sections */
.operations-contact-section .wp-block-group,
.partner-contact-section .wp-block-group {
	gap: 10px !important;
}

.operations-contact-section h1,
.operations-contact-section h2,
.partner-contact-section h1,
.partner-contact-section h2 {
	font-size: var(--wp--custom--fontSize--4xl-lg);
	line-height: 50px;
	margin-bottom: 0 !important;
}

.operations-contact-section .wp-block-separator,
.partner-contact-section .wp-block-separator {
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}

.operations-contact-section .wp-block-group>p,
.partner-contact-section .wp-block-group>p {}

.operations-contact-section .gform_wrapper .gfield,
.partner-contact-section .gform_wrapper .gfield {
	margin-bottom: 8px;
}

.operations-contact-section .gform_wrapper .gform_fields,
.partner-contact-section .gform_wrapper .gform_fields {
	row-gap: 8px;
}

.operations-contact-section .gform_wrapper .gfield_label,
.partner-contact-section .gform_wrapper .gfield_label {
	margin-bottom: 4px;
}

/* Reduce spacing between form elements */
.has-droplet-bg:has(.contact-image-column) .wp-block-group,
.has-droplet-bg:has(.partner-contact-image-column) .wp-block-group,
.has-droplet-bg:has(.contact-contact-image-column) .wp-block-group,
.has-droplet-bg:has(.contact-hero-form-image-column) .wp-block-group {
	gap: 24px !important;
}

/* Reduce heading size slightly to save space */
.has-droplet-bg:has(.contact-image-column) h1,
.has-droplet-bg:has(.partner-contact-image-column) h1,
.has-droplet-bg:has(.contact-contact-image-column) h1,
.has-droplet-bg:has(.contact-hero-form-image-column) h1,
.has-droplet-bg:has(.contact-image-column) h2,
.has-droplet-bg:has(.partner-contact-image-column) h2,
.has-droplet-bg:has(.contact-contact-image-column) h2,
.has-droplet-bg:has(.contact-hero-form-image-column) h2 {
	font-size: var(--wp--custom--fontSize--4xl-lg);
	line-height: 50px;
	margin-bottom: 0 !important;
}

/* Reduce separator height */
.has-droplet-bg:has(.contact-image-column) .wp-block-separator,
.has-droplet-bg:has(.partner-contact-image-column) .wp-block-separator,
.has-droplet-bg:has(.contact-contact-image-column) .wp-block-separator,
.has-droplet-bg:has(.contact-hero-form-image-column) .wp-block-separator {
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}

/* Reduce paragraph spacing */
.has-droplet-bg:has(.contact-image-column) .wp-block-group>p,
.has-droplet-bg:has(.partner-contact-image-column) .wp-block-group>p,
.has-droplet-bg:has(.contact-contact-image-column) .wp-block-group>p,
.has-droplet-bg:has(.contact-hero-form-image-column) .wp-block-group>p {
	margin-bottom: 20px !important;
}

/* Tighter form field spacing - for contact page forms only */
.has-droplet-bg:has(.contact-image-column) .gform_wrapper .gfield,
.has-droplet-bg:has(.contact-contact-image-column) .gform_wrapper .gfield,
.has-droplet-bg:has(.contact-hero-form-image-column) .gform_wrapper .gfield {
	margin-bottom: 8px !important;
}

.has-droplet-bg:has(.contact-image-column) .gform_wrapper .gform_fields,
.has-droplet-bg:has(.contact-contact-image-column) .gform_wrapper .gform_fields,
.has-droplet-bg:has(.contact-hero-form-image-column) .gform_wrapper .gform_fields {
	row-gap: 8px !important;
}

.has-droplet-bg:has(.contact-image-column) .gform_wrapper .gfield_label,
.has-droplet-bg:has(.contact-contact-image-column) .gform_wrapper .gfield_label,
.has-droplet-bg:has(.contact-hero-form-image-column) .gform_wrapper .gfield_label {
	margin-bottom: 4px !important;
}

/* Operations Contact - full height image flush right with exact desktop dimensions
   REQUIRED: !important to override WP Column block inline width/flex-basis/margin styles */
.operations-contact-section .operations-contact-image-column,
.operations-contact-section .wp-block-column:last-child {
	margin-right: 0 !important;
	padding-right: 0 !important;
	display: flex;
	align-items: stretch;
	width: 770px !important;
	height: 932px !important;
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	flex-basis: auto !important;
	margin: 0 !important;
}

.operations-contact-section .operations-contact-image-column .wp-block-image,
.operations-contact-section .operations-contact-image-column figure,
.operations-contact-section .wp-block-column:last-child .wp-block-image,
.operations-contact-section .wp-block-column:last-child figure {
	height: 100%;
	width: 100%;
	margin: 0;
	flex: 1;
	border-radius: 0;
}

.operations-contact-section .operations-contact-image-column .wp-block-image img,
.operations-contact-section .operations-contact-image-column img,
.operations-contact-section .wp-block-column:last-child .wp-block-image img,
.operations-contact-section .wp-block-column:last-child img {
	width: 770px;
	height: 932px;
	object-fit: cover;
	display: block;
	object-position: center;
	border-radius: 0;
}

/* Contact sections - Mobile/Tablet - reset absolute positioning - REQUIRED: !important to override desktop styles */
@media (max-width: 1024px) {

	.operations-contact-section,
	.partner-contact-section {
		min-height: auto;
		height: auto !important;
	}

	.operations-contact-section .wp-block-columns,
	.partner-contact-section .wp-block-columns {
		min-height: auto;
		height: auto;
	}

	.operations-contact-section .operations-contact-image-column,
	.operations-contact-section .wp-block-column:last-child,
	.partner-contact-section .partner-contact-image-column,
	.partner-contact-section .wp-block-column:last-child {
		position: static !important;
		width: 100%;
		height: auto;
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.operations-contact-section .operations-contact-image-column .wp-block-image img,
	.operations-contact-section .wp-block-column:last-child .wp-block-image img,
	.partner-contact-section .partner-contact-image-column .wp-block-image img,
	.partner-contact-section .wp-block-column:last-child .wp-block-image img {
		width: 100%;
		height: auto;
		max-height: 500px;
	}
}

/* ==========================================================================
   Figma-Style Underline Form - Contact, Partner, Operations Forms
   Matches Figma design: underline inputs, 2-column layout, pill button
   ========================================================================== */

/* Form container layout */
.operations-contact-section .gform_wrapper,
.partner-contact-section .gform_wrapper,
.contact-contact-section .gform_wrapper,
.contact-hero-form-section .gform_wrapper {
	max-width: 600px;
}

/* Form fields grid - enable 2-column layout for paired fields */
.operations-contact-section .gform_wrapper .gform_fields,
.partner-contact-section .gform_wrapper .gform_fields,
.contact-contact-section .gform_wrapper .gform_fields,
.contact-hero-form-section .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
	row-gap: 40px;
	padding: 0;
	margin: 0;
}

/* Full-width fields (message textarea) - span both columns */
.operations-contact-section .gform_wrapper .gfield--type-textarea,
.partner-contact-section .gform_wrapper .gfield--type-textarea,
.contact-contact-section .gform_wrapper .gfield--type-textarea,
.contact-hero-form-section .gform_wrapper .gfield--type-textarea {
	grid-column: 1 / -1;
}

/* Reset field margins - spacing handled by grid gap */
.operations-contact-section .gform_wrapper .gfield,
.partner-contact-section .gform_wrapper .gfield,
.contact-contact-section .gform_wrapper .gfield,
.contact-hero-form-section .gform_wrapper .gfield {
	margin-bottom: 0;
	padding: 0;
}

/* Labels - Figma style: 20px Inter Regular, theme-06 color */
.operations-contact-section .gform_wrapper .gfield_label,
.partner-contact-section .gform_wrapper .gfield_label,
.contact-contact-section .gform_wrapper .gfield_label,
.contact-hero-form-section .gform_wrapper .gfield_label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 30px;
	color: var(--wp--preset--color--theme-06);
	margin-bottom: 0;
	padding-top: 9px;
	padding-bottom: 16px;
}

/* Hide required asterisk - it's in the label text */
.operations-contact-section .gform_wrapper .gfield_required,
.partner-contact-section .gform_wrapper .gfield_required,
.contact-contact-section .gform_wrapper .gfield_required,
.contact-hero-form-section .gform_wrapper .gfield_required {
	display: none;
}

/* Input fields - Figma underline style: bottom border only */
.operations-contact-section .gform_wrapper input[type="text"],
.operations-contact-section .gform_wrapper input[type="email"],
.operations-contact-section .gform_wrapper input[type="tel"],
.operations-contact-section .gform_wrapper input[type="url"],
.operations-contact-section .gform_wrapper input[type="number"],
.partner-contact-section .gform_wrapper input[type="text"],
.partner-contact-section .gform_wrapper input[type="email"],
.partner-contact-section .gform_wrapper input[type="tel"],
.partner-contact-section .gform_wrapper input[type="url"],
.partner-contact-section .gform_wrapper input[type="number"],
.contact-contact-section .gform_wrapper input[type="text"],
.contact-contact-section .gform_wrapper input[type="email"],
.contact-contact-section .gform_wrapper input[type="tel"],
.contact-contact-section .gform_wrapper input[type="url"],
.contact-contact-section .gform_wrapper input[type="number"],
.contact-hero-form-section .gform_wrapper input[type="text"],
.contact-hero-form-section .gform_wrapper input[type="email"],
.contact-hero-form-section .gform_wrapper input[type="tel"],
.contact-hero-form-section .gform_wrapper input[type="url"],
.contact-hero-form-section .gform_wrapper input[type="number"] {
	background: transparent;
	border: none;
	border-bottom: 3px solid var(--wp--preset--color--theme-06);
	border-radius: 0;
	padding: 0 0 16px 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 30px;
	color: var(--wp--preset--color--theme-06);
	min-height: auto;
	height: auto;
	box-shadow: none;
	outline: none;
}

/* Textarea - Figma underline style */
.operations-contact-section .gform_wrapper textarea,
.partner-contact-section .gform_wrapper textarea,
.contact-contact-section .gform_wrapper textarea,
.contact-hero-form-section .gform_wrapper textarea {
	background: transparent;
	border: none;
	border-bottom: 3px solid var(--wp--preset--color--theme-06);
	border-radius: 0;
	padding: 0 0 16px 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 30px;
	color: var(--wp--preset--color--theme-06);
	min-height: 118px;
	resize: none;
	box-shadow: none;
	outline: none;
}

/* Input focus state - keep underline, no box shadow */
.operations-contact-section .gform_wrapper input:focus,
.operations-contact-section .gform_wrapper textarea:focus,
.partner-contact-section .gform_wrapper input:focus,
.partner-contact-section .gform_wrapper textarea:focus,
.contact-contact-section .gform_wrapper input:focus,
.contact-contact-section .gform_wrapper textarea:focus,
.contact-hero-form-section .gform_wrapper input:focus,
.contact-hero-form-section .gform_wrapper textarea:focus {
	border-bottom-color: var(--wp--preset--color--theme-02);
	box-shadow: none;
	outline: none;
}

/* Placeholder styling */
.operations-contact-section .gform_wrapper input::placeholder,
.operations-contact-section .gform_wrapper textarea::placeholder,
.partner-contact-section .gform_wrapper input::placeholder,
.partner-contact-section .gform_wrapper textarea::placeholder,
.contact-contact-section .gform_wrapper input::placeholder,
.contact-contact-section .gform_wrapper textarea::placeholder,
.contact-hero-form-section .gform_wrapper input::placeholder,
.contact-hero-form-section .gform_wrapper textarea::placeholder {
	color: var(--wp--preset--color--theme-06);
	opacity: 0.6;
}

/* Submit button - Figma pill style */
.operations-contact-section .gform_wrapper .gform_footer,
.partner-contact-section .gform_wrapper .gform_footer,
.contact-contact-section .gform_wrapper .gform_footer,
.contact-hero-form-section .gform_wrapper .gform_footer {
	padding: 0;
	margin-top: 40px;
	grid-column: 1 / -1;
}

.operations-contact-section .gform_wrapper .gform_footer input[type="submit"],
.operations-contact-section .gform_wrapper .gform_footer button[type="submit"],
.operations-contact-section .gform_wrapper .gform_button,
.partner-contact-section .gform_wrapper .gform_footer input[type="submit"],
.partner-contact-section .gform_wrapper .gform_footer button[type="submit"],
.partner-contact-section .gform_wrapper .gform_button,
.contact-contact-section .gform_wrapper .gform_footer input[type="submit"],
.contact-contact-section .gform_wrapper .gform_footer button[type="submit"],
.contact-contact-section .gform_wrapper .gform_button,
.contact-hero-form-section .gform_wrapper .gform_footer input[type="submit"],
.contact-hero-form-section .gform_wrapper .gform_footer button[type="submit"],
.contact-hero-form-section .gform_wrapper .gform_button {
	background-color: var(--wp--preset--color--theme-02);
	border: 2px solid var(--wp--preset--color--theme-02);
	border-radius: var(--wp--custom--border--rounded-2xl);
	padding: 7px 19px;
	width: 261px;
	min-width: 261px;
	min-height: auto;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 32px;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Submit button hover - ALL contact/form sections: yellow background, dark blue text */
/* REQUIRED: High specificity with body prefix and !important to override Gravity Forms gform-theme styles */
body .contact-contact-section .gform_wrapper .gform_footer input[type="submit"]:hover,
body .contact-contact-section .gform_wrapper .gform-footer input[type="submit"]:hover,
body .contact-contact-section .gform_wrapper .gform_button:hover,
body .contact-contact-section .gform_wrapper input.gform_button:hover,
body .contact-hero-form-section .gform_wrapper .gform_footer input[type="submit"]:hover,
body .contact-hero-form-section .gform_wrapper .gform-footer input[type="submit"]:hover,
body .contact-hero-form-section .gform_wrapper .gform_button:hover,
body .contact-hero-form-section .gform_wrapper input.gform_button:hover,
body .operations-contact-section .gform_wrapper .gform_footer input[type="submit"]:hover,
body .operations-contact-section .gform_wrapper .gform-footer input[type="submit"]:hover,
body .operations-contact-section .gform_wrapper .gform_button:hover,
body .operations-contact-section .gform_wrapper input.gform_button:hover,
body .partner-contact-section .gform_wrapper .gform_footer input[type="submit"]:hover,
body .partner-contact-section .gform_wrapper .gform-footer input[type="submit"]:hover,
body .partner-contact-section .gform_wrapper .gform_button:hover,
body .partner-contact-section .gform_wrapper input.gform_button:hover {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-color: var(--wp--preset--color--theme-04) !important;
	transform: translateY(-1px);
}

/* Tablet responsive - single column form fields when in narrow container */
/* At 992-1024px, the contact form column is only ~314px wide, too narrow for 2-column fields */
/* REQUIRED: !important to override Gravity Forms gform-theme--foundation 12-column grid */
@media (max-width: 1024px) {

	.operations-contact-section .gform_wrapper .gform_fields,
	.operations-contact-section .gform_wrapper.gform-theme--foundation .gform_fields,
	.partner-contact-section .gform_wrapper .gform_fields,
	.partner-contact-section .gform_wrapper.gform-theme--foundation .gform_fields,
	.contact-contact-section .gform_wrapper .gform_fields,
	.contact-contact-section .gform_wrapper.gform-theme--foundation .gform_fields,
	.contact-hero-form-section .gform_wrapper .gform_fields,
	.contact-hero-form-section .gform_wrapper.gform-theme--foundation .gform_fields {
		grid-template-columns: 1fr !important;
		column-gap: 0;
		row-gap: 32px;
	}
}

/* Mobile responsive - single column layout */
@media (max-width: 768px) {

	.operations-contact-section .gform_wrapper .gform_fields,
	.partner-contact-section .gform_wrapper .gform_fields,
	.contact-contact-section .gform_wrapper .gform_fields,
	.contact-hero-form-section .gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.operations-contact-section .gform_wrapper .gform_footer input[type="submit"],
	.partner-contact-section .gform_wrapper .gform_footer input[type="submit"],
	.contact-contact-section .gform_wrapper .gform_footer input[type="submit"],
	.contact-hero-form-section .gform_wrapper .gform_footer input[type="submit"] {
		width: 100%;
		min-width: auto;
	}
}

/* Partner Trusted Staffing - constrain text to container width */
.has-water-ripple-bg .wp-block-columns .wp-block-column[style*="60%"] .wp-block-group p {
	max-width: 709px;
}

/* Hero Navigation - consistent spacing and prevent wrapping */
.is-hero .wp-block-navigation {
	flex-wrap: nowrap !important;
}

.is-hero .wp-block-navigation .wp-block-navigation__container {
	gap: 32px;
	flex-wrap: nowrap !important;
}

/* Lifeguard Page - solid blue navigation background */
.page-id-23 .wp-block-template-part>.wp-block-group {
	background-color: var(--wp--preset--color--theme-02);
	margin: 0;
	overflow: visible !important;
}

.page-id-23 .wp-block-template-part>.wp-block-group .wp-block-group.alignfull {
	background-color: transparent;
}

/* CRITICAL FIX: Ensure mobile nav button is visible on Lifeguard page - MOBILE ONLY */
@media (max-width: 1023px) {

	.page-id-23 #mobile-nav-toggle,
	.page-id-23 .mobile-nav-toggle {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: fixed !important;
		top: 16px !important;
		right: 10px !important;
		z-index: 999999 !important;
	}
}

/* Lifeguard Page - navigation link spacing - match global 32px */
.page-id-23 .wp-block-navigation__container {
	gap: 32px;
	flex-wrap: nowrap !important;
}

.page-id-23 .wp-block-navigation .wp-block-navigation-item {
	margin: 0;
}

/* Lifeguard Page - ensure Partner With Us link has consistent spacing */
.page-id-23 .wp-block-navigation .wp-block-navigation-item a {
	padding-left: 0;
	padding-right: 0;
}

/* Lifeguard Page - button container spacing (page content only, not header navigation) */
.page-id-23 main .wp-block-buttons.is-content-justification-right.is-layout-flex {
	gap: 40px;
	margin-top: -18px;
	margin-left: 10px;
}

/* Lifeguard Page - align Partner With Us and Become a Lifeguard buttons with nav items */
.page-id-23 .wp-block-navigation-item a[href*="partner"],
.page-id-23 .wp-block-navigation-item a[href*="lifeguard"] {
	margin-top: -4px;
	display: inline-flex;
	align-items: center;
}

/* Lifeguard Page (page-id-23) - intro section pool offset background */
.page-id-23 .has-offset-pool-bg::before {
	content: '';
	position: absolute;
	right: 30px;
	bottom: -20px;
	width: 100%;
	height: 100%;
	background: url(/wp-content/uploads/2025/12/pool-bg.png) center / cover no-repeat;
	z-index: 0;
}

@media (max-width: 1516px) {
	.page-id-23 .has-offset-pool-bg::before {
		content: '';
		position: absolute;
		right: -15px;
		bottom: -15px;
		width: 104%;
		height: 100%;
		background: url(/wp-content/uploads/2025/12/pool-bg.png) center / cover no-repeat;
		z-index: 0;
	}
}



/* Contact Page - button container spacing */
.page-id-25 .wp-block-buttons.is-content-justification-right.is-layout-flex {
	gap: 40px;
	margin-top: -18px;
	margin-left: 10px;
}

/* Contact Page - align Partner With Us and Become a Lifeguard buttons with nav items */
.page-id-25 .wp-block-navigation-item a[href*="partner"],
.page-id-25 .wp-block-navigation-item a[href*="lifeguard"] {
	margin-top: -4px;
	display: inline-flex;
	align-items: center;
}

/* CRITICAL FIX: Ensure mobile nav button is visible on Contact page - MOBILE ONLY
   REQUIRED: !important to override competing CSS rules and ensure fixed hamburger visibility */
@media (max-width: 1023px) {

	.page-id-25 #mobile-nav-toggle,
	.page-id-25 .mobile-nav-toggle {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: fixed !important;
		top: 16px !important;
		right: 10px !important;
		z-index: 999999 !important;
	}
}

/* Lifeguard Intro - paragraph right padding on desktop */
.lifeguard-intro-section p {
	padding-right: 120px;
}

@media (max-width: 768px) {
	.lifeguard-intro-section p {
		padding-right: 0;
	}
}

/* Lifeguard - Why You'll Love icons - 42x35px, aligned to heading */
body .lifeguard-flag-icon {
	align-self: flex-start;
	margin-top: 2px;
	width: 42px;
	height: 35px;
	flex-shrink: 0;
	min-width: 42px;
	min-height: 35px;
	max-width: 42px;
	max-height: 35px;
}

@media (max-width: 768px) {
	body .lifeguard-flag-icon {
		margin-top: -8px;
	}
}

body .lifeguard-flag-icon img {
	width: 42px;
	height: 35px;
	object-fit: contain;
	min-width: 42px;
	min-height: 35px;
	max-width: 42px;
	max-height: 35px;
}

/* Lifeguard - Job Fit Carousel - flush left positioning */
/* Columns are centered with max-width: 1440px, so columns.left = (100vw - 1440px) / 2 */
/* Carousel needs negative margin equal to columns.left to reach viewport edge */
@media (min-width: 1441px) {
	.job-fit-carousel {
		margin-left: calc(-50vw + 720px);
		/* Equivalent to -(100vw - 1440px) / 2 */
	}
}

/* At exactly 1440px, columns fills viewport with no margin */
@media (min-width: 1025px) and (max-width: 1440px) {
	.job-fit-carousel {
		margin-left: -80px;
		/* Cancel columns padding-left */
	}
}

/* Lifeguard Gallery - white carousel dots */
.lifeguard-gallery-section {
	position: relative;
}

.lifeguard-gallery-dots {
	position: relative;
	margin-top: 40px;
	display: flex;
	gap: 12px;
	justify-content: center;
	z-index: 10;
}

.lifeguard-gallery-dot {
	min-width: 14px;
	min-height: 17px;
	width: 14px;
	height: 17px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.lifeguard-gallery-dot::after {
	content: '';
	width: 14px;
	height: 14px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.5);
	border: none;
	transition: background-color 0.3s ease;
	pointer-events: none;
}

.lifeguard-gallery-dot:hover::after,
.lifeguard-gallery-dot.is-active::after {
	background: white;
}

/* Partner Staffing Carousel Dots - Bordered outline style */
.partner-staffing-carousel .splide__pagination {
	bottom: 20px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 10;
}

.partner-staffing-carousel .splide__pagination__page {
	min-width: 17px;
	min-height: 17px;
	width: 17px;
	height: 17px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	cursor: pointer;
	opacity: 1;
	flex-shrink: 0;
}

.partner-staffing-carousel .splide__pagination__page::after {
	content: '';
	width: 12px;
	height: 12px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02);
	transition: background-color 0.3s ease;
	pointer-events: none;
}

.partner-staffing-carousel .splide__pagination__page:hover::after,
.partner-staffing-carousel .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Partner Staffing Gallery - Simple gallery display */
.partner-staffing-gallery.wp-block-gallery {
	position: relative;
	display: block;
}

.partner-staffing-gallery.wp-block-gallery .wp-block-image {
	width: 100%;
	margin: 0;
}

.partner-staffing-gallery.wp-block-gallery .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

/**
 * 7.0 Mobile Navigation Styles
 *
 * REQUIRED: !important declarations in this section override WordPress core
 * navigation block styles, ensure consistent behavior across responsive
 * breakpoints, and control mobile hamburger menu visibility/positioning.
 * These overrides are necessary because:
 * - WP Navigation block generates inline styles that must be overridden
 * - Responsive display toggling requires precedence over default states
 * - Hamburger animation states need consistent positioning
 */

/* Hide mobile toggle on desktop */
.mobile-nav-toggle {
	display: none;
}

/* Mobile navigation - hidden by default */
.mobile-navigation {
	display: none;
}

.mobile-nav-overlay {
	display: none;
}

/* ==========================================================================
   HERO PAGES: Right-align navigation between 1351px and 1500px
   This ensures nav is pushed to the right edge like the sticky nav.
   REQUIRED: !important declarations throughout this breakpoint override
   WP Navigation/Button block inline styles for right-aligned navigation
   layout with consistent 23px gaps at this specific viewport range.
   ========================================================================== */
@media (min-width: 1351px) and (max-width: 1500px) {
	.hero-top-bar {
		justify-content: space-between !important;
		padding-right: 25px !important;
	}

	/* Main hero-navigation container - controls gap between nav-cloned and buttons-cloned */
	body .hero-navigation {
		margin-left: auto !important;
		margin-right: 0 !important;
		justify-content: flex-end !important;
		gap: 23px !important;
	}

	/* Consistent 23px gap between ALL nav items */
	body .hero-navigation .wp-block-navigation,
	body .hero-navigation .wp-block-navigation__container {
		gap: 23px !important;
	}

	body .hero-navigation .hero-nav-cloned {
		gap: 23px !important;
	}

	/* Same 23px gap for buttons container */
	body .hero-navigation .hero-nav-buttons-cloned {
		gap: 23px !important;
		margin-right: 0 !important;
	}

	/* Remove any margins from individual items */
	body .hero-navigation .wp-block-navigation-item,
	body .hero-navigation .wp-block-button {
		margin: 0 !important;
	}

	/* Remove any right margin from the last button */
	body .hero-navigation .wp-block-button:last-child,
	body .hero-navigation .hero-nav-buttons-cloned .wp-block-button:last-child {
		margin-right: 0 !important;
	}

	/* Normalize padding on all nav links for consistent visual spacing */
	/* Regular links have 6px, dropdown parents have 20px/2px - normalize to 0 and use gap */
	body .hero-navigation .hero-nav-cloned .wp-block-navigation-item>a,
	body .hero-navigation .hero-nav-cloned .wp-block-navigation-item>.wp-block-navigation-item__content,
	body .hero-navigation .hero-nav-cloned .wp-block-navigation-item.has-child>.wp-block-navigation-item__content,
	body .hero-navigation .hero-nav-cloned .wp-block-navigation-submenu>.wp-block-navigation-item__content {
		padding-left: 0 !important;
		padding-right: 4px !important;
	}
}

/* Carousel dots 1279px - MERGED: see line ~19266 for active rule */

/* HERO PAGES: Mobile breakpoint (1139px) - show desktop nav above this, hamburger below */
/* Changed from 1350px to show nav at 1140px+ and hamburger at 1139px and below */
@media (max-width: 1139px) {

	/* Hide desktop navigation in hero sections */
	.hero-navigation-block-wrapper,
	/* REQUIRED: !important throughout this section to override WP Navigation block default layout and positioning for mobile hero display */
	.hero-navigation {
		display: none !important;
	}

	/* Hero top bar alignment - space-between to push hamburger to right */
	.hero-top-bar {
		justify-content: space-between !important;
	}

	/* Show mobile hamburger toggle in hero */
	/* REQUIRED: !important to override WP button defaults for custom hamburger toggle styling */
	.hero-top-bar .mobile-nav-toggle,
	.hero-mobile-toggle {
		display: flex !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		z-index: 1001 !important;
		background-color: var(--wp--preset--color--theme-02) !important;
		border: 3px solid var(--wp--preset--color--white) !important;
		border-radius: var(--wp--custom--border--rounded-small) !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
		width: 48px !important;
		height: 48px !important;
		padding: 0 !important;
		justify-content: center !important;
		align-items: center !important;
		cursor: pointer !important;
	}

	/* Hamburger box - container for the bars */
	/* REQUIRED: !important to override default button/span sizing for custom hamburger icon dimensions */
	.hero-top-bar .hamburger-box {
		width: 22px !important;
		height: 17px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
	}

	/* Hamburger inner - middle bar, centered */
	/* REQUIRED: !important to override default span styles for custom hamburger bar styling */
	.hero-top-bar .hamburger-inner {
		display: block !important;
		width: 22px !important;
		height: 3px !important;
		background-color: white !important;
		border-radius: var(--wp--custom--border--rounded-xs) !important;
		position: absolute !important;
		top: 50% !important;
		left: 0 !important;
		transform: translateY(-50%) !important;
		transition: transform 0.15s ease !important;
	}

	/* Hamburger top and bottom bars */
	/* REQUIRED: !important to override default pseudo-element styles for hamburger animation bars */
	.hero-top-bar .hamburger-inner::before,
	.hero-top-bar .hamburger-inner::after {
		content: '';
		display: block !important;
		width: 22px !important;
		height: 3px !important;
		background-color: white !important;
		border-radius: var(--wp--custom--border--rounded-xs) !important;
		position: absolute !important;
		left: 0 !important;
		transition: transform 0.15s ease !important;
	}

	.hero-top-bar .hamburger-inner::before {
		top: -7px !important;
	}

	.hero-top-bar .hamburger-inner::after {
		bottom: -7px !important;
	}

	/* Hero mobile header - visible at this breakpoint */
	.hero-mobile-header {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		padding: 20px 15px;
	}

	/* Mobile navigation overlay - for hero pages at this breakpoint */
	.mobile-nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 99999;
	}

	.mobile-nav-overlay[aria-hidden="false"] {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	/* NOTE: .mobile-navigation panel styles consolidated to line ~9836 */

	/* Ensure navigation inside mobile panel displays correctly */
	.mobile-navigation .desktop-navigation,
	.mobile-navigation .wp-block-navigation {
		display: flex !important;
	}

	/* NOTE: .mobile-navigation-inner styles consolidated to line ~9839 */

	/* Mobile nav close button - simple text, no border */
	.mobile-nav-close {
		position: absolute;
		top: 20px;
		right: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--sansation), sans-serif;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
		z-index: 100001;
		padding: 0;
	}

	/* Navigation items styling in mobile menu - no separators, left aligned
	   Merged: list-style, padding, margin from duplicates at lines ~9867 and ~15508
	   REQUIRED: !important to override WP Navigation block default flex/display for mobile menu layout */
	.mobile-navigation .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		width: 100%;
		overflow: visible !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		padding: 0;
		margin: 0;
		list-style: none;
		align-items: flex-start !important;
	}

	/* REQUIRED: !important to override WP Navigation item default borders/margins for clean mobile menu */
	.mobile-navigation .wp-block-navigation-item {
		width: 100%;
		border-bottom: none !important;
		margin-left: 0 !important;
		margin-bottom: 0 !important;
	}

	/* REQUIRED: !important to override WP Navigation link default typography/spacing for mobile menu styling */
	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-navigation-item__content {
		display: block !important;
		padding: 8px 0 !important;
		color: var(--wp--preset--color--theme-02) !important;
		text-decoration: none !important;
		font-size: var(--wp--custom--fontSize--lg) !important;
		font-weight: 600 !important;
		font-family: var(--wp--preset--font-family--sansation), sans-serif !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		margin-left: 0 !important;
	}

	/* REQUIRED: !important to override WP Navigation link hover default for mobile menu */
	.mobile-navigation .wp-block-navigation-item a:hover,
	.mobile-navigation .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--theme-03) !important;
	}

	/* CTA Buttons in mobile nav - match mobile styling, no separator */
	/* REQUIRED: !important to override any default border-top for seamless mobile CTA section */
	.mobile-nav-cta-buttons {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding-top: 30px;
		margin-top: 20px;
		border-top: none !important;
	}

	.mobile-nav-cta-link {
		display: inline-block;
		font-family: var(--wp--preset--font-family--sansation), sans-serif;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		padding: 14px 30px;
		border-radius: var(--wp--custom--border--rounded-large);
		transition: all 0.2s ease;
	}

	/* Careers - plain outline button */
	.mobile-nav-cta-link.mobile-nav-careers {
		background-color: var(--wp--preset--color--white);
		background-image: none;
		color: var(--wp--preset--color--theme-02);
		border: 2px solid var(--wp--preset--color--theme-02);
	}

	.mobile-nav-cta-link.mobile-nav-careers:hover {
		background-color: var(--wp--preset--color--theme-02);
		color: var(--wp--preset--color--white);
	}

	/* Let's Connect - wave effect matching footer style */
	.mobile-nav-cta-link.mobile-nav-connect {
		position: relative;
		overflow: hidden;
		background-color: var(--wp--preset--color--theme-02);
		background-image: none;
		color: var(--wp--preset--color--white);
		border: 2px solid var(--wp--preset--color--theme-03);
		isolation: isolate;
	}

	.mobile-nav-cta-link.mobile-nav-connect::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--wp--preset--color--theme-03);
		border-radius: inherit;
		z-index: -1;
		pointer-events: none;
		clip-path: polygon(0% 45%,
				16% 44%,
				33% 50%,
				54% 60%,
				70% 61%,
				84% 59%,
				100% 52%,
				100% 100%,
				0% 100%);
	}

	.mobile-nav-cta-link.mobile-nav-connect:hover {
		background-color: var(--wp--preset--color--theme-02);
		border-color: var(--wp--preset--color--theme-03);
	}

	.mobile-nav-cta-link.mobile-nav-connect:hover::before {
		animation: water-wave 2s ease-in-out infinite;
	}

	/* Buttons inside navigation - cloned from desktop */
	.mobile-navigation .wp-block-buttons {
		display: flex !important;
		flex-direction: column !important;
		gap: 15px !important;
		padding-top: 20px !important;
		width: 100% !important;
	}

	.mobile-navigation .wp-block-button {
		width: 100% !important;
		margin: 0 !important;
	}

	.mobile-navigation .wp-block-button__link {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		padding: 14px 20px !important;
		font-size: var(--wp--preset--font-size--medium) !important;
		font-weight: 700 !important;
		border-radius: var(--wp--custom--border--rounded-large) !important;
	}

	/* Partner With Us - match desktop styling with blue text */
	.mobile-navigation .wp-block-button.is-style-subtle .wp-block-button__link {
		background: transparent !important;
		border: none !important;
		border-bottom: 2px dotted var(--wp--preset--color--theme-04) !important;
		border-radius: 0 !important;
		color: var(--wp--preset--color--theme-02) !important;
		padding: 12px 0 !important;
		font-family: var(--wp--preset--font-family--sansation) !important;
		font-size: var(--wp--preset--font-size--large) !important;
		font-weight: 700 !important;
		text-transform: capitalize !important;
		letter-spacing: 0.6px !important;
		line-height: 22px !important;
		text-decoration: none !important;
	}

	.mobile-navigation .wp-block-button.is-style-subtle .wp-block-button__link:hover {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
		border-bottom: 2px solid var(--wp--preset--color--theme-05) !important;
		color: var(--wp--preset--color--theme-02) !important;
		text-decoration: none !important;
	}

	/* Become a Lifeguard - yellow wave with clip-path animation */
	.mobile-navigation .wp-block-button.is-style-wave .wp-block-button__link {
		position: relative !important;
		overflow: hidden !important;
		background-color: var(--wp--preset--color--white) !important;
		background-image: none !important;
		color: var(--wp--preset--color--theme-02) !important;
		border: 2px solid var(--wp--preset--color--theme-04) !important;
		isolation: isolate !important;
	}

	.mobile-navigation .wp-block-button.is-style-wave .wp-block-button__link::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--wp--preset--color--theme-04);
		border-radius: inherit;
		z-index: -1;
		pointer-events: none;
		clip-path: polygon(0% 45%,
				16% 44%,
				33% 50%,
				54% 60%,
				70% 61%,
				84% 59%,
				100% 52%,
				100% 100%,
				0% 100%);
	}

	.mobile-navigation .wp-block-button.is-style-wave .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--white) !important;
		color: var(--wp--preset--color--theme-02) !important;
	}

	.mobile-navigation .wp-block-button.is-style-wave .wp-block-button__link:hover::before {
		animation: water-wave 2s ease-in-out infinite;
	}

	/* Careers - plain outline button */
	.mobile-navigation .wp-block-button.is-style-outline .wp-block-button__link {
		background-color: var(--wp--preset--color--white) !important;
		background-image: none !important;
		color: var(--wp--preset--color--theme-02) !important;
		border: 2px solid var(--wp--preset--color--theme-02) !important;
	}

	.mobile-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--theme-02) !important;
		color: var(--wp--preset--color--white) !important;
	}

	/* ==========================================================================
	   SUBMENU STYLES - OPERATIONS DROPDOWN
	   ========================================================================== */

	/* Submenu toggle button (caret) - close to text */
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle,
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 20px !important;
		height: 20px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer;
		flex-shrink: 0;
	}

	/* Caret SVG - blue color */
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle svg,
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon svg {
		width: 14px !important;
		height: 14px !important;
		fill: var(--wp--preset--color--theme-02) !important;
		stroke: var(--wp--preset--color--theme-02) !important;
		transition: transform 0.2s ease;
	}

	/* Rotate caret when submenu is open */
	.mobile-navigation .wp-block-navigation-item.has-child.open-on-click .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	/* Parent nav item with submenu - flex row with wrap for submenu below */
	.mobile-navigation .wp-block-navigation-item.has-child {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 0 !important;
	}

	/* Link stays inline */
	.mobile-navigation .wp-block-navigation-item.has-child>.wp-block-navigation-item__content {
		order: 1 !important;
		flex-shrink: 0 !important;
	}

	/* Toggle button stays next to link */
	.mobile-navigation .wp-block-navigation-item.has-child>.wp-block-navigation-submenu__toggle,
	.mobile-navigation .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-icon {
		order: 2 !important;
		flex-shrink: 0 !important;
	}

	/* Submenu container wraps to new line below */
	/* REQUIRED: !important to override WP Navigation submenu default flex/order for mobile accordion layout */
	.mobile-navigation .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container {
		order: 3 !important;
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Submenu container - hidden by default */
	/* REQUIRED: !important to override WP Navigation submenu default visibility for mobile toggle behavior */
	.mobile-navigation .wp-block-navigation__submenu-container {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Show submenu when parent has open-on-click class */
	/* REQUIRED: !important to override WP Navigation submenu absolute positioning for mobile accordion expand */
	.mobile-navigation .wp-block-navigation-item.has-child.open-on-click>.wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		min-width: auto !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		background: transparent !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 10px 0 0 20px !important;
		z-index: auto !important;
		pointer-events: auto !important;
		gap: 8px !important;
	}

	/* Submenu items - indented, smaller text */
	/* REQUIRED: !important to override WP Navigation submenu item default spacing for mobile layout */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* REQUIRED: !important to override WP Navigation link default typography and background for mobile submenu styling */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
		font-family: var(--wp--preset--font-family--sansation), 'Sansation', sans-serif !important;
		font-size: var(--wp--preset--font-size--medium) !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 1px !important;
		padding: 6px 0 !important;
		color: var(--wp--preset--color--theme-02) !important;
		display: block !important;
		background: none !important;
		background-color: transparent !important;
	}

	/* REQUIRED: !important to override WP Navigation hover default background for transparent mobile submenu hover */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
		color: var(--wp--preset--color--theme-03) !important;
		background: none !important;
		background-color: transparent !important;
	}
}

/* Mobile breakpoint - below 1280px to show mobile nav on tablets and smaller screens - REQUIRED: !important to hide desktop nav on mobile */
/* ==========================================================================
   MOBILE NAVIGATION - 1279px and below
   REQUIRED: !important declarations throughout this section override WordPress
   Navigation block default styles, inline display properties, and fixed positioning.
   The WP Navigation block applies its own responsive behavior that conflicts with
   our custom mobile navigation panel design.
   ========================================================================== */
@media (max-width: 1279px) {

	/* Clip horizontal overflow on mobile - 'clip' works with fixed elements unlike 'hidden' */
	body {
		overflow-x: clip;
	}

	/* REQUIRED: !important to override WP Navigation block default display:flex */
	.desktop-navigation,
	.wp-block-navigation.desktop-navigation,
	header .wp-block-navigation {
		display: none !important;
	}

	/* REQUIRED: !important to restore navigation display when inside mobile panel */
	.mobile-navigation .desktop-navigation,
	.mobile-navigation .wp-block-navigation {
		display: flex !important;
	}

	/* REQUIRED: !important to override WP Button block defaults for custom fixed hamburger menu
	   All properties require !important due to WP's inline style specificity */
	.mobile-nav-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		padding: 0 !important;
		margin: 0 !important;
		background-color: var(--wp--preset--color--theme-02) !important;
		border: 4px solid var(--wp--preset--color--white) !important;
		border-radius: var(--wp--custom--border--rounded-small) !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
		cursor: pointer !important;
		position: fixed !important;
		top: 16px !important;
		right: 10px !important;
		z-index: 999999 !important;
		transition: opacity 0.2s ease;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	.mobile-nav-toggle:hover {
		opacity: 0.9;
	}

	.mobile-nav-toggle:focus {
		outline: 2px solid var(--wp--preset--color--theme-03);
		outline-offset: 2px;
	}

	/* Banner is now relative on mobile, so hamburger stays at normal position */
	/* No need to push hamburger down - banner pushes content naturally */

	/* Hamburger icon - centered in button */
	.hamburger-box {
		width: 24px;
		height: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	/* REQUIRED: !important to override span element defaults for custom hamburger bar styling */
	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		width: 26px !important;
		height: 4px !important;
		background-color: var(--wp--preset--color--white) !important;
		border-radius: var(--wp--custom--border--rounded-xs) !important;
		position: absolute !important;
		transition: transform 0.3s ease, opacity 0.3s ease !important;
		display: block !important;
	}

	.hamburger-inner {
		top: 50%;
		transform: translateY(-50%);
	}

	.hamburger-inner::before,
	.hamburger-inner::after {
		content: '';
		display: block;
	}

	.hamburger-inner::before {
		top: -7px;
	}

	.hamburger-inner::after {
		top: 7px;
	}

	/* Animate to X when open */
	.mobile-nav-toggle[aria-expanded="true"] .hamburger-inner {
		transform: rotate(45deg);
	}

	.mobile-nav-toggle[aria-expanded="true"] .hamburger-inner::before {
		opacity: 0;
	}

	.mobile-nav-toggle[aria-expanded="true"] .hamburger-inner::after {
		top: 0;
		transform: rotate(-90deg);
	}

	/* Mobile navigation overlay */
	.mobile-nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 999;
	}

	.mobile-nav-overlay[aria-hidden="false"] {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	/* Mobile navigation panel - full height, no rounded corners
	   REQUIRED: !important for z-index to ensure nav appears above all content/sticky headers,
	   and overflow: visible to allow submenu popouts */
	.mobile-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 85%;
		max-width: 320px;
		height: 100%;
		background-color: var(--wp--preset--color--theme-01);
		box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 100002 !important;
		overflow: visible !important;
		-webkit-overflow-scrolling: touch;
		border-radius: 0;
	}

	.mobile-navigation[aria-hidden="false"] {
		display: block;
		transform: translateX(0);
	}

	/* REQUIRED: !important to ensure mobile nav inner content is interactive despite transform animation
	   and overflow visible for submenu popouts */
	.mobile-navigation-inner {
		padding: 50px 24px 40px;
		pointer-events: auto !important;
		position: relative;
		overflow: visible !important;
	}

	/* Ensure all clickable elements in mobile nav are interactive */
	/* REQUIRED: !important to override pointer-events:none from hidden state during animation */
	.mobile-navigation .wp-block-navigation__container,
	.mobile-navigation .wp-block-navigation-item,
	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-buttons,
	.mobile-navigation .wp-block-button__link {
		pointer-events: auto !important;
	}

	/* Hide WordPress responsive dialog wrapper in mobile menu (we only need the content) */
	.mobile-navigation .wp-block-navigation__responsive-dialog {
		position: static;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		padding: 0;
		border: none;
		box-shadow: none;
		background: transparent;
	}

	/* NOTE: .mobile-navigation .wp-block-navigation__container consolidated to line ~9306 */

	/* REQUIRED: !important to override WP Navigation item defaults for clean mobile menu layout */
	.mobile-navigation .wp-block-navigation-item {
		width: 100%;
		border-bottom: none !important;
		margin-bottom: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		min-height: 0 !important;
		height: auto !important;
	}

	/* REQUIRED: !important to override WP Navigation block inline styles for mobile menu link appearance */
	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-navigation-item__content {
		display: block;
		padding: 10px 0;
		color: var(--wp--preset--color--theme-02) !important;
		font-family: var(--wp--preset--font-family--sansation), sans-serif;
		font-size: var(--wp--custom--fontSize--lg);
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		letter-spacing: 0.5px;
		transition: color 0.2s ease;
	}

	/* REQUIRED: !important to override WP Navigation block inline styles for mobile menu hover state */
	.mobile-navigation .wp-block-navigation-item a:hover,
	.mobile-navigation .wp-block-navigation-item a:focus,
	.mobile-navigation .wp-block-navigation-item__content:hover,
	.mobile-navigation .wp-block-navigation-item__content:focus {
		color: var(--wp--preset--color--theme-03) !important;
	}

	/* Style button groups in mobile menu */
	.mobile-navigation .wp-block-buttons {
		display: flex;
		flex-direction: column;
		gap: 15px !important;
		margin-top: 15px !important;
	}

	.mobile-navigation .wp-block-button {
		width: 100%;
	}

	/* REQUIRED: !important to override WP Button defaults for mobile nav button links */
	.mobile-navigation .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 12px 24px;
		border-radius: var(--wp--custom--border--rounded-xl);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--sansation), 'Sansation', sans-serif !important;
		font-size: var(--wp--preset--font-size--medium) !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 1.2px !important;
		transition: all 0.2s ease;
		/* Ensure buttons are visible with default colors */
		background-color: var(--wp--preset--color--theme-02);
		color: white;
	}

	/* Partner With Us button - dotted underline, title case */
	/* REQUIRED: !important to override WP Button block inline styles for custom link-style button appearance */
	.mobile-navigation .wp-block-button.is-style-subtle .wp-block-button__link {
		background-color: transparent !important;
		color: var(--wp--preset--color--theme-02) !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 10px 0 !important;
		text-align: left !important;
		width: auto !important;
		font-family: var(--wp--preset--font-family--sansation), 'Sansation', sans-serif !important;
		font-size: var(--wp--custom--fontSize--lg) !important;
		font-weight: 700 !important;
		text-transform: capitalize !important;
		letter-spacing: 1.4px !important;
		line-height: 1 !important;
		text-decoration: underline !important;
		text-decoration-style: dotted !important;
		text-decoration-color: var(--wp--preset--color--theme-04) !important;
		text-underline-offset: 8px !important;
	}

	.mobile-navigation .wp-block-button.is-style-subtle .wp-block-button__link:hover {
		color: var(--wp--preset--color--theme-03) !important;
		text-decoration-color: var(--wp--preset--color--theme-03) !important;
	}

	/* Become a Lifeguard button - wave background with yellow border */
	/* REQUIRED: !important to override WP Button block inline styles for custom wave background button design */
	.mobile-navigation .wp-block-button.is-style-outline .wp-block-button__link,
	.mobile-navigation .wp-block-button.is-style-wave .wp-block-button__link {
		background-image: url('/wp-content/uploads/2025/12/yellow-wave.png') !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-color: transparent !important;
		color: var(--wp--preset--color--theme-02) !important;
		border: 1px solid var(--wp--preset--color--theme-04) !important;
		border-radius: var(--wp--custom--border--rounded-xl) !important;
		padding: 12px 20px !important;
		text-align: center !important;
		font-family: var(--wp--preset--font-family--sansation), 'Sansation', sans-serif !important;
		font-size: var(--wp--preset--font-size--large) !important;
		font-weight: 700 !important;
		text-transform: capitalize !important;
		letter-spacing: 0.6px !important;
		line-height: 22px !important;
	}

	.mobile-navigation .wp-block-button.is-style-wave .wp-block-button__link:hover,
	.mobile-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover {
		background-image: url('/wp-content/uploads/2025/12/yellow-wave-flipped.png') !important;
		color: var(--wp--preset--color--theme-02) !important;
	}

	/* Home Hero - Mobile Navigation */
	.hero-top-bar {
		position: relative;
		justify-content: space-between;
		padding: 20px 15px;
		gap: 15px;
	}

	/* Hero logo - keep full logo in non-sticky state */
	/* REQUIRED: !important to override WP Site Logo block inline width/height for responsive logo sizing */
	.hero-logo {
		width: 175px !important;
		height: auto !important;
	}

	/* Sticky nav - swap to white star-only logo */
	/* REQUIRED: !important to override WP Site Logo block inline styles and show CSS background logo instead */
	.hero-top-bar.is-sticky .hero-logo {
		width: 50px !important;
		height: 48px !important;
		background-image: url('/wp-content/uploads/2026/01/AP-Logo-Mark-white_2.svg') !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}

	/* Hide the full logo SVG in sticky state only */
	/* REQUIRED: !important to hide inline SVG when CSS background logo is shown */
	.hero-top-bar.is-sticky .hero-logo svg {
		display: none !important;
	}

	/* Hero headline - reduce max size at this breakpoint */
	/* REQUIRED: !important to override WP Heading block inline font-size for responsive typography */
	body .hero-bottom-content h1,
	body .home-hero-carousel-content h1,
	body .hero-cover-section h1.wp-block-heading {
		font-size: clamp(36px, 6vw, 65px) !important;
	}

	/* Show desktop navigation at this breakpoint - there's room for nav items */
	/* Hide the wrapper but show the cloned navigation */
	/* REQUIRED: !important to override JS-injected inline display styles for responsive nav switching */
	.hero-navigation-block-wrapper {
		display: none !important;
	}

	/* Show desktop nav in both sticky and non-sticky states */
	/* REQUIRED: !important to override WP Navigation block inline styles for desktop nav display */
	body .hero-top-bar .hero-navigation {
		display: flex !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		justify-content: flex-end !important;
		gap: 20px !important;
	}

	/* Hide hamburger - desktop nav is showing */
	/* REQUIRED: !important to override JS-injected inline display styles */
	body .hero-top-bar .mobile-nav-toggle,
	body .hero-top-bar #mobile-nav-toggle {
		display: none !important;
	}

	/* Show nav items and buttons with consistent gap */
	/* REQUIRED: !important to override WP Group block inline styles for cloned nav display */
	body .hero-top-bar .hero-nav-cloned {
		display: flex !important;
		gap: 20px !important;
	}

	body .hero-top-bar .hero-nav-buttons-cloned {
		display: flex !important;
		gap: 20px !important;
	}

	.hero-top-bar .hamburger-inner,
	.hero-top-bar .hamburger-inner::before,
	.hero-top-bar .hamburger-inner::after {
		background-color: white;
	}

	/* REQUIRED: !important to override JS-injected inline styles on hamburger button */
	.hero-top-bar #mobile-nav-toggle {
		background-color: var(--wp--preset--color--theme-02) !important;
		border: 3px solid var(--wp--preset--color--white) !important;
		border-radius: var(--wp--custom--border--rounded-small);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
	}

	/* Ensure mobile nav overlays are positioned correctly */
	.home-hero-carousel .mobile-nav-overlay,
	.home-hero-carousel .mobile-navigation {
		position: fixed;
	}

	/* Ensure carousel dots stay behind mobile nav */
	/* REQUIRED: !important to override Splide carousel z-index for proper stacking order */
	.home-hero-carousel-dots,
	.carousel-dots {
		z-index: 1 !important;
		bottom: -23px;
	}

	/* Hero mobile navigation wrapper - positions toggle in top right for hero pages */
	/* Vertically aligned with logo center: 20px padding + 37.5px (half of 75px logo) - 24px (half of 48px button) = 33.5px */
	.hero-mobile-nav-wrapper {
		display: block;
		position: fixed;
		top: 34px;
		right: 15px;
		z-index: 99999;
	}

	.hero-mobile-nav-wrapper .mobile-nav-toggle {
		display: flex;
		background-color: var(--wp--preset--color--theme-02);
		border: 3px solid var(--wp--preset--color--white);
		border-radius: var(--wp--custom--border--rounded-small);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
	}

	.hero-mobile-nav-wrapper .hamburger-inner,
	.hero-mobile-nav-wrapper .hamburger-inner::before,
	.hero-mobile-nav-wrapper .hamburger-inner::after {
		background-color: white;
	}

	/* Hero mobile header - logo + hamburger for homepage */
	.hero-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 15px;
		left: 15px;
		right: 15px;
		z-index: 99999;
		pointer-events: none;
	}

	/* Banner is relative on mobile, no positioning adjustment needed */

	.hero-mobile-logo {
		pointer-events: auto;
		display: block;
		background: rgba(26, 78, 162, 0.9);
		padding: 8px 12px;
		border-radius: var(--wp--custom--border--rounded-small);
		border: 3px solid white;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	}

	.hero-mobile-logo img {
		display: block;
		width: 40px;
		height: auto;
	}

	/* REQUIRED: !important to override mobile-nav.js inline display:none on hamburger */
	.hero-mobile-header .mobile-nav-toggle {
		pointer-events: auto;
		display: flex !important;
		background-color: var(--wp--preset--color--theme-02);
		border: 3px solid var(--wp--preset--color--white);
		border-radius: var(--wp--custom--border--rounded-small);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
	}

	.hero-mobile-header .hamburger-inner,
	.hero-mobile-header .hamburger-inner::before,
	.hero-mobile-header .hamburger-inner::after {
		background-color: white;
	}
}

/* ==========================================================================
   1167px: Reduce headline size on home page
   REQUIRED: !important declarations override WP Heading block inline font-size
   and Splide carousel z-index for responsive typography and stacking order.
   ========================================================================== */
@media (max-width: 1167px) {

	body.home .hero-bottom-content h1,
	body.home .home-hero-carousel-content h1,
	body.home .hero-cover-section h1.wp-block-heading {
		font-size: clamp(36px, 6vw, 60px) !important;
	}

	body.home .home-hero-carousel-dots,
	body.home .carousel-dots {
		z-index: 1 !important;
		bottom: -21px;
	}
}

/* ==========================================================================
   1140px: Switch to hamburger menu, hide desktop nav
   REQUIRED: !important declarations override WP Navigation/Group block inline
   display styles and mobile-nav.js injected styles for responsive nav switching.
   ========================================================================== */
@media (max-width: 1140px) {

	/* Hide nav items in both sticky and non-sticky */
	body .hero-top-bar .hero-nav-cloned,
	body .hero-top-bar.is-sticky .hero-nav-cloned,
	body .hero-top-bar .hero-nav-buttons-cloned,
	body .hero-top-bar.is-sticky .hero-nav-buttons-cloned,
	body .hero-top-bar .hero-navigation,
	body .hero-top-bar.is-sticky .hero-navigation {
		display: none !important;
	}

	/* Show hamburger menu */
	body .hero-top-bar .mobile-nav-toggle,
	body .hero-top-bar #mobile-nav-toggle,
	body .hero-top-bar.is-sticky .mobile-nav-toggle,
	body .hero-top-bar.is-sticky #mobile-nav-toggle {
		display: flex !important;
	}

	/* Keep the star logo in sticky state */
	.hero-top-bar.is-sticky .hero-logo {
		width: 50px !important;
		height: 48px !important;
		background-image: url('/wp-content/uploads/2026/01/AP-Logo-Mark-white_2.svg') !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}

	.hero-top-bar.is-sticky .hero-logo svg {
		display: none !important;
	}
}

/* ==========================================================================
   1280px+: Desktop navigation for hero pages
   REQUIRED: !important to override mobile-nav.js inline display styles.
   ========================================================================== */
@media (min-width: 1280px) {

	.hero-mobile-nav-wrapper,
	.hero-mobile-header {
		display: none !important;
	}
}

/* ==========================================================================
   1280px+: Desktop navigation for interior pages (site-header-small)
   CRITICAL: Must come AFTER mobile nav rules to override them.
   REQUIRED: !important declarations override WP Navigation block inline
   display styles for showing desktop nav and hiding hamburger menu.
   ========================================================================== */
@media (min-width: 1280px) {

	/* Show desktop navigation for site-header-small */
	.site-header-small .header-small-navigation,
	.site-header-small .wp-block-navigation,
	.site-header-small .desktop-navigation,
	header.site-header-small .wp-block-navigation {
		display: flex !important;
		flex-wrap: nowrap !important;
	}

	/* Hide hamburger icon for site-header-small ONLY
	   NOTE: Do NOT add broad selectors like "body:not(.home) .mobile-nav-toggle" here
	   as that would break hero pages which need hamburger visible until 1280px */
	.site-header-small .mobile-nav-toggle,
	.site-header-small #mobile-nav-toggle,
	.site-header-small+.mobile-nav-toggle,
	body:not(.home) .site-header-small~.mobile-nav-toggle {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		left: -9999px !important;
	}
}

/* Extra small devices - ensure mobile nav fits */
@media (max-width: 375px) {
	.mobile-navigation {
		width: 90%;
		max-width: 280px;
	}

	/* NOTE: padding-top/left/right set with !important at line ~19264; only padding-bottom needed here */
	.mobile-navigation-inner {
		padding-bottom: 30px;
	}

	/* NOTE: .mobile-navigation .wp-block-navigation-item a removed - font-size overridden at ~19273,
	   padding overridden at ~9299 with !important */
}

/* Mobile Nav CTA Buttons (Careers & Let's Connect) */
.mobile-nav-cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(26, 78, 162, 0.2);
}

/* Mobile Nav CTA Links - custom styled buttons
   REQUIRED: !important to override default anchor text-decoration */
.mobile-nav-cta-link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sansation), sans-serif;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-decoration: none !important;
	text-align: center;
	padding: 12px 32px;
	border-radius: var(--wp--custom--border--rounded-2xl);
	transition: all 0.3s ease;
}

/* Careers button - ghost style with blue border and blue text
   REQUIRED: !important to override inherited button styles for custom ghost button appearance */
.mobile-nav-careers {
	color: var(--wp--preset--color--theme-02) !important;
	background: transparent !important;
	border: 2px solid var(--wp--preset--color--theme-03) !important;
}

.mobile-nav-careers:hover {
	background: rgba(28, 142, 206, 0.1) !important;
	color: var(--wp--preset--color--theme-03) !important;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

/* Footer button group */
.footer-buttons-group {
	gap: 20px;
	margin-bottom: 40px;
}

/* Careers button - outlined style */
/* Footer button styles moved to line 3959+ to consolidate */

/* Footer bottom section */
.footer-bottom {
	gap: 20px;
	align-items: center;
}

.footer-bottom p {
	margin: 0;
}

footer>div>div>div.wp-block-buttons.is-vertical.is-layout-flex.wp-container-core-buttons-is-layout-fe9cc265.wp-block-buttons-is-layout-flex>div.wp-block-button.is-style-outline.is-style-outline--12>a {
	color: var(--wp--preset--color--white);
}

.wp-block-buttons .wp-block-button__link {
	width: 100%;
	color: var(--wp--preset--color--white);
}

/* Privacy choices link */
.footer-privacy-choices a {
	color: white;
	text-decoration: underline;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: opacity 0.3s ease;
}

.footer-privacy-choices a:hover {
	opacity: 0.8;
}

/* Footer policy links (Accessibility, Privacy Policy, Terms of Use) */
footer .has-theme-04-color a {
	transition: color 0.3s ease;
}

footer .has-theme-04-color a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* Mobile footer adjustments (excludes 430px mobile breakpoint which has centered layout)
   NOTE: min-width: 431px prevents these rules from overriding the 430px centered mobile layout */
@media (max-width: 768px) and (min-width: 431px) {
	.footer-buttons-group {
		flex-direction: column;
		align-items: center;
	}

	.footer-button-careers .wp-block-button__link,
	.footer-button-connect .wp-block-button__link {
		width: 100%;
		max-width: 280px;
		text-align: center;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 44px;
	}

	/* Footer flex layout - wrap on mobile
	   REQUIRED: !important to override WP is-layout-flex is-nowrap inline styles for mobile wrapping */
	footer .wp-block-group.is-layout-flex.is-nowrap {
		flex-wrap: wrap !important;
		gap: 40px;
		justify-content: center !important;
	}

	/* Footer direct children - full width on mobile */
	footer .wp-block-group.is-layout-flex.is-nowrap>* {
		flex: 1 1 100%;
		min-width: 100%;
		text-align: center;
	}

	/* Left align buttons in footer on mobile
	   REQUIRED: !important to override WP Buttons block default justify-content */
	footer .wp-block-buttons {
		justify-content: flex-start !important;
		width: 100%;
	}

	footer .wp-block-buttons .wp-block-button {
		width: auto;
		max-width: 280px;
	}

	/* Left align list items in footer
	   REQUIRED: !important to override WP List block default padding */
	footer .wp-block-list {
		text-align: left;
		padding-left: 0 !important;
		list-style-position: inside;
	}

	/* Left align nested groups
	   REQUIRED: !important to override WP Group is-layout-flex default justify/wrap */
	footer .wp-block-group.is-layout-flex {
		justify-content: flex-start !important;
		flex-wrap: wrap !important;
	}

	/* Fix social icons - left align
	   REQUIRED: !important to override WP Social Links block default justify-content */
	footer .wp-block-social-links {
		justify-content: flex-start !important;
	}

	footer p.has-text-align-right {
		text-align: left;
	}

	/* Privacy choices button - ensure readable text */
	footer .wp-block-button .wp-block-button__link {
		white-space: nowrap;
	}
}

/**
 * 8.0 Accessibility - WCAG 2.1 Touch Target Compliance
 *
 * CRITICAL: All interactive elements MUST meet minimum 44x44px touch target size
 * WCAG 2.1 Level AAA (2.5.5) - Level AA strong recommendation
 * Essential for users with motor impairments, tremors, and mobile users
 *
 * Implementation strategy:
 * - All buttons, links, and controls get 44x44px minimum
 * - Carousel dots use ::after pseudo-element for visual appearance
 * - Mobile gets enhanced 48x48px targets for better thumb accuracy
 */

/* Universal button and link minimum touch targets */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
a.wp-block-button__link,
a.button,
.wp-element-button {
	min-height: 44px;
	min-width: 44px;
}

/* Navigation links - ensure adequate touch targets */
.wp-block-navigation-item__content,
.wp-block-navigation-item a,
.is-hero .wp-block-navigation-item__content,
.hero-navigation .wp-block-navigation-item a,
.hero-navigation-block-wrapper .wp-block-navigation-item a {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/**
 * 8.1 Carousel Dots - Touch Targets
 * Strategy: 17x17px clickable area (sized to avoid cutoff), use ::after for 18px visual dot
 */

/* Carousel dots - 17x18px touch target to avoid cutoff */
.project-zero-carousel-dots .carousel-dot,
.service-areas-carousel-dots .carousel-dot,
.hero-carousel-dot,
.job-fit-dot {
	min-width: 17px;
	min-height: 18px;
	width: 17px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
}

/* Home hero carousel dots - 14x17px rectangular dots */
.home-hero-carousel-dots .carousel-dot {
	min-width: 14px;
	min-height: 19px;
	width: 14px;
	height: 19px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	transition: all 0.3s ease;
}

.home-hero-carousel-dots .carousel-dot.is-active {
	width: 102px;
}

/* Visual indicator inside larger touch target - maintains design aesthetic */
.project-zero-carousel-dots .carousel-dot::after,
.service-areas-carousel-dots .carousel-dot::after,
.hero-carousel-dot::after,
.home-hero-carousel-dots .carousel-dot::after,
.job-fit-dot::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none;
}

/* Project Zero carousel dots - blue theme with border */
.project-zero-carousel-dots .carousel-dot::after,
.service-areas-carousel-dots .carousel-dot::after {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02);
}

.project-zero-carousel-dots .carousel-dot:hover::after,
.project-zero-carousel-dots .carousel-dot.is-active::after,
.service-areas-carousel-dots .carousel-dot:hover::after,
.service-areas-carousel-dots .carousel-dot.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
	width: 18px;
	height: 18px;
}

/* Hero carousel dots - white theme */
.hero-carousel-dot::after {
	background-color: rgba(255, 255, 255, 0.5);
	border: 2px solid white;
}

.hero-carousel-dot:hover::after,
.hero-carousel-dot.is-active::after {
	background-color: white;
	width: 18px;
	height: 18px;
}

/* Home hero carousel dots - red/coral theme matching reference design */
.home-hero-carousel-dots .carousel-dot::after {
	background: #d94040;
	opacity: 1;
	border: none;
	width: 14px;
	height: 14px;
	border-radius: var(--wp--custom--border--rounded-sm-lg);
	transition: all 0.3s ease;
	position: static;
	transform: none;
	display: block;
	content: '';
}

.home-hero-carousel-dots .carousel-dot.is-active::after {
	background: #d94040;
	opacity: 1;
	width: 102px;
	height: 19px;
	border-radius: 9.5px;
	position: static;
	transform: none;
	display: block;
	content: '';
}

/* Show only 4 dots total (1 long indicator + 3 short dots) - hide 5th and beyond */
.home-hero-carousel-dots .carousel-dot:nth-child(n+5) {
	display: none;
}

/* First dot is always the active long indicator */
.home-hero-carousel-dots .carousel-dot:first-child {
	width: 102px;
}

.home-hero-carousel-dots .carousel-dot:first-child::after {
	background: #d94040;
	opacity: 1;
	width: 102px;
	height: 19px;
	border-radius: 9.5px;
}

/* Job fit carousel dots - blue theme with border */
.job-fit-dot::after {
	border: 2px solid var(--wp--preset--color--theme-02);
	background-color: transparent;
}

.job-fit-dot:hover::after,
.job-fit-dot.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
	width: 18px;
	height: 18px;
}

/* Home Gallery Splide carousel pagination dots - blue theme with border
   REQUIRED: !important throughout to override Splide plugin default pagination styles */
.home-gallery-section .splide__pagination__page {
	min-width: 17px !important;
	min-height: 17px !important;
	width: 17px !important;
	height: 17px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
	background-color: transparent;
	/* REQUIRED: !important to override Splide plugin styles */
	border: none !important;
	opacity: 1 !important;
	transform: none;
	flex-shrink: 0 !important;
}

.home-gallery-section .splide__pagination__page::after {
	content: '';
	width: 18px !important;
	height: 18px !important;
	/* REQUIRED: !important to override Splide plugin styles */
	border-radius: var(--wp--custom--border--rounded-full) !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none !important;
	background-color: transparent;
	/* REQUIRED: !important to override Splide plugin styles */
	border: 2px solid var(--wp--preset--color--theme-02) !important;
}

.home-gallery-section .splide__pagination__page:hover::after,
.home-gallery-section .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Ensure only single active pagination state
   REQUIRED: !important to override Splide plugin default gap/justify styles */
body .home-gallery-section .splide__pagination {
	display: flex;
	gap: 12px !important;
	justify-content: center !important;
}

/* Limit to only 3 pagination dots (for 3 unique slides) */
body .home-gallery-section .splide__pagination li:nth-child(n+4),
body .home-gallery-section .splide__pagination__page:nth-child(n+4) {
	display: none;
}

/* Force only ONE active dot at a time - hide any subsequent active states */
.home-gallery-section .splide__pagination__page.is-active~.splide__pagination__page.is-active::after {
	background-color: transparent;
	/* REQUIRED: !important to override Splide plugin styles */
	border: 2px solid var(--wp--preset--color--theme-02) !important;
}

/* Ensure first active dot is always filled */
.home-gallery-section .splide__pagination__page.is-active:first-of-type::after {
	background-color: var(--wp--preset--color--theme-02);
}

/**
 * 8.2 Modal and Lightbox Controls
 */

/* Lightbox controls - close, prev, next buttons */
.gallery-lightbox .lightbox-close,
.gallery-lightbox .lightbox-prev,
.gallery-lightbox .lightbox-next,
.leadership-modal__close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

/**
 * 8.3 Form Controls - Text Inputs, Select, Textarea
 */

/* Form inputs - minimum touch target height */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	min-height: 44px;
	padding: 12px;
}

/**
 * 8.5 Hero Navigation Buttons
 */

/* Become a Lifeguard buttons in hero navigation */
/* REQUIRED: !important to override WP Navigation link inline padding for 44px touch target */
.hero-navigation-block-wrapper .wp-block-navigation>ul.wp-block-navigation__container>li.wp-block-navigation-item:last-child a,
.hero-navigation .wp-block-navigation__container>.wp-block-navigation-item:last-child a,
.hero-navigation .wp-block-navigation-item>a[href*="become-a-lifeguard"],
.hero-navigation .wp-block-navigation-item>a[href*="lifeguard"] {
	min-height: 44px;
	padding: 12px 20px !important;
}

/* Partner With Us button */
.wp-block-cover.is-hero .wp-block-button.is-style-subtle .wp-block-button__link,
.wp-block-cover.is-hero .wp-block-button.is-style-subtle .wp-block-button__link.wp-element-button,
.wp-block-cover.alignfull.is-hero .wp-block-button.is-style-subtle .wp-block-button__link,
.wp-block-cover.alignfull.is-hero a.wp-block-button__link[href*="partner-with-us"] {
	min-height: 44px;
	padding: 12px 0 10px;
	/* No horizontal padding so dotted underline only spans text width */
}

/* Yellow wave buttons */
/* REQUIRED: !important to override WP Button block inline padding for 44px touch target */
.wp-block-cover.is-hero .wp-block-buttons .wp-block-button.is-style-outline.is-style-wave .wp-block-button__link.has-theme-04-background-color.has-background.wp-element-button,
.wp-block-cover.alignfull.is-hero .wp-block-button.is-style-wave .wp-block-button__link.has-theme-04-background-color,
.wp-block-cover.alignfull.is-hero .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-theme-04-background-color,
a.wp-block-button__link.has-theme-04-background-color.has-background[href*="become-a-lifeguard"] {
	min-height: 44px;
	padding: 12px 20px !important;
}

/* Note: Blue wave button accessibility styles consolidated to line 7678 */

/**
 * 8.6 Accordion Controls
 */

/* Note: .solutions-accordion .accordion-item touch target consolidated to line 1130 */

/**
 * 8.7 Decorative Elements (Non-Interactive)
 * Note: .company-timeline .timeline-dot styles merged into main declaration above
 */

/**
 * 8.8 Mobile-Specific Touch Target Enhancements
 * Slightly larger targets on mobile for improved thumb accuracy
 */
@media (max-width: 768px) {

	/* All buttons and links - 48px minimum on mobile */
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	.wp-block-button__link,
	a.wp-block-button__link,
	a.button,
	.wp-element-button {
		padding: 11px 30px;
		line-height: normal;
	}

	/* Navigation links - 48px minimum */
	.wp-block-navigation-item__content,
	.wp-block-navigation-item a,
	.is-hero .wp-block-navigation-item__content,
	.hero-navigation .wp-block-navigation-item a,
	.hero-navigation-block-wrapper .wp-block-navigation-item a {

		padding: 11px 30px;
	}

	/* Carousel dots - 48px on mobile */
	.project-zero-carousel-dots .carousel-dot,
	.hero-carousel-dot,
	.home-hero-carousel-dots .carousel-dot,
	.job-fit-dot {
		min-width: 48px;
		min-height: 48px;
		width: 48px;
		height: 48px;
	}

	/* Form inputs - larger on mobile */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="date"],
	select,
	textarea {
		min-height: 48px;
		padding: 14px;
		font-size: var(--wp--preset--font-size--medium);
		/* Prevents iOS zoom on focus */
	}

	/* Lightbox controls - larger touch targets */
	.gallery-lightbox .lightbox-close,
	.gallery-lightbox .lightbox-prev,
	.gallery-lightbox .lightbox-next,
	.leadership-modal__close {
		min-width: 48px;
		min-height: 48px;
		width: 48px;
		height: 48px;
		padding: 12px;
	}

	/* CTA buttons - maintain width but increase height */
	/* REQUIRED: !important to override WP Button block inline padding for 52px mobile touch target */
	.home-cta-button .wp-block-button__link,
	.job-fit-button,
	.lifeguard-intro-section .wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button {

		padding: 11px 30px !important;
	}

	/* Accordion - larger touch targets */
	.solutions-accordion .accordion-item {
		min-height: 48px;
		padding: 24px 40px 24px 0;
	}
}

/**
 * 8.9 Tablet Touch Target Enhancements (992px-1024px)
 * WCAG 2.1 Level AAA (2.5.5) compliance - 44x44px minimum touch targets
 * Addresses accessibility warnings for skip-to-content, carousel dots, and footer links
 */
@media (max-width: 1024px) {

	/* Skip-to-content link - ensure visible focus state with proper touch target */
	.skip-link,
	a[href="#wp--skip-link--target"],
	a.skip-link:focus {
		position: absolute;
		top: -100px;
		left: 0;
		min-width: 44px;
		min-height: 44px;
		padding: 12px 20px;
		background: var(--wp--preset--color--theme-02);
		color: var(--wp--preset--color--white);
		font-weight: 700;
		text-decoration: none;
		z-index: 100000;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	a[href="#wp--skip-link--target"]:focus,
	.skip-link:focus {
		top: 0;
		left: 0;
	}

	/* Carousel pagination buttons - increase to 44x44px minimum */
	.project-zero-carousel-dots .carousel-dot,
	.hero-carousel-dot,
	.job-fit-dot,
	.gallery-carousel-dot,
	.home-hero-carousel-dots .carousel-dot {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
	}

	/* Maintain visual dot appearance within larger touch target */
	.project-zero-carousel-dots .carousel-dot::after,
	.hero-carousel-dot::after,
	.job-fit-dot::after,
	.gallery-carousel-dot::after {
		width: 18px;
		height: 18px;
	}

	/* NOTE: .home-hero-carousel-dots sizes set by combined selector above (line ~10904)
	   and overridden to 24px width at line ~19271 */

	.home-hero-carousel-dots .carousel-dot.is-active {
		width: 102px;
	}

	.home-hero-carousel-dots .carousel-dot::after {
		width: 14px;
		height: 14px;
	}

	.home-hero-carousel-dots .carousel-dot.is-active::after {
		width: 102px;
		height: 19px;
	}

	/* Footer policy links (Accessibility, Privacy Policy, Terms of Use) - increase touch targets */
	footer .has-theme-04-color a,
	footer a[href*="accessibility"],
	footer a[href*="privacy"],
	footer a[href*="terms"] {
		min-height: 44px;
		padding: 12px 8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Footer navigation links - ensure adequate spacing and touch targets */
	footer .wp-block-navigation-item a,
	footer .wp-block-navigation-item__content {
		min-height: 44px;
		min-width: 44px;
		padding: 12px 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Footer Styles */
/* Footer buttons container - 39px gap between Careers and Let's Connect */
/* REQUIRED: !important to override WP Button block inline margin for proper footer button layout */
body .footer-button-careers,
body .footer-button-connect {
	margin: 0 !important;
}

/* REQUIRED: !important to override WP Buttons block inline gap for Figma-spec 39px spacing */
body .wp-block-buttons:has(.footer-button-careers) {
	gap: 39px !important;
}

/* Footer Careers button - outline style per Figma spec */
/* REQUIRED: !important to override WP Button block inline styles for custom outline button design matching Figma */
.footer-button-careers .wp-block-button__link,
body .footer-button-careers .wp-block-button__link {
	display: flex !important;
	width: 174px !important;
	/* Equal vertical padding for visual balance */
	padding: 10px 7px !important;
	justify-content: center !important;
	align-items: center !important;
	border-radius: 54px !important;
	border: 2px solid var(--wp--preset--color--theme-03) !important;
	background-color: transparent !important;
	background-image: none !important;
	/* Remove all height restrictions */
	height: auto !important;
	min-height: unset !important;
	max-height: unset !important;
	/* Font styling per Figma */
	color: var(--wp--preset--color--white) !important;
	text-align: center !important;
	font-family: var(--wp--preset--font-family--sansation), sans-serif !important;
	font-size: var(--wp--custom--fontSize--xl-lg) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: capitalize !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.3s ease, color 0.3s ease;
}

/* REQUIRED: !important to override WP Button hover defaults for custom footer button hover */
body .footer-button-careers .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-04) !important;
	text-decoration: none !important;
	background-color: transparent !important;
}

/* Let's Connect button - water wave animation */
/* Use dark blue as actual background, light blue ::before for wave */
/* REQUIRED: !important to override WP Button block inline styles for custom animated wave button design */
body .footer-button-connect .wp-block-button__link {
	position: relative !important;
	overflow: hidden !important;
	/* Dark blue as actual background */
	background-color: var(--wp--preset--color--theme-02) !important;
	background-image: none !important;
	color: var(--wp--preset--color--white) !important;
	/* Sizing per Figma - 212x51 with 12px top, 7px other padding */
	width: 212px !important;
	height: 51px !important;
	min-width: 212px !important;
	min-height: 51px !important;
	padding: 12px 7px 7px 7px !important;
	border: 2px solid var(--wp--preset--color--theme-03) !important;
	border-radius: 54px !important;
	/* Font styling to match Careers */
	font-family: var(--wp--preset--font-family--sansation), sans-serif !important;
	font-size: var(--wp--custom--fontSize--xl-lg) !important;
	font-weight: 700 !important;
	text-transform: capitalize !important;
	text-align: center;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box;
	/* Create stacking context for transform */
	transform: translateZ(0);
}

/* Light blue wave overlay - z-index: -1 keeps it below text */
body .footer-button-connect .wp-block-button__link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--theme-03);
	border-radius: inherit;
	z-index: -1;
	pointer-events: none;
	/* Static wave shape - light blue shows at bottom, dark blue (background) shows at top */
	clip-path: polygon(0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%);
}

body .footer-button-connect .wp-block-button__link:hover::before {
	animation: water-wave 2s ease-in-out infinite;
}

/* REQUIRED: !important to override WP Button hover default color for animated wave button hover state */
body .footer-button-connect .wp-block-button__link:hover {
	color: var(--wp--preset--color--white) !important;
	text-decoration: none;
}

/* Footer links (ACCESSIBILITY, PRIVACY POLICY, TERMS OF USE) */
.has-theme-02-background-color a {
	color: var(--wp--preset--color--theme-04);
	text-decoration: none;
}

.has-theme-02-background-color a:hover {
	text-decoration: underline;
}

/* Footer container - position relative for absolute children */
.has-theme-02-background-color.has-background {
	position: relative;
}

/* Privacy Choices button */
/* REQUIRED: !important to override WP Button block default positioning for absolute footer placement */
.privacy-choices-button {
	position: absolute !important;
	bottom: -56px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
	width: 120% !important;
	max-width: 100vw !important;
}

/* REQUIRED: !important to hide privacy choices button until OneTrust script initializes */
body .privacy-choices-button {
	display: none !important;
}

/* Footer social links */
.wp-block-social-links.is-style-logos-only .wp-block-social-link {
	background-color: transparent;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link svg {
	width: 64px;
	height: 64px;
}

/* Home Services / Solutions Section - Prevent image clipping */
.solutions-section-cover .wp-block-columns {
	overflow: visible;
}

.solutions-card-new {
	overflow: hidden;
}

/* Our Solutions cards - add horizontal padding to text content area */
/* REQUIRED: !important to override inline padding-left:0;padding-right:0 from pattern */
.solutions-card-new>.wp-block-group {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* Our Solutions - Management card focal point adjustment */
/* REQUIRED: !important to override inline object-position:50% 50% from pattern */
.solutions-card-new .wp-block-cover img[src*="management"] {
	object-position: 90% 30% !important;
}

.solutions-card-new .wp-block-image {
	margin: 0;
	overflow: hidden;
}

/* Homepage Our Solutions grid - add horizontal spacing from viewport edges */
/* Task #14: Management section at edge of page, need padding like other sections */
.solutions-section-cover .is-style-kindling-grid-system {
	padding-left: 40px;
	padding-right: 40px;
}

/* Responsive adjustments for Solutions Section */
@media (max-width: 1920px) {
	.solutions-section-cover>.wp-block-cover__inner-container>.wp-block-columns.alignwide {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Grid system - reduce padding at smaller viewports */
	.solutions-section-cover .is-style-kindling-grid-system {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* ==========================================================================
   1400px: Solutions section responsive adjustments
   REQUIRED: !important to override WP Cover block inline padding at this breakpoint.
   ========================================================================== */
@media (max-width: 1400px) {
	.solutions-section-cover .wp-block-column {
		max-width: 450px;
	}

	.solutions-card .wp-block-cover__inner-container {
		padding: 40px 60px !important;
	}
}

@media (max-width: 1150px) {
	/* Stack Our Solutions cards vertically at 1150px and below */
	/* The section uses .is-layout-grid not .wp-block-columns */
	/* REQUIRED: !important to override WordPress grid template styles */

	/* Target the grid container - force single column layout */
	.solutions-section-cover .is-layout-grid,
	.solutions-section-cover .is-style-kindling-grid-system,
	.solutions-section-cover .wp-block-group.is-layout-grid {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 40px !important;
		grid-template-columns: 1fr !important;
	}

	/* Target the grid items - centered with max-width */
	.solutions-section-cover .wp-block-kindling-grid-item,
	.solutions-section-cover .is-style-grid-item-span-full-to-one-third,
	.solutions-section-cover [class*="is-style-grid-item"] {
		max-width: 500px !important;
		width: 100% !important;
		grid-column: 1 / -1 !important;
	}

	/* Card wrapper - full width within grid item, content stays left-aligned */
	.solutions-section-cover .solutions-card-new {
		max-width: 100% !important;
		width: 100% !important;
		text-align: left !important;
	}

	/* Ensure text content stays left-aligned */
	.solutions-section-cover .solutions-card-new h3,
	.solutions-section-cover .solutions-card-new p,
	.solutions-section-cover .solutions-card-new a {
		text-align: left !important;
	}

	/* Legacy columns support (if any) */
	.solutions-section-cover .wp-block-column,
	body .solutions-section-cover .wp-block-column,
	.our-solutions-section .wp-block-column,
	.single-operations .our-solutions-section .wp-block-column {
		max-width: 100% !important;
		min-width: 0 !important;
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.solutions-section-cover .wp-block-columns,
	body .solutions-section-cover .wp-block-columns,
	.our-solutions-section .wp-block-columns,
	.single-operations .our-solutions-section .wp-block-columns {
		flex-direction: column !important;
		align-items: center !important;
		gap: 40px !important;
		flex-wrap: nowrap !important;
	}
}

/* ==========================================================================
   Homepage Section Padding - Reduce by 10-15% for tighter layout
   Task #18: "Padding above and below can be 10-15% tighter (both ways)"
   REQUIRED: !important to override WordPress block inline padding styles
   ========================================================================== */

/* Intro section (Your Pool is Our Priority) - 182px to 140px (~23% reduction) */
body.home .has-texture-bg[style*="padding"] {
	padding-top: 140px !important;
	padding-bottom: 140px !important;
}

/* Our Solutions section - 80px/63px to 70px/55px (~13% reduction) */
body.home .solutions-section-cover[style*="padding"] {
	padding-top: 70px !important;
	padding-bottom: 55px !important;
}

/* Proven Results at Scale - 80px to 70px (~13% reduction) */
body.home .is-style-section-2.wp-block-kindling-section[style*="padding"] {
	padding-top: 70px !important;
	padding-bottom: 70px !important;
}

@media (min-width: 1440px) {

	/* Service Areas section - 100px to 85px (~15% reduction) */
	body.home .service-areas-section[style*="padding"] {
		padding-top: 85px !important;
		padding-bottom: 85px !important;
	}
}


/* Gallery section - 100px to 85px (~15% reduction) */
body.home .home-gallery-section[style*="padding"] {
	padding-top: 85px !important;
	padding-bottom: 85px !important;
}

@media (max-width: 768px) {
	.solutions-section-cover {
		min-height: auto;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.wp-block-cover.solutions-section-cover .wp-block-cover__inner-container h2.wp-block-heading {
		font-size: var(--wp--custom--fontSize--4xl);
		white-space: normal;
	}

	.solutions-card .wp-block-cover__inner-container {
		padding: 40px 30px !important;
	}

	.solutions-card {
		min-height: 500px !important;
	}

	/* Task #39: Reduce "Trusted Name" gallery section padding on mobile */
	/* REQUIRED: !important to override inline styles from WP database */
	body.home .home-gallery-section[style*="padding"] {
		padding-top: 48px !important;
		padding-bottom: 28px !important;
	}

	/* Task #40: Reduce intro section padding on mobile */
	/* REQUIRED: !important to override inline styles from WP database */
	body.home .wp-container-core-group-is-layout-ee686aff.has-texture-bg[style*="padding"] {
		padding: 20px 30px 30px !important;
	}
}

@media (max-width: 480px) {
	.solutions-card .wp-block-cover__inner-container {
		padding: 30px 20px !important;
	}
}

/* WordPress generated layout class - negative margin adjustment at 1920w viewport */
@media (min-width: 1920px) {
	.wp-container-core-buttons-is-layout-d445cf74 {
		margin-left: -20px;
	}

	/* Navigation buttons spacing at 1920w viewport */
	/* Page-default: standard 32px gap between navigation items and buttons */
	.wp-block-navigation:not(.hero-navigation *):not(.hero-navigation-block-wrapper *) .wp-block-navigation__container {
		gap: 32px;
	}

	.wp-container-core-buttons-is-layout-d445cf74 .wp-block-buttons {
		gap: 32px;
	}

	/* Solutions intro section - make columns 50/50 at 1920w */
	/* REQUIRED: !important to override WP Column block inline flex-basis for 50/50 layout */
	.has-texture-bg .wp-block-columns .wp-block-column {
		flex-basis: 50% !important;
		max-width: 50% !important;
	}

	/* About intro section - make columns 50/50 at 1920w - override inline styles */
	/* REQUIRED: !important to override WP Column block inline flex-basis for 50/50 layout */
	.has-theme-01-background-color .wp-block-columns .wp-block-column[style*="flex-basis:45%"],
	.has-theme-01-background-color .wp-block-columns .wp-block-column[style*="flex-basis:55%"] {
		flex-basis: 50% !important;
		max-width: 50% !important;
	}

	/* About project zero section - make columns 50/50 at 1920w - override inline styles */
	/* REQUIRED: !important to override WP Column block inline flex-basis for 50/50 layout */
	.project-zero-section .wp-block-columns .wp-block-column[style*="flex-basis:50%"] {
		flex-basis: 50% !important;
		max-width: 50% !important;
	}

	/* Fallback for any columns in these sections */
	/* REQUIRED: !important to override WP Column block inline flex-basis for 50/50 layout */
	.has-theme-01-background-color .wp-block-columns .wp-block-column,
	.project-zero-section .wp-block-columns .wp-block-column {
		flex-basis: 50% !important;
		max-width: 50% !important;
	}

	/* About project zero carousel - reset margin to align properly at 1920w */
	.project-zero-section .project-zero-carousel {
		margin-left: 0;
	}

	/* Operations safety carousel - reset margin to align properly at 1920w */
	.safety-section .project-zero-carousel {
		margin-left: 0;
	}

	/* Partner trusted staffing - make first column flush left at 1920w */
	/* REQUIRED: !important to override WP Columns block alignwide auto-margin for flush-left layout */
	.partner-trusted-staffing-section .wp-block-columns.alignwide {
		margin-left: 0 !important;
		margin-right: auto;
		max-width: calc(100% - 181px);
	}

	.partner-trusted-staffing-section .wp-block-columns.alignwide>.wp-block-column:first-child {
		margin-left: 0;
	}

	.partner-trusted-staffing-section .project-zero-carousel {
		position: relative;
		width: 952px;
		max-width: 100%;
		overflow: visible;
		margin-left: 0;
		margin-right: auto;
	}

	/* About timeline - 2 column layout at 1920w */
	body .company-timeline-section .wp-block-columns.alignwide {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		margin-bottom: 60px;
	}

	/* About timeline - align timeline track with heading container at 1920w */
	body .company-timeline-section {
		--timeline-left-offset: calc((100vw - 1440px) / 2);
		display: block;
	}

	.company-timeline .timeline-track {
		padding-left: var(--timeline-left-offset);
	}

	.company-timeline .timeline-line {
		left: var(--timeline-left-offset);
	}
}

/* ============================================
   Careers Benefits 3 Column Pattern

   REQUIRED: !important declarations override WordPress column
   defaults for equal-width layout and proper content containment.
   ============================================ */

/* Container - ensure proper block layout */
body .careers-benefits-3col-section.has-texture-bg {
	display: block;
}

/* Columns container - centered with proper constraints */
/* REQUIRED: !important to override WP Column block inline flex/width/padding styles for centered 3-column layout */
body .careers-benefits-3col-section .wp-block-columns,
body .careers-benefits-3col-section.has-texture-bg .wp-block-columns.alignwide {
	display: flex;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	gap: 60px !important;
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 40px !important;
	padding-right: 40px !important;
}

/* Each column - equal width, contained content */
/* REQUIRED: !important to override WP Column block default flex-basis for equal-width columns */
.careers-benefits-3col-section .wp-block-column,
.careers-benefits-3col-section.has-texture-bg .wp-block-columns.alignwide>.wp-block-column {
	flex: 1 1 0 !important;
	max-width: 33.333% !important;
	min-width: 0 !important;
}

/* Text content - contained within columns */
/* REQUIRED: !important to override WP block inline width/overflow for proper text containment */
.careers-benefits-3col-section .wp-block-column h3,
.careers-benefits-3col-section .wp-block-column p {
	max-width: 100% !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}

/* ============================================
   Responsive Typography Fixes - Mobile & Tablet

   REQUIRED: !important declarations override inline font-size
   styles from WordPress database to ensure readable typography
   on smaller viewports.
   ============================================ */

/* Tablet viewport (768px-992px) - Reduce H2/H3 to prevent 3+ line wrapping */
@media (max-width: 992px) {

	/* H2 headings - general reduction */
	h2.wp-block-heading,
	.wp-block-heading.has-sansation-font-family {
		/* REQUIRED: !important to override mobile responsive font scaling */
		font-size: clamp(32px, 4.5vw, 45px) !important;
		/* REQUIRED: !important to override mobile responsive font scaling */
		line-height: 1.2 !important;
	}

	/* H3 headings - benefits cards and other sections */
	h3.wp-block-heading,
	.careers-benefits-3col-section h3,
	.has-texture-bg h3 {
		font-size: clamp(24px, 3.5vw, 32px);
		line-height: 1.3;
	}

	/* Partner page heading - "40+ Years of Trusted Partnerships" */
	.has-texture-bg h1.wp-block-heading {
		font-size: clamp(32px, 5vw, 45px);
	}

	/* About page safety heading */
	.has-theme-02-background-color h2.wp-block-heading {
		font-size: clamp(28px, 4vw, 40px);
	}
}

/* Mobile viewport (below 768px) - Aggressive reduction for 4-line max */
@media (max-width: 768px) {

	/* H2 headings - mobile sizing */
	h2.wp-block-heading,
	.wp-block-heading.has-sansation-font-family,
	.has-texture-bg h2.wp-block-heading,
	.has-water-ripple-bg h2.wp-block-heading,
	.has-red-pattern-bg h2.wp-block-heading,
	.has-theme-02-background-color h2.wp-block-heading {
		/* REQUIRED: !important to override mobile responsive font scaling */
		font-size: clamp(30px, 6vw, 42px) !important;
		/* REQUIRED: !important to override mobile responsive font scaling */
		line-height: 1.2 !important;
		/* REQUIRED: !important to override mobile responsive font scaling */
		word-spacing: normal !important;
	}

	/* H3 headings - mobile sizing for cards */
	/* REQUIRED: !important on word-spacing to override mobile responsive font scaling */
	h3.wp-block-heading,
	.careers-benefits-3col-section h3,
	.has-texture-bg h3,
	.has-theme-07-background-color h3 {
		font-size: clamp(20px, 4vw, 28px);
		line-height: 1.25;
		word-spacing: normal !important;
	}

	/* Home mission section - "We combine the strength..." */
	.home-mission-section h2.wp-block-heading {
		font-size: clamp(24px, 5.5vw, 36px);
		line-height: 1.2;
	}

	/* Partner intro heading - reduce significantly */
	.has-texture-bg h1.wp-block-heading[style*="font-size"] {
		font-size: clamp(28px, 6vw, 40px);
		line-height: 1.15;
	}

	/* About safety heading - "OUR APPROACH TO SAFETY..." */
	.has-theme-02-background-color h2.wp-block-heading {
		font-size: clamp(22px, 5vw, 32px);
		line-height: 1.2;
	}

	/* Careers benefit cards - "Comprehensive Insurance" etc */
	/* REQUIRED: !important on hyphens to enable word breaking for long benefit titles */
	.careers-benefits-3col-section .wp-block-column h3 {
		font-size: clamp(18px, 4.5vw, 24px);
		line-height: 1.3;
		hyphens: auto !important;
		-webkit-hyphens: auto !important;
	}
}

/* Small mobile (below 480px) - Further reduction */
@media (max-width: 480px) {

	/* All H2 headings - very aggressive reduction */
	h2.wp-block-heading,
	.has-texture-bg h2.wp-block-heading,
	.home-mission-section h2.wp-block-heading {
		/* REQUIRED: !important to override mobile responsive font scaling */
		font-size: clamp(20px, 6vw, 32px) !important;
		/* REQUIRED: !important to override mobile responsive font scaling */
		line-height: 1.15 !important;
		/* REQUIRED: !important to override mobile responsive font scaling */
		letter-spacing: -0.02em !important;
	}

	/* Intro section h2 and hr - no margin on mobile */
	/* REQUIRED: !important to override WP Heading block inline margin for compact mobile layout */
	.about-intro-section h2,
	.solutions-intro-section h2,
	.partner-intro-section h2,
	.operations-intro-section h2,
	.lifeguard-intro-section h2,
	.service-areas-section h2,
	.page-intro-section h2 {
		margin-bottom: 0 !important;
	}

	/* REQUIRED: !important to override WP Separator block inline margin for compact mobile layout */
	.about-intro-section hr,
	.about-intro-section .wp-block-separator,
	.solutions-intro-section hr,
	.solutions-intro-section .wp-block-separator,
	.partner-intro-section hr,
	.partner-intro-section .wp-block-separator,
	.operations-intro-section hr,
	.operations-intro-section .wp-block-separator,
	.lifeguard-intro-section hr,
	.lifeguard-intro-section .wp-block-separator,
	.service-areas-section hr,
	.service-areas-section .wp-block-separator,
	.page-intro-section hr,
	.page-intro-section .wp-block-separator {
		margin-bottom: 0 !important;
	}

	/* Intro sections - span 100% width on mobile */
	/* REQUIRED: !important to override WP Group block inline width for full-width mobile layout */
	.about-intro-section,
	.solutions-intro-section,
	.partner-intro-section,
	.operations-intro-section,
	.lifeguard-intro-section,
	.service-areas-section,
	.page-intro-section {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Page intro sections - full width layout on mobile */
	/* REQUIRED: !important to override WP Columns block inline width/gap/margin for mobile edge-to-edge layout */
	.page-intro-section .wp-block-columns {
		width: calc(100% + 32px) !important;
		max-width: calc(100% + 32px) !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		gap: 0 !important;
	}

	/* REQUIRED: !important to override WP Column block inline width/padding/flex-basis for stacked mobile layout */
	.page-intro-section .wp-block-column {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		flex-basis: 100% !important;
	}

	/* Page intro sections - allow image to overflow */
	/* REQUIRED: !important to override WP block default overflow:hidden for mobile image positioning */
	.page-intro-section,
	.page-intro-section .wp-block-columns,
	.page-intro-section .wp-block-column {
		overflow: visible !important;
	}

	/* Page intro sections - image full width, positioned at viewport edge
	   REQUIRED: !important to override WP Image block inline sizing for full-viewport mobile images */
	.page-intro-section .wp-block-image,
	.page-intro-section .wp-block-column .wp-block-image {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 30px !important;
		position: relative !important;
		/* Default offset for pages with 16px intro padding */
		left: -19px !important;
	}

	/* About Us (page-id-13) has 23px column padding, needs different offset */
	.page-id-13 .page-intro-section .wp-block-image,
	.page-id-13 .page-intro-section .wp-block-column .wp-block-image {
		left: 0 !important;
	}

	/* Service Areas (page-id-17) image column offset to reach x=0 (edge-to-edge) */
	.page-id-17 .page-intro-section .wp-block-image,
	.page-id-17 .page-intro-section .wp-block-column .wp-block-image {
		left: 0 !important;
	}

	/* Lifeguard (page-id-23) image column offset to reach x=0 */
	.page-id-23 .page-intro-section .wp-block-image,
	.page-id-23 .page-intro-section .wp-block-column .wp-block-image {
		left: -8px !important;
	}

	.page-intro-section .wp-block-image img,
	.page-intro-section .wp-block-column .wp-block-image img {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* About Us intro - text section 15px from viewport edge */
	.page-id-13 .page-intro-section .wp-block-column {
		padding-left: 23px !important;
		padding-right: 23px !important;
	}

	/* Page intro sections - hr separator left aligned on mobile */
	.page-intro-section hr,
	.page-intro-section .wp-block-separator {
		margin-left: 0 !important;
		margin-right: auto !important;
		width: 200px !important;
		align-self: flex-start !important;
	}

	/* Page intro sections - flex parent needs to allow left alignment */
	.page-intro-section .wp-block-group.is-layout-flex,
	.page-intro-section .wp-block-group.is-vertical {
		align-items: flex-start !important;
	}

	/* Trusted partners section - compact on mobile
	   REQUIRED: !important to override WP Group block inline min-height/padding for compact mobile layout */
	.trusted-partners-section {
		min-height: unset !important;
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	/* H3 headings - compact sizing */
	h3.wp-block-heading,
	.careers-benefits-3col-section h3,
	.has-texture-bg h3 {
		font-size: clamp(18px, 5vw, 24px);
		line-height: 1.25;
	}

	/* Benefit cards - enable hyphenation for long words
	   REQUIRED: !important to enable CSS hyphenation for long benefit titles */
	.careers-benefits-3col-section .wp-block-column h3 {
		font-size: clamp(16px, 5vw, 22px);
		hyphens: auto !important;
		-webkit-hyphens: auto !important;
		word-break: break-word !important;
	}

	/* Partner/About headings - max compression */
	.has-texture-bg h1.wp-block-heading,
	.has-theme-02-background-color h2.wp-block-heading {
		font-size: clamp(20px, 6.5vw, 32px);
		line-height: 1.1;
		letter-spacing: -0.02em;
	}
}

/* Extra small mobile (320px-375px) - Maximum compression */
@media (max-width: 375px) {

	/* Override existing rules with more aggressive sizing */
	h1.wp-block-heading,
	h2.wp-block-heading {
		/* REQUIRED: !important to override mobile responsive font scaling */
		font-size: clamp(18px, 7vw, 28px) !important;
		/* REQUIRED: !important to override mobile responsive font scaling */
		line-height: 1.1 !important;
		/* REQUIRED: !important to override mobile responsive font scaling */
		letter-spacing: -0.03em !important;
	}

	h3.wp-block-heading {
		/* REQUIRED: !important to override mobile responsive font scaling */
		font-size: clamp(16px, 6vw, 22px) !important;
		line-height: 1.2;
	}

	/* Careers benefit cards - smallest readable size */
	.careers-benefits-3col-section .wp-block-column h3 {
		font-size: clamp(15px, 5.5vw, 20px);
		line-height: 1.25;
	}

	/* Home mission paragraph */
	.home-mission-section p {
		font-size: clamp(14px, 4vw, 18px);
		line-height: 1.4;
	}
}

/**
 * 9.0 Column Stacking Override for Tablet Portrait (768px)
 *
 * WordPress core stacks columns below 782px by default.
 * At 768px (tablet portrait), most content should actually stack for readability.
 * Only specific 2-column layouts with images should remain side-by-side.
 *
 * NOTE: The audit flagging "unexpected column stacking" at 768px is expected behavior.
 * WordPress intentionally stacks columns below 782px for better mobile/tablet UX.
 * This is NOT a bug - it's a feature for responsive design.
 *
 * REQUIRED: !important declarations override WordPress core column flex-wrap
 * behavior to maintain specific layouts at tablet breakpoints.
 */
@media (min-width: 768px) and (max-width: 781px) {

	/* Keep image+text 2-column layouts side-by-side on tablets */
	.has-texture-bg>.wp-block-columns.alignwide:not(.has-3-columns),
	.operations-intro-section>.wp-block-columns,
	.partner-intro-section .wp-block-columns.alignwide {
		flex-wrap: nowrap !important;
	}

	/* Maintain proper column sizing for these specific layouts */
	.has-texture-bg>.wp-block-columns.alignwide:not(.has-3-columns)>.wp-block-column,
	.operations-intro-section>.wp-block-columns>.wp-block-column,
	.partner-intro-section .wp-block-columns.alignwide>.wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}

	/* Let 3-column layouts stack naturally at 768px for better readability */
	.has-texture-bg .wp-block-columns.has-3-columns,
	.careers-benefits-section .wp-block-columns,
	.has-water-ripple-bg .wp-block-columns {
		flex-wrap: wrap !important;
	}
}

/**
 * 10.0 Markup.io Batch 1 Fixes
 * Tasks: #2, #3, #7, #11, #28, #29, #43
 */



/* Reset heading margin-top to 0 since eyebrow already has 10px bottom margin */
.about-intro-section .wp-block-group>p.has-theme-06-color+h1,
.about-intro-section .wp-block-group>p.has-theme-06-color+h2,
.solutions-intro-section .wp-block-group>p.has-theme-06-color+h1,
.solutions-intro-section .wp-block-group>p.has-theme-06-color+h2,
.partner-intro-section .wp-block-group>p.has-theme-06-color+h1,
.partner-intro-section .wp-block-group>p.has-theme-06-color+h2,
.operations-intro-section .wp-block-group>p.has-theme-06-color+h1,
.operations-intro-section .wp-block-group>p.has-theme-06-color+h2,
.lifeguard-intro-section .wp-block-group>p.has-theme-06-color+h1,
.lifeguard-intro-section .wp-block-group>p.has-theme-06-color+h2,
.service-areas-section .wp-block-group>p.has-theme-06-color+h1,
.service-areas-section .wp-block-group>p.has-theme-06-color+h2,
.page-intro-section .wp-block-group>p.has-theme-06-color+h1,
.page-intro-section .wp-block-group>p.has-theme-06-color+h2,
.has-texture-bg .wp-block-column .wp-block-group>p.has-theme-06-color+h1,
.has-texture-bg .wp-block-column .wp-block-group>p.has-theme-06-color+h2,
[class*="-intro"] .wp-block-group>p.has-theme-06-color+h1,
[class*="-intro"] .wp-block-group>p.has-theme-06-color+h2 {
	margin-top: 0 !important;
}

/* Task #28 - Space out bullet flags on Lifeguard page */
/* Increase gap between flag icon and text content */
/* REQUIRED: !important to override inline blockGap styles from WordPress */
.has-summer-pattern-bg .lifeguard-love-grid .wp-block-column>.wp-block-group {
	gap: 24px !important;
}

/* Target the flex container holding flag icon and text */
/* REQUIRED: !important to override WP Group block inline gap for consistent spacing */
.lifeguard-love-grid .wp-block-group[style*="flex"] {
	gap: 24px !important;
}

/* Fallback: add margin to flag icon */
/* REQUIRED: !important to override WP Image block inline margin for icon spacing */
.lifeguard-flag-icon {
	margin-right: 16px !important;
}

/* Task #29 - Remove bold from quad copy on Lifeguard page */
/* Ensure paragraph text in lifeguard-love section is not bold */
/* Matches the standard body copy weight used elsewhere on the site */
.lifeguard-love-grid .wp-block-column p.has-inter-font-family,
.has-summer-pattern-bg .lifeguard-love-grid p {
	font-weight: 400;
}

/**
 * 10.1 Markup.io Batch 2+ Fixes
 * Tasks: #11, #25, #41, #43
 */

/* Task #41 - Left align dividers in solutions cards */
/* Home Services / Operations Solutions - left align separators under card headings */
/* REQUIRED: !important needed to override WordPress core separator centering */
.solutions-card-new .wp-block-separator {
	margin-left: 0 !important;
	margin-right: auto !important;
	width: 231px !important;
}

/* "Read More" underline styling in solutions cards */
/* Move underline down 2px for better visual spacing */
.solutions-card-new p u,
.solutions-card-new p strong u {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Solutions card cover images - use padding-bottom for aspect ratio */
/* REQUIRED: !important to override WP Cover block inline min-height for aspect ratio hack */
.solutions-card-new .wp-block-cover.solutions-card-image {
	min-height: 0 !important;
	height: 0;
	padding-bottom: calc(645 / 617 * 100%);
	/* 617:645 aspect ratio */
	position: relative;
}

.solutions-card-new .wp-block-cover.solutions-card-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hide the spacer inside the cover block inner container */
.solutions-card-new .wp-block-cover.solutions-card-image .wp-block-cover__inner-container {
	display: none;
}

/* Task #11 - Move "About Us" closer to H1 on interior pages */
/* Reduce gap between page label (h3) and main heading (h1) in intro sections */
.wp-block-group .wp-block-group h3.wp-block-heading+h1.wp-block-heading {
	margin-top: -16px;
}

/* Task #43 - Tighten underline spacing on Partner navigation link */
/* Reduce text-underline-offset from 10px to 6px for better visual balance */
.hero-navigation-block-wrapper .wp-block-navigation-item a[href*="partner"],
.hero-navigation .wp-block-navigation-item a[href*="partner"],
.wp-block-navigation-item a[href*="partner-with-us"] {
	text-underline-offset: 6px;
}

/* Partner With Us button - page-default template */
/* Removed extra margins - gap property handles spacing between nav items */
.site-header .desktop-navigation .wp-block-navigation-item a[href*="partner-with-us"],
.site-header .wp-block-navigation.desktop-navigation .wp-block-navigation-item a[href*="partner-with-us"],
.site-header .wp-block-navigation.desktop-navigation a[href*="partner-with-us"] {
	margin-left: 0;
	margin-right: 0;
}

.site-header .desktop-navigation .wp-block-navigation-item a[href*="partner-with-us"]:hover,
.site-header .wp-block-navigation.desktop-navigation .wp-block-navigation-item a[href*="partner-with-us"]:hover,
.site-header .wp-block-navigation.desktop-navigation a[href*="partner-with-us"]:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--theme-05);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
	color: #f4f2ed;
}

/* Become A Lifeguard button - page-default template wave animation */
/* Target is-style-wave buttons in header navigation (non-hero pages) */
/* REQUIRED: !important to override WP Button block inline styles for custom wave animation button design */
header.wp-block-template-part .wp-block-button.is-style-wave .wp-block-button__link,
header.wp-block-template-part .wp-block-button.is-style-wave a.wp-block-button__link[href*="lifeguard"] {
	position: relative !important;
	overflow: hidden !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-radius: var(--wp--custom--border--rounded-xl) !important;

	padding: 10px 20px !important;
	z-index: 1;
}

/* White base layer */
header.wp-block-template-part .wp-block-button.is-style-wave .wp-block-button__link::before,
header.wp-block-template-part .wp-block-button.is-style-wave a.wp-block-button__link[href*="lifeguard"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	border-radius: inherit;
	z-index: -2;
	pointer-events: none;
}

/* Yellow overlay with static wave shape */
header.wp-block-template-part .wp-block-button.is-style-wave .wp-block-button__link::after,
header.wp-block-template-part .wp-block-button.is-style-wave a.wp-block-button__link[href*="lifeguard"]::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--theme-04);
	border-radius: inherit;
	z-index: -1;
	pointer-events: none;
	clip-path: polygon(0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%);
}

/* Wave animation on hover */
header.wp-block-template-part .wp-block-button.is-style-wave .wp-block-button__link:hover::after,
header.wp-block-template-part .wp-block-button.is-style-wave a.wp-block-button__link[href*="lifeguard"]:hover::after {
	animation: water-wave 2s ease-in-out infinite;
}

header.wp-block-template-part .wp-block-button.is-style-wave .wp-block-button__link:hover,
header.wp-block-template-part .wp-block-button.is-style-wave a.wp-block-button__link[href*="lifeguard"]:hover {
	color: var(--wp--preset--color--theme-02) !important;
	text-decoration: none;
	background-color: transparent !important;
}

/**
 * Gallery Carousel - Home page bottom carousel
 * Shows 3 images at a time with 5 per-image dot navigation
 */
.gallery-carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.gallery-carousel-track {
	display: flex;
	gap: 32px;
	transition: transform 0.4s ease-out;
}

.gallery-carousel-slide {
	flex: 0 0 627px;
	min-width: 0;
}

.gallery-carousel-slide img {
	width: 627px;
	height: 491px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.gallery-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.gallery-carousel-dot {
	min-width: 17px;
	min-height: 18px;
	width: 17px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.gallery-carousel-dot::after {
	content: '';
	width: 17px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02, #1a4ea2);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
	pointer-events: none;
}

.gallery-carousel-dot:hover::after,
.gallery-carousel-dot.is-active::after {
	background-color: var(--wp--preset--color--theme-02, #1a4ea2);
}

/* Medium Desktop: Scale slides for viewports 1025px-1560px */
@media (max-width: 1560px) {
	.gallery-carousel-slide {
		flex: 0 0 calc((100% - 64px) / 3);
		/* 3 slides with 2 gaps (32px each) */
		max-width: 627px;
		/* Don't exceed original size */
	}

	.gallery-carousel-slide img {
		width: 100%;
		height: auto;
		aspect-ratio: 627 / 491;
	}
}

/* Tablet: 2 slides */
@media (max-width: 1024px) {
	.gallery-carousel-track {
		gap: 24px;
	}

	.gallery-carousel-slide {
		flex: 0 0 calc((100% - 24px) / 2);
		/* 2 slides with 1 gap */
	}
}

/* Mobile: 1 slide */
@media (max-width: 768px) {
	.gallery-carousel-track {
		gap: 16px;
	}

	.gallery-carousel-slide {
		flex: 0 0 100%;
	}
}

/**
 * Footer Styling
 * - 10px gap between icons
 * - Privacy choices button positioning
 */

/* Footer award icons - 10px gap */
.wp-block-group:has(.wp-block-image[style*="width:100px"]) {
	gap: 44px;
}

/* Footer award images - hover scale effect */
.wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex:has(> .wp-block-image) .wp-block-image img {
	transition: transform 0.3s ease;
	cursor: pointer;
}

.wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex:has(> .wp-block-image) .wp-block-image img:hover {
	transform: scale(1.2);
}

/* Footer social icons - 10px gap */
.wp-block-social-links {
	gap: 44px;
}

/* Ensure parent has relative positioning for absolute child */
.wp-block-group:has(.privacy-choices-button) {
	position: relative;
}

/**
 * Partner Value Section - Uppercase Headings
 * Per Figma design, headings in this section should be uppercase
 */
.is-style-type-style-headline-medium {
	text-transform: uppercase;
}

/**
 * Service Areas Map - Stats Overlay (page-id-17 only)
 * Position the stats box over the map image
 */
.page-id-17 .has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child {
	position: absolute !important;
	left: 200px !important;
	top: 120px !important;
	bottom: auto !important;
	width: auto !important;
	max-width: 500px;
	z-index: 10;
}

.page-id-17 .has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns {
	position: relative;
}

/**
 * Careers Leadership Section - Separator styling
 * Remove float and set exact dimensions: 224x2px #1c8ece
 */
.careers-leadership-separator.wp-block-separator.alignleft {
	float: none !important;
	width: 224px !important;
	height: 2px !important;
	min-height: 2px !important;
	border: none;
	background-color: var(--wp--preset--color--theme-03);
}

/**
 * Hero Navigation - consistent 32px gap
 * Override all WordPress navigation gap rules
 */
.hero-navigation .hero-nav-cloned.wp-block-navigation__container.wp-block-navigation {
	gap: 32px;
}

/* Responsive hero-nav-cloned gap overrides - consistent 32px */


@media (min-width: 1512px) and (max-width: 1560px) {
	.hero-navigation .hero-nav-cloned.wp-block-navigation__container.wp-block-navigation {
		gap: 14px !important;
	}
}

@media (max-width: 1511px) {
	.hero-navigation .hero-nav-cloned.wp-block-navigation__container.wp-block-navigation {
		gap: 14px !important;
	}
}

@media (max-width: 1440px) {
	.hero-navigation .hero-nav-cloned.wp-block-navigation__container.wp-block-navigation {
		gap: 23px !important;
	}
}

/**
 * Leadership Team - Square Images (444x444 per Figma)
 */
.leadership-cards .team-member-card__photo-wrapper {
	max-width: 444px;
	max-height: 444px;
	margin: 0 auto;
}

/* Old Figma modal styles removed - using compact styles defined later in file */

/**
 * Contact Section - Form Name Fields Grid Layout
 * Applies to operations, partner, and contact sections
 */
.operations-contact-section .gform_wrapper .gfield--type-name .ginput_container_name,
.partner-contact-section .gform_wrapper .gfield--type-name .ginput_container_name,
.contact-contact-section .gform_wrapper .gfield--type-name .ginput_container_name,
.contact-hero-form-section .gform_wrapper .gfield--type-name .ginput_container_name {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 38px !important;
}

/**
 * Solutions Read More Links - Inter Bold, underlined per Figma
 */
.solutions-read-more {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-family: var(--wp--preset--font-family--inter), Inter, sans-serif;
	font-weight: 700;
	transition: color 0.2s ease;
}

.solutions-read-more:hover {
	color: var(--wp--preset--color--theme-02);
	text-decoration: underline;
}

.single-operations .operations-map-section .operations-map-content {
	position: absolute;
	top: 80px;
	left: 80px;
	z-index: 10;
	max-width: 590px;
	/* Consolidated: was 400px here, overridden to 590px later */
	padding-top: 133px;
	/* Merged from line ~4841 */
}

/* Merged: flex centering + sizing from line ~4831 */
.single-operations .operations-map-section .operations-map-image {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
	height: 100%;
}

/* Merged: base sizing + object-fit from line ~4836 */
.single-operations .operations-map-section .operations-map-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: top center;
}

/* Operations Intro - Remove max-width and adjust text spacing */
.operations-intro-section.has-texture-bg .wp-block-group.alignwide>.wp-block-columns.alignwide,
.operations-intro-section.has-water-ripple-bg .wp-block-group.alignwide>.wp-block-columns.alignwide {
	max-width: none;
}

.operations-intro-section .wp-block-columns>.wp-block-column:last-child {
	margin-left: 188px;
	padding-right: 15%;
}

/* Operations Intro - Image column fixes (high specificity) */
.single-operations .operations-intro-section .wp-block-group.alignwide>.wp-block-columns.alignwide.has-2-columns>.wp-block-column:first-child {
	margin-left: 0 !important;
}

.single-operations .operations-intro-section .wp-block-group.alignwide>.wp-block-columns.alignwide.has-2-columns>.wp-block-column:first-child img {
	width: 881px !important;
	height: 660px !important;
	object-fit: cover;
}

/* Operations Intro - Image column with exact class targeting */
.operations-intro-section .wp-block-columns.alignwide.are-vertically-aligned-center.has-2-columns>.wp-block-column:first-child {
	margin-left: 0 !important;
}

.operations-intro-section .wp-block-image.size-large.has-offset-pool-bg,
.operations-intro-section .wp-block-image.size-large.has-offset-pool-bg img {
	width: 881px !important;
	height: 660px !important;
	object-fit: cover;
}

/* Override margin-left for operations intro image column */
.single-operations .operations-intro-section .is-layout-constrained>.wp-block-columns:where(:not(.alignleft):not(.alignright):not(.alignfull))>.wp-block-column:first-child {
	margin-left: 0 !important;
}

body.single-operations .operations-intro-section .wp-block-column:first-child .wp-block-image.has-offset-pool-bg {
	margin-left: 0 !important;
	width: 881px !important;
}

body.single-operations .operations-intro-section .wp-block-column:first-child .wp-block-image.has-offset-pool-bg img {
	width: 881px !important;
	height: 660px !important;
	object-fit: cover;
}

/* CRITICAL: Override for operations intro - image column NO margin
   REQUIRED: !important to override WP Columns block inline margin for flush-left positioning */
body.single-operations .operations-intro-section .is-layout-constrained>.wp-block-columns.alignwide {
	margin-left: 0 !important;
}

body.single-operations .operations-intro-section .wp-block-columns.alignwide>.wp-block-column:first-child,
body.single-operations .operations-intro-section .wp-block-columns.alignwide>.wp-block-column:first-child>* {
	margin-left: 0 !important;
}

body.single-operations .operations-intro-section .wp-block-image.has-offset-pool-bg,
body.single-operations .operations-intro-section .wp-block-image.has-offset-pool-bg img {
	margin-left: 0 !important;
	width: 881px !important;
	height: 660px !important;
	object-fit: cover;
}



/* Operations Location Title - Magenta */
.operations-location-title {
	color: #e0f;
	font-family: Sansation, sans-serif;
	font-size: var(--wp--custom--fontSize--5xl);
	font-style: normal;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	display: block;
}

/* Operations Map Section - Text alignment and separator
   REQUIRED: !important to override WP block default text alignment for left-aligned map content */
.single-operations .operations-map-section .operations-map-content .wp-block-heading,
.single-operations .operations-map-section .operations-map-content p {
	text-align: left !important;
}

.single-operations .operations-map-section .operations-map-content .wp-block-separator {
	width: 224px !important;
	height: 2px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 38px !important;
}

/* Operations Leadership Section - Separator */
.single-operations .operations-leadership-section .wp-block-separator,
.operations-leadership-section .wp-block-separator {
	width: 224px !important;
	height: 2px !important;
	margin-bottom: 59px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ============================================
   Operations Leadership Section - Overlap Effect
   Cards overlap from light cream area into blue section

   REQUIRED: !important declarations override WordPress block
   background colors to achieve transparent layering effect.
   ============================================ */

/* Leadership wrapper - pull up into map section, transparent to show water ripple */
.single-operations .leadership-wrapper {
	position: relative;
	z-index: 2;
	margin-top: -200px;
	background-color: transparent !important;
}

/* Leadership section - transparent background, use pseudo for blue */
.single-operations .leadership-section.has-theme-02-background-color {
	position: relative;
	background-color: transparent !important;
	padding-top: 60px !important;
	padding-bottom: var(--wp--preset--spacing--80) !important;
}

/* Create blue background starting after the header area */
.single-operations .leadership-section.has-theme-02-background-color::before {
	content: '';
	position: absolute;
	top: 280px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--wp--preset--color--theme-02, #1a4ea2);
	z-index: 0;
}

/* Leadership header - stays in cream area */
.single-operations .leadership-section .leadership-header {
	position: relative;
	z-index: 3;
	margin-bottom: 40px !important;
}

/* Change heading color to blue when in cream area */
.single-operations .leadership-section .leadership-header h2 {
	color: var(--wp--preset--color--theme-02, #1a4ea2) !important;
}

/* Leadership grid - overlap cards from cream into blue */
.single-operations .leadership-section .leadership-grid {
	position: relative;
	z-index: 2;
}

/* Card photos - ensure they're visible in both cream and blue areas */
.single-operations .leadership-section .team-member-card__photo-wrapper {
	background-color: transparent;
}

/* Operations Contact Section - Separator left aligned */
.single-operations .operations-contact-section .wp-block-separator,
.operations-contact-section .wp-block-separator {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Operations Contact Section - 60/40 column override */
@media (min-width: 1920px) {
	.operations-contact-section.has-theme-01-background-color .wp-block-columns .wp-block-column:first-child {
		flex-basis: 60% !important;
		max-width: 60% !important;
	}

	.operations-contact-section.has-theme-01-background-color .wp-block-columns .wp-block-column:last-child {
		flex-basis: 40% !important;
		max-width: 40% !important;
	}
}

/* Operations/Partner Contact Section - Paragraph margins */
.operations-contact-section .wp-block-group>p,
.partner-contact-section .wp-block-group>p {

	margin-right: 0 !important;
	color: #000 !important;
}

/* Operations/Partner Contact Section - First column padding and height */
.has-droplet-bg:has(.partner-contact-image-column) .wp-block-column:first-child,
.has-droplet-bg:has(.contact-image-column) .wp-block-column:first-child,
.operations-contact-section .wp-block-column:first-child,
.partner-contact-section .wp-block-column:first-child {
	padding-top: 50px !important;
	padding-bottom: 90px !important;
	overflow-y: visible;
}

/* Operations map content - desktop only */
@media (min-width: 1200px) {
	.wp-container-core-group-is-layout-ccfcd18d> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: 810px;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

/* Texture bg columns - desktop only */
@media (min-width: 1200px) {
	.has-texture-bg .wp-block-columns.alignwide:not(.has-3-columns)>.wp-block-column:first-child {
		margin-left: 0;
		padding-left: 0;
	}
}



/* Partner intro section - separator styling */
/* REQUIRED: !important to override WP Separator block default margin styles for left-aligned separator */
.partner-intro-section .wp-block-separator {
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 40px !important;
	padding-bottom: 10px;
}

/* Fix: Show navigation in standard header (has-theme-02-background-color) at desktop sizes */
/* This overrides the 1700px hide rule which was intended for hero navigation only */
/* Standard blue header pages show desktop nav at 1280px+ to prevent button clipping */
/* REQUIRED: !important to override mobile nav hide rules for desktop viewport navigation visibility */
@media (min-width: 1280px) {
	.has-theme-02-background-color .wp-block-navigation {
		display: flex !important;
	}

	.has-theme-02-background-color .wp-block-navigation__container {
		display: flex !important;
		flex-wrap: nowrap;
	}
}

/* Fix: Button hover state for theme-01-color + theme-02-background buttons */
/* REQUIRED: !important to override existing !important rules on .has-theme-02-background-color and .has-theme-01-color */
.wp-block-button__link.has-theme-01-color.has-theme-02-background-color:hover,
a.wp-block-button__link.has-theme-01-color.has-theme-02-background-color:hover {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
}

/* Solutions READ MORE links - dark blue on hover */
/* REQUIRED: !important to override WP link inline color for hover state */
.solutions-read-more,
.solutions-card-new a[href*="our-solutions"] {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.solutions-read-more:hover,
.solutions-card-new a[href*="our-solutions"]:hover {
	color: var(--wp--preset--color--theme-02) !important;
}

/* Service Areas READ MORE button hover - same as intro section */
/* REQUIRED: !important to override inline background-color */
.service-areas-section .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
}

/* Home Dual CTA buttons hover - BOTH buttons: dark blue background, white text */
/* Override the generic [href*="lifeguard"] rule at line ~5898 */
/* REQUIRED: !important to override higher-specificity lifeguard button rule and WP Button block inline styles */
.home-cta-dual-section .home-cta-button .wp-block-button__link:hover,
.home-cta-dual-section .home-cta-button .wp-block-button__link[href*="lifeguard"]:hover,
.home-cta-dual-section .home-cta-button a.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--theme-02) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ==========================================================================
   Operations Pages - 375px Mobile Horizontal Overflow Fix
   Fix for all 7 Operations pages at 375px viewport
   REQUIRED: !important declarations override WP Columns/Image/Group/Cover block
   inline width/padding/gap/margin/position for mobile responsive stacking layout.
   ========================================================================== */
@media (max-width: 480px) {

	/* Operations - Global overflow prevention */
	body.single-operations {
		overflow-x: hidden;
	}

	/* Operations - All sections max-width constraint */
	.operations-intro-section,
	.operations-map-section,
	.operations-contact-section,
	body.single-operations .has-water-ripple-bg,
	body.single-operations .has-texture-bg {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Operations Intro Section - Mobile responsive */
	.operations-intro-section .wp-block-columns {
		flex-direction: column;
		gap: 24px !important;
	}

	.operations-intro-section .wp-block-columns>.wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.operations-intro-section .wp-block-columns>.wp-block-column:first-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Operations Intro - Image responsive */
	.operations-intro-section .wp-block-image,
	.operations-intro-section .wp-block-image img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}

	/* Operations Map Section - Mobile responsive */
	.operations-map-section {
		min-height: auto !important;
		padding: 40px 16px !important;
		overflow-x: hidden;
	}

	.operations-map-section .operations-map-content {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		padding: 0 !important;
		max-width: 100% !important;
		margin-bottom: 32px;
	}

	.single-operations .operations-map-section .operations-map-content {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		padding: 0 !important;
		max-width: 100% !important;
	}

	/* Operations Map - Heading responsive */
	.operations-map-section .operations-map-content .wp-block-heading {
		white-space: normal !important;
		font-size: clamp(24px, 6vw, 32px) !important;
		line-height: 1.2 !important;
		word-wrap: break-word;
	}

	/* Operations Map - Image responsive */
	.operations-map-section .operations-map-image {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.operations-map-section .operations-map-image img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain;
	}

	.single-operations .operations-map-section .wp-block-columns>.wp-block-column:last-child {
		position: relative !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
	}

	/* Operations Contact Section - Mobile responsive */
	.operations-contact-section {
		height: auto !important;
		min-height: auto !important;
		padding: 40px 16px !important;
	}

	.operations-contact-section .wp-block-columns {
		flex-direction: column;
		height: auto !important;
	}

	.operations-contact-section .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 20px 16px !important;
	}

	.operations-contact-section .operations-contact-image-column {
		position: relative !important;
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Operations Solutions Grid - Mobile responsive */
	.single-operations .wp-block-columns.has-3-columns {
		flex-direction: column;
	}

	.single-operations .wp-block-columns.has-3-columns>.wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}




}

/* Extra small mobile (320px-375px) - Operations specific fixes */
@media (max-width: 375px) {

	/* Operations - Tighter padding for smallest screens */
	.operations-map-section {
		padding: 32px 12px !important;
	}

	.operations-intro-section .wp-block-columns>.wp-block-column {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.operations-contact-section {
		padding: 32px 12px !important;
	}

	/* Operations Map - Heading even smaller */
	.operations-map-section .operations-map-content .wp-block-heading {
		font-size: clamp(20px, 5.5vw, 28px) !important;
	}

	/* Operations - All group blocks tighter padding */
	body.single-operations .wp-block-group {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* Operations - Nested content tighter padding */
	body.single-operations .alignfull>.wp-block-group,
	body.single-operations .alignfull>.wp-block-columns {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ============================================
   CAREERS PAGE MOBILE FIXES - 480px and below
   Added: 2025-12-24

   REQUIRED: !important declarations override WordPress database
   inline styles for desktop layouts. Mobile requires column stacking,
   responsive typography, and full-width containers.
   ============================================ */

@media (max-width: 480px) {

	/* Careers hero - reset fixed desktop widths that cause vertical text stacking */
	.careers-hero-section .careers-hero-heading {
		min-width: 100% !important;
		width: 100% !important;
		white-space: normal !important;
		font-size: clamp(20px, 6vw, 32px) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.01em !important;
	}

	/* Careers hero - ensure columns stack vertically */
	.careers-hero-section .wp-block-columns {
		flex-direction: column !important;
		gap: 30px !important;
	}

	.careers-hero-section .wp-block-columns>.wp-block-column {
		flex-basis: 100% !important;
		min-width: 100% !important;
		width: 100% !important;
	}

	/* Careers hero - reduce separator width for mobile */
	.careers-hero-section .wp-block-separator.is-style-wide {
		width: 100px !important;
		max-width: 100%;
	}

	/* Careers benefits - force single column layout */
	.careers-benefits-section .wp-block-columns,
	.careers-benefits-3col-section .wp-block-columns {
		flex-direction: column !important;
		gap: 40px !important;
	}

	.careers-benefits-section .wp-block-column,
	.careers-benefits-3col-section .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Careers grid - force single column layout for job cards */
	.has-water-ripple-bg .wp-block-columns {
		flex-direction: column !important;
		gap: 30px !important;
	}

	.has-water-ripple-bg .wp-block-columns>.wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Careers leadership - force single column layout */
	.careers-leadership-section .wp-block-columns,
	.has-water-ripple-bg:has(.has-offset-pool-bg) .wp-block-columns {
		flex-direction: column !important;
		gap: 30px !important;
	}

	/* Careers leadership - reset image padding on mobile */
	.has-water-ripple-bg:has(.has-offset-pool-bg) {
		padding-left: var(--wp--preset--spacing--50) !important;
	}

	/* Careers benefits - reduce padding on mobile */
	.careers-benefits-section,
	.careers-benefits-3col-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Careers grid - reduce padding on mobile */
	.has-water-ripple-bg {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* ============================================
   CAREERS PAGE MOBILE FIXES - 375px (Extra Small Mobile)
   Added: 2025-12-24
   Targeting the vertical text stacking issue

   REQUIRED: !important declarations override inline flex-basis styles
   from WordPress database. Prevents text stacking vertically on narrow
   viewports by forcing full-width columns.
   ============================================ */

@media (max-width: 375px) {

	/* CRITICAL: Override fixed column widths that cause text to stack vertically */
	/* Target the specific columns in careers hero that have inline flex-basis styles */
	.careers-hero-section .wp-block-column[style*="flex-basis:690px"],
	.careers-hero-section .wp-block-column[style*="flex-basis:656px"] {
		flex-basis: 100% !important;
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}

	/* CRITICAL: Reset the H1 heading that's causing vertical letter stacking */
	/* The desktop rule sets min-width: 690px which breaks at 375px viewport */
	h1.careers-hero-heading,
	.careers-hero-section h1.careers-hero-heading,
	.careers-hero-section .careers-hero-heading.wp-block-heading {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
	}

	/* Override inline font-size on hero heading */
	.careers-hero-section h1.careers-hero-heading[style*="font-size"] {
		font-size: clamp(18px, 7vw, 28px) !important;
	}
}

/* ============================================
   CAREERS PAGE MOBILE FIXES - NUCLEAR OPTION
   Override ALL column widths in careers sections at mobile

   REQUIRED: !important declarations ensure consistent column stacking
   across all careers page sections on mobile.
   ============================================ */

@media (max-width: 480px) {

	/* Force ALL columns in careers sections to 100% width */
	.careers-hero-section .wp-block-columns,
	.careers-benefits-section .wp-block-columns,
	.careers-benefits-3col-section .wp-block-columns,
	.has-water-ripple-bg .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}

	.careers-hero-section .wp-block-column,
	.careers-benefits-section .wp-block-column,
	.careers-benefits-3col-section .wp-block-column,
	.has-water-ripple-bg .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* CAREERS MOBILE FIX - MAXIMUM SPECIFICITY
	   690px column in 375px viewport fix */

	/* Ultra-specific selector to override inline styles */
	html body .careers-hero-section.has-texture-bg .wp-block-columns .wp-block-column.is-vertically-aligned-top {
		flex-basis: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Force the heading itself to not have fixed width */
	html body h1.careers-hero-heading.wp-block-heading {
		min-width: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}
}

/* ============================================
   * HERO IMAGE SECTION (Image-based)
   ============================================ */

/* When page has hero-image-section, position header absolutely over the hero */
body:has(.hero-image-section) header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* Position hero-top-bar absolutely within the header - top: 0 to match homepage */
body:has(.hero-image-section) .hero-top-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

/* Override for sticky state on pages with hero-image-section */
body:has(.hero-image-section) .hero-top-bar.is-sticky {
	position: fixed;
	top: 0;
	z-index: 99999;
	background-color: var(--wp--preset--color--theme-02);
	padding: 15px 40px;
}

.admin-bar body:has(.hero-image-section) .hero-top-bar.is-sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar body:has(.hero-image-section) .hero-top-bar.is-sticky {
		top: 46px;
	}
}

/* Image-based hero structure (replaces Cover for pattern override support) */
/* Pull hero up to start right below announcement banner, matching homepage behavior */
.hero-image-section {
	position: relative;
	overflow: hidden;
	margin-top: -146px;
	/* Pull up under header template part */
}

/* Background image - absolute positioned to fill container */
.hero-image-section>.hero-background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 1;
}

.hero-image-section>.hero-background-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content wrapper with dark overlay gradient */
.hero-image-section>.hero-content-wrapper {
	position: relative;
	z-index: 2;
	min-height: 80vh;
}

/* Blue gradient overlay using pseudo-element - must be above image (z-index: 0) but below content (z-index: 2) */
.hero-image-section::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(0deg, rgba(26, 78, 162, 0.00) 0.11%, #1A4EA2 99.89%);
	pointer-events: none;
}

/* Ensure image is behind overlay */
.hero-image-section>.hero-background-image {
	z-index: 0;
}

/* ============================================
   * LARGE BG OVERLAY SECTION
   ============================================ */

/* Image-based structure (replaces Cover for pattern override support) */
.large-bg-overlay-section {
	position: relative;
	overflow: hidden;
	max-height: 938px;
}

/* Background image - absolute positioned to fill container */
.large-bg-overlay-section>.large-bg-overlay-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 1;
}

.large-bg-overlay-section>.large-bg-overlay-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

/* Content wrapper with dark overlay */
.large-bg-overlay-section>.large-bg-overlay-content-wrapper {
	position: relative;
	z-index: 2;
	background-color: rgba(0, 0, 0, 0.6);
}

/* Grayscale background image - default for most pages */
.large-bg-overlay-section .wp-block-cover__image-background {
	filter: grayscale(100%);
}

/* Lifeguard page (page-id-23) - show color image with blue overlay */
.page-id-23 .large-bg-overlay-section .wp-block-cover__image-background {
	filter: none;
}

/* Control heading width for proper line breaks */
/* REQUIRED: !important to constrain content width within cover block that has no max-width limit */
.large-bg-overlay-section .large-bg-overlay-content {
	max-width: 1150px !important;
}

/* Heading specific width - wider to achieve 4-line break */
/* REQUIRED: !important to constrain heading width for proper line breaks per Figma design */
.large-bg-overlay-section .large-bg-overlay-content h2 {
	max-width: 1150px !important;
	width: 100%;
}

/* Paragraph max-width */
/* REQUIRED: !important to constrain paragraph width for readability per Figma design */
.large-bg-overlay-section .large-bg-overlay-paragraph {
	max-width: 780px !important;
}

/* Separator under heading - 224px width, 3px height, white */
/* REQUIRED: !important overrides WP is-style-wide auto margins in flex container */
.large-bg-overlay-section .wp-block-separator.separator-224 {
	width: 224px;
	height: 3px;
	border: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Center items horizontally in flex container */
.large-bg-overlay-section .large-bg-overlay-content {
	align-items: center;
}

/* ----------------------------------------
   Large BG Overlay (Blue) Variant
   ---------------------------------------- */
/* Blue variant - blue fallback background in case image doesn't load */
.large-bg-overlay-blue {
	background-color: var(--wp--preset--color--theme-02);
}

/* Blue variant - show the background image (grayscale like dark variant) */
.large-bg-overlay-blue>.large-bg-overlay-image {
	display: block;
}

/* Blue variant - semi-transparent blue overlay on content wrapper */
.large-bg-overlay-blue>.large-bg-overlay-content-wrapper {
	background-color: rgba(26, 78, 162, 0.8);
}

/* ============================================
   * CAROUSEL + TEXT SECTION (About Page)
   ============================================ */

/* Make carousel flush with left viewport edge */
.carousel-text-section .kindling-carousel-container {
	padding-left: 0;
}

.has-water-ripple-bg.carousel-text-section .wp-block-group.alignwide.is-style-kindling-grid-system {
	margin-left: 0;
	max-width: none;
}

/* Container styling - prevent peek of next slide */
.carousel-text-section .wp-block-kindling-carousel {
	overflow: hidden;
	min-height: 400px;
}

.carousel-text-section .splide__track {
	overflow: hidden;
	height: 400px;
}

/* Ensure slides don't overflow */
.carousel-text-section .splide__slide {
	overflow: hidden;
	border-radius: 0;
	height: 400px;
}

/* NOTE: Do NOT set overflow:hidden on splide__list - it breaks carousel navigation */
/* The splide__track handles overflow clipping, not the list */

/* Image shadow effect + full coverage - no border radius per design */
.carousel-text-section .carousel-slide .wp-block-image img {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	border-radius: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Vertically center text column */
.carousel-text-section .wp-block-kindling-grid-item:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Pagination dots styling - match Project Zero carousel dots */
.carousel-text-section .splide__pagination {
	bottom: -40px;
	padding: 0;
	gap: 12px;
}

/* Splide pagination buttons - 17x18px touch target matching other carousels */
.carousel-text-section .splide__pagination__page {
	min-width: 17px;
	min-height: 18px;
	width: 17px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	opacity: 1;
	transform: scale(1);
	/* Override Splide default scale(1.4) on active */
}

/* Remove scale transform on active state */
.carousel-text-section .splide__pagination__page.is-active {
	transform: scale(1);
}

/* Visual dot via ::after - 18x18px with blue border */
.carousel-text-section .splide__pagination__page::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--theme-02);
}

/* Active/hover state - filled blue */
.carousel-text-section .splide__pagination__page:hover::after,
.carousel-text-section .splide__pagination__page.is-active::after {
	background-color: var(--wp--preset--color--theme-02);
}

/* Carousel slide styling for kindling/carousel slides */
/* Override alignfull when carousel is inside a column */
.wp-block-column .wp-block-kindling-carousel.alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Override old job-fit-carousel CSS that conflicts with Splide */
.carousel-text-section .job-fit-carousel .carousel-slide,
.job-fit-carousel .splide__slide .carousel-slide {
	position: static;
	opacity: 1;
	visibility: visible;
	transition: none;
}

.carousel-text-section .carousel-slide {
	width: 100%;
	height: 100%;
}

.carousel-text-section .carousel-slide .wp-block-image {
	margin: 0;
	height: 100%;
}

/* NOTE: .carousel-slide .wp-block-image img styles merged at line ~13026 */

/* Remove overflow:hidden from parent columns that clips carousel */
.carousel-text-section .wp-block-columns {
	overflow: visible;
}

.carousel-text-section .splide__list {
	height: 400px;
}

/**
 * Red Flag List - Used in * Carousel + Text synced pattern
 * Styled similarly to job-fit-content ul list
 */
.red-flag-list {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--40);
}

.red-flag-list li {
	margin-bottom: 32px;
	padding-left: 55px;
	position: relative;
}

.red-flag-list li:last-child {
	margin-bottom: 0;
}

.red-flag-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 42px;
	height: 35px;
	background-image: url('/wp-content/uploads/2025/12/red-flag.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
	.red-flag-list li {
		padding-left: 45px;
	}

	.red-flag-list li::before {
		width: 32px;
		height: 27px;
	}
}

/* Responsive - Mobile */
@media (max-width: 768px) {
	.red-flag-list {
		font-size: var(--wp--custom--fontSize--lg);
	}

	.red-flag-list li {
		padding-left: 40px;
		margin-bottom: 24px;
	}

	.red-flag-list li::before {
		width: 28px;
		height: 24px;
	}
}

/**
 * * Image Gallery (Carousel) Section - Red background carousel
 */
.image-gallery-carousel-section {
	overflow: hidden;
}

.image-gallery-carousel-section .kindling-carousel-container {
	padding: 0;
}

/* Gallery carousel - 30px margin top below separator */
.image-gallery-carousel-section .wp-block-kindling-carousel {
	margin-top: 30px;
}

/* Gallery carousel dots - white for red background, positioned BELOW carousel */
/* REQUIRED: !important to override Splide plugin inline absolute positioning */
.image-gallery-carousel-section .splide__pagination {
	position: relative !important;
	bottom: auto !important;
	margin-top: 20px !important;
	justify-content: center;
	gap: 12px;
}

/* Allow overflow so pagination shows below the carousel */
.image-gallery-carousel-section .kindling-carousel-container,
.image-gallery-carousel-section .splide {
	overflow: visible !important;
}

.image-gallery-carousel-section .splide__pagination__page {
	min-width: 17px;
	min-height: 18px;
	width: 17px;
	height: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: transparent;
	border: none;
	opacity: 1;
	transform: scale(1);
}

.image-gallery-carousel-section .splide__pagination__page.is-active {
	transform: scale(1);
}

.image-gallery-carousel-section .splide__pagination__page::after {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--border--rounded-full);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	pointer-events: none;
	/* Inactive: hollow ring (transparent center with white border) */
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--white);
}

.image-gallery-carousel-section .splide__pagination__page:hover::after,
.image-gallery-carousel-section .splide__pagination__page.is-active::after {
	/* Active: solid white fill */
	background-color: var(--wp--preset--color--white);
}

/* ============================================
   LEADERSHIP TEAM - Operations Pages
   Team member cards with blue frame and VIEW BIO overlay
   Added: 2025-12-28
   ============================================ */

/* Leadership section - Blue background with proper padding
   REQUIRED: !important to ensure blue background overrides any inherited styles */
.leadership-section.has-theme-02-background-color {
	background-color: var(--wp--preset--color--theme-02) !important;
}

/* Remove the ::after pseudo-element blue background when using has-theme-02 class */
.leadership-section.has-theme-02-background-color::after {
	display: none;
}

/* Leadership grid container */
.leadership-grid {
	row-gap: 40px;
}

/* Team Member Card - Base styling */
.leadership-section .team-member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.leadership-section .team-member-card:hover {
	transform: translateY(-4px);
}

/* Photo wrapper with hover overlay - exact Figma dimensions 435x444 */
.leadership-section .team-member-card__photo-wrapper {
	position: relative;
	width: 435px;
	height: 444px;
	max-width: 100%;
	overflow: hidden;
	border-radius: 0;
}

/* Blue frame removed per user request - REQUIRED: !important to override any ::before from plugin */
.leadership-section .team-member-card__photo-wrapper::before {
	display: none !important;
}

/* Photo image */
.leadership-section .team-member-card__photo {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* VIEW BIO overlay - 100% width/height of image */
.leadership-section .team-member-card__photo-wrapper::after {
	content: 'VIEW BIO';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(26, 78, 162, 0.85);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--sansation, 'Sansation', sans-serif);
	font-size: var(--wp--custom--fontSize--3xl);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
	pointer-events: none;
}

.leadership-section .team-member-card:hover .team-member-card__photo-wrapper::after {
	opacity: 1;
}

/* Team member info container */
.leadership-section .team-member-card__info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
}

/* Name - Exact specs from Figma */
.leadership-section .team-member-card__name {
	margin: 0;
	color: var(--wp--preset--color--white);
	text-align: center;
	font-family: var(--wp--preset--font-family--sansation, 'Sansation', sans-serif);
	font-size: var(--wp--custom--fontSize--3xl);
	font-style: normal;
	font-weight: 700;
	line-height: 34px;
	text-transform: uppercase;
}

/* Title - Exact specs from Figma */
.leadership-section .team-member-card__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	text-align: center;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
}

/* Team Member Modal - Compact design matching reference */
.team-member-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 60px;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	box-sizing: border-box;
}

.team-member-modal[aria-hidden="true"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.team-member-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.team-member-modal__container {
	position: relative;
	width: 90%;
	max-width: 1200px;
	min-height: auto;
	background-color: var(--wp--preset--color--white);
	border-radius: 0;
	overflow: visible;
	display: flex;
	flex-direction: row;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	margin-top: 50px;
	margin-bottom: 40px;
}

.team-member-modal__container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('/wp-content/uploads/2025/12/texture-bg.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}

.team-member-modal__close {
	position: absolute;
	top: 80px;
	right: 56px;
	z-index: 10;
	background: transparent;
	border: none;
	border-radius: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
	color: var(--wp--preset--color--theme-02, #1a4ea2);
	padding: 0;
}

.team-member-modal__close:hover {
	opacity: 0.6;
}

.team-member-modal__close svg {
	width: 34px;
	height: 34px;
	stroke-width: 2;
}

.team-member-modal__content {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.team-member-modal__photo-wrapper {
	position: relative;
	z-index: 1;
	width: 420px;
	min-width: 420px;
	height: 520px;
	min-height: 520px;
	flex-shrink: 0;
	background: #b2b2b2;
	overflow: visible;
	margin: 56px 0 56px 48px;
}

.team-member-modal__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Years of Service Badge - Square design per Figma */
.team-member-modal__badge {
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 115px;
	height: 105px;
	background: var(--wp--preset--color--theme-02, #1a4ea2);
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	z-index: 10;
	padding: 8px;
	box-sizing: border-box;
}

.team-member-modal__badge-inner {
	text-align: center;
	color: var(--wp--preset--color--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--wp--preset--color--white);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 8px;
}

.team-member-modal__badge-number {
	display: block;
	font-family: var(--wp--preset--font-family--sansation, 'Sansation', sans-serif);
	font-size: var(--wp--custom--fontSize--4xl-lg);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.team-member-modal__badge-text {
	display: block;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: var(--wp--custom--fontSize--sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.3;
	margin-top: 2px;
}

/* Modal info section - per Figma */
.team-member-modal__info {
	position: relative;
	z-index: 1;
	padding: 56px 48px 56px 56px;
	flex: 1;
	overflow-y: auto;
	box-sizing: border-box;
}

.team-member-modal__name {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--sansation, 'Sansation', sans-serif);
	font-size: var(--wp--custom--fontSize--4xl);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--theme-02, #1a4ea2);
	line-height: 1.2;
	letter-spacing: 1.2px;
}

.team-member-modal__title {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: var(--wp--custom--fontSize--lg);
	color: var(--wp--preset--color--theme-02, #1a4ea2);
	font-weight: 700;
	line-height: 1.5;
}

.team-member-modal__bio {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--theme-06);
}

.team-member-modal__bio p {
	margin: 0 0 16px;
}

.team-member-modal__bio p:last-child {
	margin-bottom: 0;
}

/* Body class when modal is open */
body.modal-open {
	overflow: hidden;
}

/* Tablet responsive for modal */
@media (max-width: 900px) {
	.team-member-modal__container {
		max-width: 90%;
	}

	.team-member-modal__photo-wrapper {
		width: 300px;
		min-width: 300px;
	}

	.team-member-modal__badge {
		width: 100px;
		height: 90px;
	}

	.team-member-modal__badge-number {
		font-size: var(--wp--custom--fontSize--4xl);
	}

	.team-member-modal__badge-text {
		font-size: var(--wp--custom--fontSize--xs);
	}

	.team-member-modal__info {
		padding: 32px 40px;
	}

	.team-member-modal__name {
		font-size: var(--wp--custom--fontSize--2xl);
	}

	.team-member-modal__title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.team-member-modal__bio {
		font-size: var(--wp--custom--fontSize--base-sm);
	}
}

/* Force modal above isolated stacking context */
.team-member-modal[aria-hidden="false"] {
	isolation: isolate;
}

/* When modal is open, ensure it escapes parent stacking context
   REQUIRED: !important to override default stacking context isolation for modal visibility */
body:has(.team-member-modal[aria-hidden="false"]) .wp-site-blocks {
	isolation: auto !important;
}

/* When modal is open, raise leadership-wrapper z-index above header
   REQUIRED: !important to override default z-index for modal stacking above header */
body:has(.team-member-modal[aria-hidden="false"]) .leadership-wrapper {
	z-index: 100001 !important;
}

/* Mobile responsive for modal
   REQUIRED: !important declarations override default modal background for proper mobile display */
@media (max-width: 600px) {
	.team-member-modal {
		padding: 0;
		padding-top: 0;
		align-items: flex-start;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.team-member-modal__overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100002;
		background: rgba(0, 0, 0, 0.7);
	}

	.team-member-modal__container {
		flex-direction: column;
		max-height: none;
		min-height: auto;
		width: 100%;
		max-width: 100%;
		margin: 0;
		overflow: visible;
		z-index: 100003;
		border-radius: 0;
		position: relative;
		background-color: var(--wp--preset--color--white) !important;
	}

	.team-member-modal__content {
		flex-direction: column;
	}

	.team-member-modal__photo-wrapper {
		width: 100%;
		min-width: 100%;
		height: 300px;
		min-height: 300px;
		max-height: 350px;
		margin: 0;
		flex-shrink: 0;
	}

	.team-member-modal__photo {
		width: 100%;
		height: 100%;
		min-height: 300px;
		max-height: 350px;
		object-fit: cover;
	}

	.team-member-modal__badge {
		width: 100px;
		height: 90px;
		bottom: -15px;
		padding: 6px;
	}

	.team-member-modal__badge-inner {
		padding: 5px;
	}

	.team-member-modal__badge-number {
		font-size: var(--wp--custom--fontSize--2xl);
		letter-spacing: 0.5px;
	}

	.team-member-modal__badge-text {
		font-size: var(--wp--custom--fontSize--3xs);
		letter-spacing: 0.5px;
		line-height: 1.2;
		margin-top: 1px;
	}

	.team-member-modal__info {
		padding: 30px 20px 24px;
		flex: 1;
	}

	.team-member-modal__name {
		font-size: var(--wp--custom--fontSize--xl);
	}

	.team-member-modal__title {
		font-size: var(--wp--custom--fontSize--base-sm);
		margin-bottom: 16px;
	}

	.team-member-modal__bio {
		font-size: var(--wp--custom--fontSize--sm);
		line-height: 1.6;
	}

	.team-member-modal__close {
		position: fixed;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
		background: rgba(255, 255, 255, 0.95);
		border-radius: var(--wp--custom--border--rounded-full);
		z-index: 100;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	.team-member-modal__close svg {
		width: 20px;
		height: 20px;
	}
}

/* ==========================================================================
   * Intro (text only) Pattern
   ========================================================================== */

/* Align grid items to top to prevent vertical stretching
   REQUIRED: !important to override WP Grid block default stretch alignment */
.intro-grid-top-align,
.intro-grid-top-align.is-layout-grid,
.wp-block-group.intro-grid-top-align {
	align-items: start !important;
}

/* Grid item content should not stretch */
.intro-grid-top-align>.wp-block-kindling-grid-item {
	align-self: start;
	height: auto;
}

/* Align text column baseline with heading - compensate for line-height difference */
.intro-text-column p:first-child {
	margin-top: -8px;
}

/* Override the 569px min-height from .has-theme-01-background-color.has-texture-bg rule */
.has-texture-bg.intro-text-only-section {
	min-height: auto;
}

/* * Intro pattern separators - left-aligned on mobile
   REQUIRED: !important declarations override WP Cover/Column/Group block inline
   styles for mobile intro pattern layout, padding, and full-width image breakout. */
@media (max-width: 781px) {

	/* Hero Page template and Operations single - min-height 70vh on mobile */
	.page-template-page-hero .wp-block-cover,
	.page-template-page-hero .hero-cover-section,
	body.page-template-page-hero .wp-block-cover,
	body.single-operations .hero-cover-section,
	.single-operations .hero-cover-section {
		min-height: 70vh !important;
	}

	body.page-template-page-hero .wp-block-cover.trusted-partners-section {
		min-height: unset !important;
	}

	/* * Intro pattern - 15px horizontal padding and full-width image on mobile */
	.intro-text-only-section.wp-block-group,
	.page-intro-section.wp-block-group {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Override WordPress global padding for intro sections */
	.intro-text-only-section.has-global-padding,
	.page-intro-section.has-global-padding {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* First column image container - break out to full width */
	.intro-text-only-section .wp-block-column:first-child,
	.page-intro-section .wp-block-column:first-child {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		padding: 0 !important;
	}

	/* Ensure image is full width with no border radius */
	.intro-text-only-section .wp-block-column:first-child img,
	.page-intro-section .wp-block-column:first-child img,
	.intro-text-only-section .wp-block-column:first-child .wp-block-image img,
	.page-intro-section .wp-block-column:first-child .wp-block-image img {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 0 !important;
	}

	/* Handle figure wrapper if present */
	.intro-text-only-section .wp-block-column:first-child figure,
	.page-intro-section .wp-block-column:first-child figure {
		margin: 0 !important;
		width: 100% !important;
	}

	/* $ Leadership Team - full-width images on mobile */
	.leadership-section.wp-block-group {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.leadership-section .leadership-grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
		padding: 0 !important;
	}

	.leadership-section .wp-block-kindling-grid-item {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Photo wrapper breaks out to full viewport width */
	.leadership-section .team-member-card__photo-wrapper {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		position: relative !important;
	}

	.leadership-section .team-member-card__photo {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 0 !important;
	}

	.leadership-section .team-member-card__photo img {
		width: 100% !important;
		border-radius: 0 !important;
	}

	.intro-text-only-section .wp-block-separator,
	.intro-text-only-section hr,
	.about-intro-section .wp-block-separator,
	.about-intro-section hr,
	.about-intro-section .wp-block-group .wp-block-separator,
	.about-intro-section .separator-224,
	.page-intro-section .wp-block-separator,
	.page-intro-section hr,
	.page-intro-section .separator-224,
	.solutions-intro-section .wp-block-separator,
	.solutions-intro-section hr,
	.partner-intro-section .wp-block-separator,
	.partner-intro-section hr,
	.operations-intro-section .wp-block-separator,
	.operations-intro-section hr,
	.lifeguard-intro-section .wp-block-separator,
	.lifeguard-intro-section hr,
	.service-areas-section .wp-block-separator,
	.service-areas-section hr {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
	}

	/* Extra specificity for WordPress is-style-wide separator */
	.page-intro-section hr.wp-block-separator.is-style-wide,
	.about-intro-section hr.wp-block-separator.is-style-wide,
	.solutions-intro-section hr.wp-block-separator.is-style-wide,
	.partner-intro-section hr.wp-block-separator.is-style-wide,
	.operations-intro-section hr.wp-block-separator.is-style-wide,
	.lifeguard-intro-section hr.wp-block-separator.is-style-wide,
	.service-areas-section hr.wp-block-separator.is-style-wide,
	hr.wp-block-separator.is-style-wide.separator-224 {
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	.wp-container-core-group-is-layout-9c9ee932 hr.wp-block-separator.is-style-wide.separator-224 {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	hr.wp-block-separator.is-style-wide.separator-224 {
		margin-left: 0 !important;
		margin-right: auto !important;
		margin-bottom: 15px !important;
	}

	.wp-container-core-group-is-layout-9c9ee932 p {
		padding-left: 0px !important;
		padding-right: 0px !important;
		margin-top: 15px !important;
		margin-bottom: 15px !important;
	}

	.wp-container-core-group-is-layout-1e822f78 {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* ==========================================================================
   Footer - Your Privacy Choices
   ========================================================================== */

.privacy-choices-button .wp-block-button__link {
	display: inline-flex;
	padding: 16px 26px 16px 24px;
	justify-content: center;
	align-items: center;
	color: var(--wp--preset--color--theme-06);
	font-family: Inter, sans-serif;
	font-size: var(--wp--custom--fontSize--lg);
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
	text-transform: uppercase;
	background: var(--wp--preset--color--white);
	border: none;
	border-radius: 0;
	white-space: nowrap;
}

.privacy-choices-button .wp-block-button__link:hover {
	color: var(--wp--preset--color--theme-06);
	background: var(--wp--preset--color--white);
}

/* ==========================================================================
   Responsive Fixes - 768px Overflow Prevention
   ========================================================================== */

/* Fix: Become a Lifeguard grid items overflow - allow wrapping for nowrap flex containers */
/* REQUIRED: !important to override WordPress generated flex-wrap: nowrap from is-nowrap class */
@media (max-width: 768px) {
	.wp-block-kindling-grid-item .wp-block-group.is-horizontal.is-nowrap.is-layout-flex {
		flex-wrap: wrap !important;
	}

	.wp-block-kindling-grid-item .wp-block-group.is-horizontal.is-nowrap.is-layout-flex>* {
		flex: 1 1 100% !important;
		max-width: 100%;
	}

	/* Lifeguard love section - keep flag icons to left of text on mobile */
	.lifeguard-love-section .wp-block-group.is-horizontal.is-nowrap.is-layout-flex {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 0 !important;
	}

	.lifeguard-love-section .wp-block-group.is-horizontal.is-nowrap.is-layout-flex>.lifeguard-flag-icon {
		flex: 0 0 42px !important;
		max-width: 42px !important;
	}

	.lifeguard-love-section .wp-block-group.is-horizontal.is-nowrap.is-layout-flex>.wp-block-group {
		flex: 1 1 auto !important;
		max-width: calc(100% - 58px) !important;
	}
}

/* Fix: ACCESSIBILITY and PARTNERSHIPS heading word breaks at 992px */
/* Prevent awkward hyphenation on long uppercase headings in narrow containers */
@media (max-width: 1024px) {

	.accessibility-page h1.wp-block-heading,
	.legal-page h1.wp-block-heading {
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
		font-size: clamp(28px, 4.5vw, 50px);
	}

	/* Partner page headings */
	.partner-section h2.wp-block-heading[style*="uppercase"],
	.wp-block-heading[style*="text-transform:uppercase"] {
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}

	/* ============================================
	   ABOUT US PAGE - Mobile Fixes
	   Tasks #58-64
	   REQUIRED: !important to hide hero carousel dots per design decision
	   ============================================ */

	/* REMOVED: Red "pill" hero carousel dots - hidden per design decision */
	body:has(.hero-cover-section) .hero-carousel-dots {
		display: none !important;
		/* Red dots removed */
	}

	/* #59 - Images higher and proportional (not squished) */
	/* About intro section - prevent image squishing on mobile */
	.about-intro-section .wp-block-image img,
	.has-water-ripple-bg .wp-block-image img,
	.has-texture-bg .wp-block-image img {
		object-fit: cover;
		width: 100%;
		height: auto;
		min-height: 200px;
		max-height: 400px;
	}

	/* Hero cover section - proper image proportions */
	.hero-cover-section {
		min-height: 400px;
	}

	.hero-cover-section img.wp-block-cover__image-background {
		object-fit: cover;
		object-position: center top;
	}

	/* #60 - Content sections padding left/right (don't touch screen edge) */
	/* Add horizontal padding to all content sections */
	.about-intro-section,
	.has-water-ripple-bg,
	.has-texture-bg,
	.project-zero-section,
	.carousel-text-section,
	.company-timeline-section,
	.large-bg-overlay-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Inner containers should not have additional padding conflicts */
	.about-intro-section .wp-block-group.alignwide,
	.about-intro-section .wp-block-columns.alignwide,
	.has-water-ripple-bg .wp-block-group.alignwide,
	.has-water-ripple-bg .wp-block-columns.alignwide,
	.has-texture-bg .wp-block-group.alignwide,
	.has-texture-bg .wp-block-columns.alignwide {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* #61 - Decrease module size to match homepage pattern */
	/* Reduce overall content block sizing for mobile */
	.about-intro-section .wp-block-column,
	.has-water-ripple-bg .wp-block-column,
	.project-zero-section .wp-block-column {
		padding: 0;
	}

	/* Scale down card-like elements */
	.service-areas-facility-grid .wp-block-group.has-theme-07-background-color {
		padding: 24px 20px;
	}

	/* #62 - Decrease space between sections */
	/* Reduce section padding and margins */
	.about-intro-section,
	.has-water-ripple-bg,
	.has-texture-bg,
	.project-zero-section,
	.carousel-text-section,
	.company-timeline-section,
	.large-bg-overlay-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Large BG Overlay section - tighter line-height on mobile
	   REQUIRED: !important to override inline style from WP editor */
	.large-bg-overlay-section p {
		line-height: 1.2 !important;
	}

	/* Center separators on mobile in cover sections and overlay sections
	   REQUIRED: !important to override WP Separator default left alignment */
	.large-bg-overlay-section .wp-block-separator,
	.wp-block-cover .wp-block-separator {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Reduce gaps between columns */
	.about-intro-section .wp-block-columns,
	.has-water-ripple-bg .wp-block-columns,
	.has-texture-bg .wp-block-columns,
	.project-zero-section .wp-block-columns {
		gap: 24px;
	}

	/* #63 - Bump headline above paragraph text */
	/* Increase spacing between headings and paragraphs */
	.about-intro-section h1.wp-block-heading,
	.about-intro-section h2.wp-block-heading,
	.has-water-ripple-bg h2.wp-block-heading,
	.has-texture-bg h2.wp-block-heading,
	.project-zero-section h2.wp-block-heading {
		margin-bottom: 16px;
	}

	/* Eyebrow text closer to heading */
	.about-intro-section h3.wp-block-heading+h1,
	.about-intro-section h3.wp-block-heading+h2,
	.about-intro-section p.has-theme-06-color+h1,
	.about-intro-section p.has-theme-06-color+h2 {
		margin-top: 8px;
	}

	/* Separator spacing - Task #25: reduced from 20px to 10px */
	.about-intro-section .wp-block-separator,
	.has-water-ripple-bg .wp-block-separator,
	.has-texture-bg .wp-block-separator {
		margin-top: 12px;
		margin-bottom: 10px;
		margin-bottom: 0 !important;
	}

	/* #64 - Timeline stays HORIZONTAL on mobile (like desktop) */
	/* Horizontal scrollable timeline on mobile */
	/* Section padding 0 allows timeline to align with header padding */
	.company-timeline-section {
		padding-left: 30px !important;
		padding-right: 0;
		overflow-x: clip;
	}

	/* Timeline header - single column on mobile */
	/* Header padding (20px) aligns text with first timeline dot */
	body .company-timeline-section .wp-block-columns.alignwide {
		display: flex;
		flex-direction: column;
		grid-template-columns: unset;
		gap: 16px;
		margin-bottom: 32px !important;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Timeline container - HORIZONTAL scroll on mobile */
	.company-timeline {
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 20px;
		/* Align first dot with header text at 20px from viewport */
		padding-left: 20px;
		scroll-padding-left: 20px;
	}

	.company-timeline .timeline-track {
		display: inline-flex;
		flex-direction: row;
		padding: 0 40px 0 0;
		min-width: max-content;
	}

	.company-timeline .timeline-line {
		display: block;
		/* Start line at first dot center (5px from track edge = 25px from viewport) */
		left: 5px;
		right: 40px;
	}

	.company-timeline .timeline-items {
		display: flex;
		flex-direction: row;
		gap: 0;
	}

	.company-timeline .timeline-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-width: 140px;
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	.company-timeline .timeline-dot {
		margin-bottom: 16px;
		flex-shrink: 0;
		width: 12px;
		height: 12px;
	}

	.company-timeline .timeline-content {
		padding-right: 24px;
	}

	.company-timeline .timeline-year {
		font-size: var(--wp--preset--font-size--x-large);
		margin-bottom: 4px;
	}

	.company-timeline .timeline-description {
		font-size: var(--wp--custom--fontSize--sm);
		max-width: 120px;
		line-height: 1.4;
	}

	/* Show scroll indicator on mobile horizontal timeline */
	.company-timeline-section::after {
		display: block;
		right: 10px;
	}
}

/* ============================================
   MOBILE RESPONSIVE FIXES - About Us & Our Solutions
   Tasks: #58-72
   Added: 2025-12-29
   ============================================ */

@media (max-width: 430px) {
	body:has(.hero-cover-section) .hero-carousel-dots {
		top: 642px
	}
}

@media (max-width: 390px) {
	body:has(.hero-cover-section) .hero-carousel-dots {
		top: 582px
	}
}

/* ============================================
   OUR SOLUTIONS PAGE - Mobile Fixes (max-width: 781px)
   Tasks #65-72
   ============================================ */
@media (max-width: 781px) {

	/* #65 - First section follows About Us adjustments */
	/* Solutions sections - override alignfull to add mobile padding */
	.solutions-section.alignfull,
	.solutions-section-cover.alignfull,
	.image-accordion-section.alignfull {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Override WordPress global padding for solutions sections on mobile */
	.solutions-section.has-global-padding,
	.image-accordion-section.has-global-padding {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Inner containers - remove extra padding that causes double-padding */
	.solutions-section .wp-block-columns.alignwide,
	.solutions-section-cover .wp-block-columns.alignwide,
	.image-accordion-section .wp-block-columns {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}

	/* Columns inside image-accordion-section */
	.image-accordion-section .wp-block-column {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		max-width: 100%;
	}

	/* Accordion container - remove extra padding */
	.solutions-accordion.has-global-padding {
		padding-left: 0;
		padding-right: 0;
	}

	/* Force padding on text content in image-accordion-section */
	/* Override the existing max-width: 767px rules with more specific selector */
	.image-accordion-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:not(.has-offset-pool-bg):not(.has-offset-pool-bg-right) {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Image items should not have padding */
	.image-accordion-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item.has-offset-pool-bg,
	.image-accordion-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item.has-offset-pool-bg-right {
		padding-left: 0;
		padding-right: 0;
	}

	/* Grid container - reset negative margins that cause overflow on mobile */
	/* REQUIRED: !important to override WordPress core alignwide negative margins */
	.image-accordion-section .is-style-kindling-grid-system,
	.image-accordion-section .is-style-kindling-grid-system.alignwide,
	.image-accordion-section .wp-block-group.alignwide.is-style-kindling-grid-system {
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100%;
	}

	/* Also reset the alignwide group that contains the grid */
	/* REQUIRED: !important to override WordPress core alignwide negative margins */
	.image-accordion-section>.wp-block-group.alignwide {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100%;
		width: 100%;
	}

	/* #66 - Decrease accordion paragraph text size */
	/* Solutions accordion text sizing */
	.solutions-accordion .accordion-item {
		font-size: var(--wp--preset--font-size--medium);
		padding: 16px 32px 16px 0;
	}

	.solutions-accordion .accordion-content {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.5;
	}

	.solutions-accordion .accordion-content p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.5;
	}

	/* #67 & #68 - Image fits within frame */
	/* Solutions section images - contain within frame */
	.solutions-section .wp-block-image,
	.solutions-section .wp-block-cover {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.solutions-section .wp-block-image img {
		width: 100%;
		height: auto;
		object-fit: cover;
		max-height: 300px;
	}

	/* Cover block images */
	.solutions-section .wp-block-cover img.wp-block-cover__image-background {
		object-fit: cover;
	}

	/* Offset pool background - contain on mobile */
	.solutions-section .has-offset-pool-bg {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	.solutions-section .has-offset-pool-bg::before {
		display: none;
	}

	/* #69 - Add margin above Maintenance */
	/* Add spacing between solution sections */
	.solutions-section+.solutions-section,
	.solutions-section-cover+.solutions-section,
	.solutions-section+.solutions-section-cover {
		margin-top: 24px;
	}

	/* Maintenance section specific spacing */
	.solutions-section:nth-of-type(2),
	.solutions-section-cover:nth-of-type(2) {
		margin-top: 24px;
	}

	/* #70 - Flip image above accordion in mobile */
	/* Reverse column order for image-accordion sections on mobile */
	.solutions-section .wp-block-columns {
		display: flex;
		flex-direction: column;
	}

	/* Image column comes first on mobile */
	.solutions-section .wp-block-columns>.wp-block-column:has(.wp-block-image),
	.solutions-section .wp-block-columns>.wp-block-column:has(.wp-block-cover),
	.solutions-section .wp-block-columns>.wp-block-column:has(.has-offset-pool-bg) {
		order: -1;
	}

	/* Text/accordion column comes second */
	.solutions-section .wp-block-columns>.wp-block-column:has(.solutions-accordion),
	.solutions-section .wp-block-columns>.wp-block-column:has(h2),
	.solutions-section .wp-block-columns>.wp-block-column:has(h3) {
		order: 1;
	}

	/* #71 - Adjust divider line margin top/bottom */
	/* Solutions section separators */
	.solutions-section .wp-block-separator,
	.solutions-section-cover .wp-block-separator {
		margin-top: 16px;
		margin-bottom: 20px;
	}

	/* Accordion item separator (the + icon line) */
	.solutions-accordion .accordion-item::after {
		right: 0;
	}

	/* #72 - Decrease section height (less space top/bottom) */
	/* Compact solution cards */
	.solutions-card,
	.solutions-card-new {
		min-height: auto;
	}

	.solutions-card .wp-block-cover__inner-container {
		padding: 24px 20px;
	}

	.solutions-card-new .wp-block-group {
		padding: 24px 20px;
	}

	/* Solutions section cover - reduced height
	   Merged: padding-top/bottom from later 781px rule at ~21920 */
	.solutions-section-cover {
		min-height: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.solutions-section-cover .wp-block-cover__inner-container {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Solutions card images - proper aspect ratio */
	.solutions-card-new .wp-block-image {
		aspect-ratio: 16 / 10;
	}

	.solutions-card-new .wp-block-image img {
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}
}

/* ==========================================================================
   EXTRA SMALL MOBILE - Additional Refinements (max-width: 480px)
   REQUIRED: !important declarations override WP Columns/Image/Cover/Carousel
   block inline styles for mobile responsive layout, height, padding, margins.
   ========================================================================== */
@media (max-width: 480px) {

	/* About Us - Extra tight padding for smallest screens */
	.about-intro-section,
	.has-water-ripple-bg,
	.has-texture-bg,
	.project-zero-section,
	.carousel-text-section,
	.company-timeline-section,
	.large-bg-overlay-section,
	.solutions-section,
	.solutions-section-cover {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* NOTE: Timeline styles (.timeline-year, .timeline-description, .timeline-dot)
	   consolidated to #64 section at line ~14800 */

	/* Solutions accordion - more compact */
	.solutions-accordion .accordion-item {
		font-size: var(--wp--custom--fontSize--base-sm);
		padding: 14px 28px 14px 0;
	}

	.solutions-accordion .accordion-content,
	.solutions-accordion .accordion-content p {
		font-size: var(--wp--custom--fontSize--sm);
	}

	/* Hero section - reduced height */
	.hero-cover-section {
		min-height: 350px;
	}

	/* Section gaps reduced */
	.about-intro-section .wp-block-columns,
	.has-water-ripple-bg .wp-block-columns,
	.has-texture-bg .wp-block-columns,
	.solutions-section .wp-block-columns {
		gap: 20px;
	}

	/* ==========================================================================
	   Tasks #59-64: About Us Mobile Fixes (375px viewport)
	   ========================================================================== */

	/* #59 - Images should be higher and stay proportional (not squished) */
	/* Ensure images maintain aspect ratio and have proper height */
	.about-intro-section .wp-block-image img,
	.carousel-text-section .wp-block-image img,
	.project-zero-section .wp-block-image img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		width: 100%;
		height: auto;
		min-height: 220px;
	}

	/* Carousel images - maintain proportion */
	.carousel-text-section .splide__slide img,
	.project-zero-carousel .carousel-slide img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		min-height: 200px;
		max-height: 280px;
	}

	/* NOTE: #60 padding (16px left/right) already set at line ~14418 above */

	/* Ensure nested content doesn't overflow or touch edges */
	.about-intro-section .wp-block-group,
	.carousel-text-section .wp-block-group,
	.project-zero-section .wp-block-group {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* #61 - Decrease size of carousel+text module to match homepage pattern */
	/* Global mobile vertical padding: 40px for all patterns unless specified otherwise */
	.carousel-text-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Grid items - no padding, full width (merged from duplicate at ~14628) */
	.carousel-text-section .wp-block-kindling-grid-item {
		padding: 0 30px;
		width: 100%;
		max-width: 100%;
	}

	.wp-container-core-group-is-layout-bc835bda .wp-block-kindling-grid-item:first-child {
		padding-bottom: 30px !important;
		order: 2;
	}

	.wp-container-core-group-is-layout-bc835bda .wp-block-kindling-grid-item:last-child {
		padding-top: 30px !important;
		order: 1;
	}

	.wp-container-core-group-is-layout-1e822f78.carousel-text-section[style*="padding-top"] {
		padding-bottom: 0px !important;
	}

	/* Reduce text sizes in carousel-text section */
	.carousel-text-section h2.wp-block-heading {
		font-size: clamp(24px, 6vw, 32px);
		margin-bottom: 8px;
	}

	/* Center the carousel on mobile */
	.carousel-text-section .wp-block-kindling-carousel,
	.carousel-text-section .kindling-carousel-container {
		margin-left: auto;
		margin-right: auto;
	}

	.carousel-text-section p {
		font-size: var(--wp--custom--fontSize--base-lg);
		line-height: 1.5;
	}

	/* Red flag list - more compact on mobile */
	.carousel-text-section .red-flag-list {
		margin-top: 16px;
	}

	.carousel-text-section .red-flag-list li {
		margin-bottom: 16px;
		padding-left: 40px;
		font-size: var(--wp--custom--fontSize--base-sm);
	}

	.carousel-text-section .red-flag-list li::before {
		width: 28px;
		height: 24px;
	}

	/* Splide pagination - more compact */
	.carousel-text-section .splide__pagination {
		bottom: -24px;
		gap: 8px;
	}

	.carousel-text-section .splide__pagination__page::after {
		width: 14px;
		height: 14px;
	}

	/* Gallery carousel - dots below image on mobile */
	.image-gallery-carousel-section .splide__pagination {
		position: relative !important;
		bottom: auto !important;
		margin-top: 16px !important;
		padding-bottom: 8px;
	}

	/* Carousel-text section - ensure proper mobile layout */
	/* Override inline padding on carousel-text-section - global 40px mobile padding */
	.carousel-text-section[style*="padding-top"] {
		padding-top: 0px !important;
		padding-bottom: 50px !important;
	}

	/* Stack columns vertically on mobile */
	.carousel-text-section .wp-block-columns {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.carousel-text-section .wp-block-column {
		width: 100%;
		max-width: 100%;
		flex-basis: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Project-zero-carousel in carousel-text-section - full width centered */
	.carousel-text-section .project-zero-carousel {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* CRITICAL: Override fixed height on carousel-slides for mobile */
	.carousel-text-section .project-zero-carousel .carousel-slides {
		width: 100%;
		height: auto !important;
		min-height: 200px;
		position: relative;
	}

	/* Change slides from absolute to relative on mobile */
	.carousel-text-section .project-zero-carousel .carousel-slide {
		position: relative !important;
		width: 100%;
		height: auto !important;
		display: none;
	}

	.carousel-text-section .project-zero-carousel .carousel-slide.is-active {
		display: block;
	}

	.carousel-text-section .project-zero-carousel .carousel-slide img {
		width: 100%;
		height: auto !important;
		min-height: 180px;
		max-height: 250px;
		object-fit: cover;
		aspect-ratio: 4 / 3;
	}

	/* Carousel dots positioning */
	.carousel-text-section .project-zero-carousel-dots {
		margin-top: 16px;
		margin-bottom: 8px;
		display: flex;
		justify-content: center;
	}

	/* NOTE: .carousel-text-section .project-zero-carousel centering merged into rule at ~14549 */

	/* HR separators - center on mobile */
	.carousel-text-section .wp-block-separator,
	.carousel-text-section hr,
	.carousel-text-section .separator-224 {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Separator after H2 - add margin-top 8px */
	.carousel-text-section h2+.wp-block-separator,
	.carousel-text-section h2+hr,
	.carousel-text-section h2.wp-block-heading+.wp-block-separator {
		margin-top: 8px !important;
	}

	/* Text column in carousel-text-section - 30px horizontal padding + bottom margin */
	.carousel-text-section .wp-block-column .wp-block-group {
		padding-left: 30px !important;
		padding-right: 30px !important;
		margin-bottom: 50px;
	}

	/* Last text group doesn't need bottom margin */
	.carousel-text-section .wp-block-column:last-child .wp-block-group {
		margin-bottom: 0;
	}

	/* Splide carousels (for other carousel types) */
	.carousel-text-section .is-style-kindling-grid-system {
		display: flex;
		flex-direction: column;

	}

	/* NOTE: .carousel-text-section .wp-block-kindling-grid-item width merged into rule at ~14470 */

	/* Make carousel full-width on mobile - break out of section padding */
	.carousel-text-section .wp-block-kindling-carousel {
		width: calc(100% + 40px) !important;
		max-width: calc(100% + 40px) !important;
		margin-left: -20px !important;
		margin-right: -20px !important;
	}

	.carousel-text-section .splide,
	.carousel-text-section .kindling-carousel-container {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.carousel-text-section .splide__track {
		width: 100% !important;
		height: auto;
		min-height: 200px;
	}

	.carousel-text-section .splide__slide {
		width: 100% !important;
		height: auto;
	}

	.carousel-text-section .splide__slide img {
		width: 100%;
		height: auto;
		min-height: 180px;
		max-height: 250px;
		object-fit: cover;
	}

	/* #62 - Decrease space between sections */
	/* Reduce vertical spacing between About Us sections */
	.about-intro-section,
	.project-zero-section,
	.has-water-ripple-bg:not(.carousel-text-section),
	.has-texture-bg,
	.large-bg-overlay-section {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* Reduce margins between adjacent sections */
	.about-intro-section+.has-water-ripple-bg,
	.has-water-ripple-bg+.large-bg-overlay-section,
	.large-bg-overlay-section+.has-water-ripple-bg,
	.has-water-ripple-bg+.company-timeline-section,
	.project-zero-section+.has-water-ripple-bg {
		margin-top: 0;
	}

	/* Company timeline section - tighter spacing */
	.company-timeline-section {
		padding-top: 24px;
		padding-bottom: 32px;
	}

	/* #63 - Bump headline above paragraph text (prevent splitting) */
	/* Ensure headings stay with their content */
	.about-intro-section h2.wp-block-heading,
	.carousel-text-section h2.wp-block-heading,
	.project-zero-section h2.wp-block-heading,
	.has-water-ripple-bg h2.wp-block-heading,
	.has-texture-bg h2.wp-block-heading {
		margin-bottom: 8px;
		page-break-after: avoid;
		break-after: avoid;
	}

	/* Eyebrow text (small caps above heading) */
	.about-intro-section p.has-theme-06-color,
	.carousel-text-section p.has-theme-06-color,
	.has-water-ripple-bg p.has-theme-06-color {
		margin-bottom: 4px;
	}

	/* Separator below heading - tighter */
	.about-intro-section .wp-block-separator,
	.carousel-text-section .wp-block-separator,
	.has-water-ripple-bg .wp-block-separator {
		margin-top: 8px;
		margin-bottom: 12px;
	}

	/* Paragraph text following headings */
	.about-intro-section h2.wp-block-heading+p,
	.carousel-text-section h2.wp-block-heading+p,
	.has-water-ripple-bg h2.wp-block-heading+p {
		margin-top: 0;
	}

	/* #64 - Timeline follows ACG mobile layout (already implemented at 781px) */
	/* Enhance timeline for extra small screens */
	.company-timeline .timeline-items {
		gap: 20px;
	}

	.company-timeline .timeline-year {
		font-size: var(--wp--custom--fontSize--xl);
		line-height: 1.2;
		margin-bottom: 4px;
	}

	.company-timeline .timeline-description {
		font-size: var(--wp--custom--fontSize--sm);
		line-height: 1.4;
	}

	.company-timeline .timeline-dot {
		width: 10px;
		height: 10px;
		/* Center dot on line: line at top 6px with 3px height = center at 7.5px
		   For 10px dot: margin-top = 7.5 - 5 = 2.5px ≈ 3px */
		margin-top: 3px;
	}

	/* Timeline header text */
	body .company-timeline-section .wp-block-columns.alignwide h2.wp-block-heading {
		font-size: clamp(24px, 6vw, 32px);
		margin-bottom: 10px;
	}

	body .company-timeline-section .wp-block-columns.alignwide p {
		font-size: var(--wp--custom--fontSize--base-lg);
		line-height: 1.5;
	}
}

/* ============================================
   VERY SMALL MOBILE (max-width: 375px)
   ============================================ */
@media (max-width: 375px) {

	/* Minimum padding for edge cases */
	.about-intro-section,
	.has-water-ripple-bg,
	.has-texture-bg,
	.solutions-section,
	.solutions-section-cover {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Timeline - smallest sizing */
	.company-timeline .timeline-year {
		font-size: var(--wp--custom--fontSize--xl);
	}

	.company-timeline .timeline-description {
		font-size: var(--wp--preset--font-size--small);
	}

	/* Accordion - smallest sizing */
	.solutions-accordion .accordion-item {
		font-size: var(--wp--custom--fontSize--sm);
		padding: 12px 24px 12px 0;
	}

	.solutions-accordion .accordion-content,
	.solutions-accordion .accordion-content p {
		font-size: var(--wp--preset--font-size--small);
	}

	/* Hero section - minimum height */
	.hero-cover-section {
		min-height: 300px;
	}

	/* ==========================================================================
	   Tasks #65-68: Our Solutions Page Mobile Fixes (375px viewport)
	   ========================================================================== */

	/* #65 - First section follows About Us adjustments (padding, spacing) */
	.page-intro-section,
	.has-texture-bg.page-intro-section {
		padding-top: 24px;
		padding-bottom: 24px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Reduce gap between intro image and text */
	.page-intro-section .wp-block-columns {
		gap: 16px;
	}

	/* Solutions intro text - tighter spacing */
	.page-intro-section h2.wp-block-heading {
		font-size: clamp(24px, 7vw, 32px);
		margin-bottom: 12px;
	}

	.page-intro-section p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.5;
	}

	/* #66 - Accordion paragraph text size already handled above (12px) */
	/* Additional refinements for accordion content */
	.solutions-accordion .accordion-content {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* #67 & #68 - Ensure images fit within frame on Solutions page */
	/* Fix the small thumbnail issue - make images full width */
	.solutions-section .wp-block-kindling-grid-item .wp-block-image,
	.image-accordion-section .wp-block-kindling-grid-item .wp-block-image {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.solutions-section .wp-block-kindling-grid-item .wp-block-image img,
	.image-accordion-section .wp-block-kindling-grid-item .wp-block-image img {
		width: 100%;
		height: auto;
		max-height: 250px;
		object-fit: cover;
		aspect-ratio: 16 / 10;
	}

	/* Grid items should span full width on mobile */
	.solutions-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item,
	.image-accordion-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item {
		grid-column: 1 / -1;
		width: 100%;
	}

	/* Reset any offset backgrounds that may cause sizing issues */
	.solutions-section .has-offset-pool-bg,
	.solutions-section .has-offset-pool-bg-right {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* Reduce space between solution sections */
	.solutions-section+.solutions-section {
		margin-top: 16px;
	}
}

/* ==========================================================================
   9.0 Homepage Mobile Responsive Fixes (max-width: 781px)
   Tasks #39-#57 - Homepage and sitewide mobile improvements
   Added: 2025-12-29
   ========================================================================== */

@media (max-width: 781px) {

	/* ==========================================================================
	   #39 - Homepage headline text too large - decrease font size on mobile
	   ========================================================================== */
	body .hero-bottom-content h1,
	body .home-hero-carousel-content h1,
	body .hero-cover-section h1.wp-block-heading {
		font-size: var(--wp--custom--fontSize--4xl);
		line-height: 1.1;
	}

	/* Home hero 70vh on mobile */
	/* REQUIRED: !important to override WP Cover block inline min-height styles for mobile viewport sizing */
	.home-hero-carousel,
	body.home .hero-cover-section,
	body.home .wp-block-cover.hero-cover-section {
		min-height: 70vh !important;
		height: 70vh !important;
	}

	/* ==========================================================================
	   #40 - Announcement banner FIXED at BOTTOM on mobile
	   REQUIRED: !important to override inline styles from WordPress database
	   z-index lowered so mobile nav panel (100000) appears above it
	   ========================================================================== */
	#announcement-banner,
	.announcement-banner {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 99998 !important;
		padding: 12px 50px 12px 15px !important;
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		line-height: 1.4 !important;
		text-align: center !important;
		/* display: flex applied only when visible - removed !important so JS can hide */
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
	}

	/* When banner is hidden via JS inline style, respect that */
	#announcement-banner[style*="display: none"],
	#announcement-banner[style*="display:none"],
	.announcement-banner[style*="display: none"],
	.announcement-banner[style*="display:none"] {
		display: none !important;
	}

	/* REQUIRED: !important to override WP paragraph inline styles for mobile banner typography */
	#announcement-banner p,
	.announcement-banner p {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		line-height: 1.4 !important;
		margin: 0 !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
		display: block !important;
		text-align: center !important;
	}

	/* Show line break in banner on mobile */
	/* REQUIRED: !important to show mobile-only line break element */
	.mobile-break {
		display: block !important;
	}

	/* Close button positioned absolutely, not overlapping text */
	/* REQUIRED: !important to override button defaults for custom close button styling and touch target sizing */
	#announcement-banner-close {
		position: absolute !important;
		right: 12px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		padding: 8px !important;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		background: rgba(255, 255, 255, 0.2) !important;
		border-radius: var(--wp--custom--border--rounded-full) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
	}

	/* Ensure span inside close button passes clicks to button */
	#announcement-banner-close span {
		pointer-events: none !important;
	}

	/* Add bottom padding to body to prevent content from being hidden behind fixed banner */
	/* Only apply when banner is visible (not display:none) */
	body:has(#announcement-banner:not([style*="display: none"]):not([style*="display:none"])),
	body:has(.announcement-banner:not([style*="display: none"]):not([style*="display:none"])) {
		padding-bottom: 60px !important;
	}

	/* Header positioning - no adjustment needed since banner is at bottom */
	body:has(#announcement-banner) .site-header-small,
	body:has(.announcement-banner) .site-header-small {
		top: 0 !important;
	}

	body:has(#announcement-banner) .site-header-hero,
	body:has(.announcement-banner) .site-header-hero {
		top: 0 !important;
	}

	/* No extra margin needed for main content */
	body:has(#announcement-banner) main,
	body:has(.announcement-banner) main {
		margin-top: 0;
	}

	body:has(#announcement-banner):has(.site-header-small) main,
	body:has(.announcement-banner):has(.site-header-small) main {
		margin-top: 0;
	}

	/* ==========================================================================
	   Homepage hero 80vh on mobile
	   ========================================================================== */
	.home-hero-carousel,
	body.home .hero-cover-section,
	body.home .wp-block-cover.hero-cover-section {
		min-height: 92vh !important;
		height: 92vh !important;
	}

	.home-hero-carousel .wp-block-cover,
	.home-hero-carousel .hero-carousel-slide {
		min-height: 92vh !important;
		height: 92vh !important;
	}

	/* ==========================================================================
	   #41 - Nav: star logo + hamburger only - simplify mobile nav header
	   ========================================================================== */
	/* Hide SVG logo and show star logo on mobile */
	.hero-logo svg {
		display: none !important;
	}

	.hero-logo {
		width: 75px;
		height: 75px;
		background-image: url('/wp-content/uploads/2026/01/AP-Logo-Mark-white_2.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}

	.hero-logo a {
		display: block;
		width: 75px;
		height: 75px;
	}

	/* Also apply to interior pages with site-header-small */
	.site-header-small .site-header-small-logo svg,
	.site-header-small .site-header-small-logo img:not([src*="small-star"]) {
		display: none !important;
	}

	.site-header-small .site-header-small-logo {
		width: 75px;
		height: 75px;
		background-image: url('/wp-content/uploads/2025/12/small-star.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.site-header-small .site-header-small-logo a {
		display: block;
		width: 75px;
		height: 75px;
	}

	/* Ensure hamburger is visible on mobile - for interior hero pages */
	/* Vertically center hamburger (48px) with logo (75px at 20px padding-top) */
	/* Banner is now at bottom, so hamburger is always at top position */
	/* 20px padding + 37.5px half-logo - 24px half-hamburger = 33.5px */
	.hero-mobile-nav-wrapper {
		display: block;
		position: fixed;
		top: 34px;
		right: 15px;
		z-index: 99999;
	}

	/* REQUIRED: !important to override button defaults for custom mobile nav toggle styling */
	.hero-mobile-nav-wrapper .mobile-nav-toggle {
		display: flex !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		background-color: var(--wp--preset--color--theme-02) !important;
		border: 3px solid white !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
	}

	/* Hide desktop navigation elements on mobile */
	.hero-navigation,
	.hero-navigation-block-wrapper,
	.desktop-navigation {
		display: none;
	}

	/* ==========================================================================
	   #42 - 50/50 patterns need padding from left edge
	   ========================================================================== */
	.wp-block-columns.alignfull,
	.wp-block-columns.alignwide,
	.has-texture-bg .wp-block-columns,
	.has-water-ripple-bg .wp-block-columns {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Ensure column content has breathing room */
	.wp-block-column {
		padding-left: 0;
		padding-right: 0;
	}

	/* ==========================================================================
	   #43 - Decrease padding between button and next section
	   ========================================================================== */
	.wp-block-buttons {
		margin-bottom: 24px;
	}

	/* Reduce section gaps on mobile */
	.wp-block-group.alignfull+.wp-block-group.alignfull,
	section+section {
		margin-top: 0;
	}

	/* Reduce padding in cover blocks with buttons */
	.wp-block-cover .wp-block-buttons {
		margin-bottom: 16px;
	}

	/* ==========================================================================
	   #44 - Service areas section scoot left for wider width
	   ========================================================================== */
	.service-areas-section,
	.service-areas-facility-grid,
	.service-areas-map-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	.service-areas-section .wp-block-columns {
		padding-left: 0;
		padding-right: 0;
	}

	/* Allow full width on mobile */
	.service-areas-section .wp-block-column {
		width: 100%;
		max-width: 100%;
	}

	/* Service Areas carousel - fix height issue pushing dots down */
	.service-areas-section {
		min-height: auto;
	}

	.service-areas-section .project-zero-carousel .carousel-slides {
		height: auto;
		min-height: 200px;
	}

	.service-areas-section .project-zero-carousel .carousel-slide {
		position: relative;
		height: auto;
	}

	.service-areas-section .project-zero-carousel .carousel-slide:not(.is-active) {
		display: none;
	}

	.service-areas-section .project-zero-carousel .carousel-slide.is-active {
		display: block;
	}

	.service-areas-section .project-zero-carousel .carousel-slide img {
		width: 100%;
		height: auto;
		max-height: 300px;
		object-fit: cover;
	}

	.service-areas-section .project-zero-carousel-dots {
		margin-top: 20px;
	}

	/* Service Areas separator after H2 - margin-top 8px on mobile */
	.service-areas-section h2+.wp-block-separator,
	.service-areas-section h2+hr,
	.service-areas-section h2.wp-block-heading+.wp-block-separator {
		margin-top: 8px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* Service Areas list - reduce margin-top on mobile */
	.service-areas-section ul {
		margin-top: 10px;
	}

	/* Service Areas carousel - center on mobile */
	.service-areas-section .project-zero-carousel {
		margin-left: auto;
		margin-right: auto;
	}

	/* ==========================================================================
	   #45 - Image carousel condensed to fit frame
	   ========================================================================== */
	.project-zero-carousel,
	.wp-block-kindling-carousel,
	.gallery-carousel {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		margin-left: 0;
		margin-right: 0;
	}

	.project-zero-carousel .carousel-slides,
	.wp-block-kindling-carousel .splide__slide {
		max-width: 100%;
	}

	.project-zero-carousel .carousel-slide img,
	.wp-block-kindling-carousel .splide__slide img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	/* ==========================================================================
	   #46 - Decrease line height on "We combine..." text
	   ========================================================================== */
	body .home-mission-section p,
	body .intro-section p,
	body .has-texture-bg .wp-block-column p {
		line-height: 1.4 !important;
		color: #000;
	}

	/* ==========================================================================
	   #47 - Decrease padding on "we combine" section
	   ========================================================================== */
	.home-mission-section,
	.intro-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.home-mission-section .wp-block-group,
	.intro-section .wp-block-group {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* ==========================================================================
	   #48 - Stats in 4-quad layout (2x2)
	   ========================================================================== */
	.stats-section .wp-block-columns,
	.safety-stats-section .wp-block-columns,
	.counter-section .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.stats-section .wp-block-column,
	.safety-stats-section .wp-block-column,
	.counter-section .wp-block-column {
		flex-basis: auto;
		width: 100%;
		text-align: center;
	}

	/* Stat number sizing */
	.stats-section .wp-block-heading,
	.counter-section .counter-number {
		font-size: var(--wp--custom--fontSize--4xl);
	}

	/* ==========================================================================
	   #49 - Headline larger, decrease line height
	   ========================================================================== */
	body .has-texture-bg h2.wp-block-heading,
	body .has-water-ripple-bg h2.wp-block-heading,
	body .intro-section h2.wp-block-heading {
		font-size: var(--wp--custom--fontSize--2xl);
		line-height: 1.15;
	}

	/* ==========================================================================
	   #50 - Background image constrained and centered
	   ========================================================================== */
	.wp-block-cover__image-background,
	.wp-block-cover .wp-block-cover__image-background {
		object-fit: cover;
		object-position: center center;
	}

	/* Constrain cover block heights on mobile */
	.wp-block-cover {
		min-height: 400px;
	}

	.hero-cover-section .wp-block-cover,
	.hero-carousel .wp-block-cover {
		min-height: 500px;
	}

	/* ==========================================================================
	   #51 - Carousel photos fit width-wise
	   ========================================================================== */
	.splide__slide img,
	.carousel-slide img,
	.wp-block-kindling-carousel img {
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: cover;
	}

	/* Carousel container constraints */
	.splide__track {
		max-width: 100vw;
	}

	/* ==========================================================================
	   #52 - Decrease award images size (3 on one line)
	   ========================================================================== */
	/* Footer awards - horizontal layout with smaller images that fit on mobile */
	/* Target ONLY the direct awards container (has images as direct children), not the outer footer flex */
	/* Use :has(> .wp-block-image) to target only groups with images as direct children */
	/* Allow wrapping on mobile to prevent overflow */
	/* REQUIRED: !important to override WP Group block inline flex layout for mobile awards layout */
	.wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex:has(> .wp-block-image) {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 12px !important;
		max-width: 100% !important;
	}

	/* Footer award images - sized to fit 3 across on mobile (375px - padding) */
	/* Exclude solutions sections from this rule - they need full-width images */
	.wp-block-group.has-theme-02-background-color:not(.solutions-section):not(.image-accordion-section) .wp-block-image {
		flex: 1 1 auto;
		width: auto;
		max-width: 100px;
	}

	.wp-block-group.has-theme-02-background-color:not(.solutions-section):not(.image-accordion-section) .wp-block-image img {
		width: 100%;
		max-width: 100px;
		height: auto;
	}

	/* ==========================================================================
	   #53 - Footer links left justified
	   ========================================================================== */
	/* Target the actual footer structure - blue background group with columns */
	.wp-block-group.has-theme-02-background-color>.wp-block-columns {
		flex-direction: column;
	}

	.wp-block-group.has-theme-02-background-color>.wp-block-columns>.wp-block-column {
		text-align: left;
		width: 100%;
		flex-basis: 100%;
		margin-bottom: 24px;
	}

	/* Footer buttons CENTERED - REQUIRED: !important to override WP layout classes */
	footer.wp-block-template-part .wp-block-buttons,
	footer.wp-block-template-part .wp-block-buttons.is-layout-flex,
	footer.wp-block-template-part .wp-block-buttons[class*="wp-container-core-buttons"],
	.wp-block-group.has-theme-02-background-color .wp-block-buttons.is-vertical,
	[class*="wp-container-core-buttons-is-layout"] {
		justify-content: center !important;
		align-items: center !important;
	}

	/* Footer paragraphs and list items left aligned - override centered text */
	footer.wp-block-template-part p,
	footer.wp-block-template-part li,
	footer.wp-block-template-part ul {
		text-align: left !important;
	}

	/* Footer navigation list - left align */
	footer.wp-block-template-part .wp-block-navigation__container,
	footer.wp-block-template-part .wp-block-page-list {
		justify-content: flex-start !important;
	}

	/* Override right alignment on footer elements */
	footer.wp-block-template-part .has-text-align-right,
	footer.wp-block-template-part p.has-text-align-right {
		text-align: left !important;
	}

	/* Footer ALL flex containers - left justify - REQUIRED: !important to override WP generated container classes */
	/* EXCEPTION: buttons are centered (see rule in MOBILE FOOTER OVERRIDES section at end of file) */
	footer.wp-block-template-part .is-layout-flex:not(.wp-block-buttons),
	footer.wp-block-template-part .wp-block-group.is-layout-flex,
	footer.wp-block-template-part [class*="is-content-justification"]:not(.wp-block-buttons),
	footer.wp-block-template-part [class*="wp-container-core"]:not([class*="wp-container-core-buttons"]) {
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}

	/* NOTE: #54 - Phone icon next to phone number
	   Styles merged into main definition at line ~22266 (18px !important sizing) */

	/* ==========================================================================
	   #55 - LinkedIn icon float left
	   ========================================================================== */
	footer.wp-block-template-part .wp-block-social-links,
	footer.wp-block-template-part .wp-block-social-links.is-layout-flex {
		justify-content: flex-start !important;
	}

	footer.wp-block-template-part .wp-block-social-link {
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* ==========================================================================
	   #56 - Nav menu not showing (only buttons) - fix mobile menu
	   NOTE: .wp-block-navigation__container, .wp-block-navigation-item, and related
	   selectors consolidated to line ~9306 area
	   ========================================================================== */

	/* Hide responsive toggle inside mobile nav (we already have hamburger) */
	.mobile-navigation .wp-block-navigation__responsive-container-open {
		display: none;
	}

	/* Hide WordPress responsive container close button inside mobile nav (we have our own .mobile-nav-close) */
	.mobile-navigation .wp-block-navigation__responsive-container-close {
		display: none;
	}

	/* ==========================================================================
	   #57 - "Renovation" on second line
	   ========================================================================== */
	/* Force solutions card headings to wrap on mobile - override inline 40px */
	.solutions-card-new h3.wp-block-heading[style*="font-size"] {
		font-size: var(--wp--custom--fontSize--xl) !important;
		letter-spacing: 0.5px !important;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
		overflow-wrap: break-word;
		white-space: normal;
	}

}

/* ==========================================================================
   Tablet Grid Layout Fix (768px to 1023px)
   Stats section 2x2 grid on tablet viewports
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

	/* Stats section inside section-2: 2x2 grid layout at tablet sizes */
	/* Override the 4-column layout to fit tablet width */
	.is-style-section-2 .is-style-kindling-grid-system {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}

	/* Reduce metric counter font size at tablet for better fit */
	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-number,
	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-suffix {
		font-size: var(--wp--custom--fontSize--5xl-lg) !important;
	}

	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-label {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
	}
}

/* ==========================================================================
   Homepage Mobile - Small Mobile (428px and below)
   ========================================================================== */

@media (max-width: 428px) {

	/* #39 - Even smaller headline on very small screens */
	body .hero-bottom-content h1,
	body .home-hero-carousel-content h1 {
		font-size: var(--wp--custom--fontSize--2xl);
		line-height: 1.1;
	}

	/* #42 - Tighter padding on very small screens */
	.wp-block-columns.alignfull,
	.wp-block-columns.alignwide {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* #48 - Stats 2x2 grid on small screens */
	.stats-section .wp-block-columns,
	.counter-section .wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* #52 - Awards even smaller on tiny screens */
	.has-theme-02-background-color .wp-block-group .wp-block-image[style*="width:100px"],
	.has-theme-02-background-color .wp-block-group .wp-block-image[style*="width:120px"] {
		width: 60px;
		max-width: 60px;
	}

	/* Footer column stacking */
	.wp-block-template-part footer .wp-block-column {
		margin-bottom: 24px;
	}

}

/* ==========================================================================
   Homepage Mobile - Very Small Screens (375px and below)
   ========================================================================== */

@media (max-width: 375px) {

	/* #39 - Minimum headline size */
	body .hero-bottom-content h1,
	body .home-hero-carousel-content h1 {
		font-size: var(--wp--preset--font-size--x-large);
	}

	/* #48 - Single column stats on smallest screens */
	.stats-section .wp-block-columns,
	.counter-section .wp-block-columns {
		grid-template-columns: 1fr;
	}

	/* #52 - Two awards per row on smallest screens */
	.has-theme-02-background-color .wp-block-column .wp-block-group.is-layout-flex {
		flex-wrap: wrap;
		gap: 8px;
	}

	.has-theme-02-background-color .wp-block-group .wp-block-image[style*="width:100px"],
	.has-theme-02-background-color .wp-block-group .wp-block-image[style*="width:120px"] {
		width: 80px;
		max-width: 80px;
	}

}

/* ============================================
   MOBILE RESPONSIVE FIXES - Careers, Contact, Operations
   Tasks: #89-111
   Added: 2025-12-29
   ============================================ */

/* ============================================
   CAREERS PAGE - Mobile Fixes (max-width: 781px)
   Tasks #89-97
   ============================================ */
@media (max-width: 781px) {

	/* #89 - Section not showing correctly (extremely skinny) */
	/* Fix hero section height and padding */
	.careers-hero-section,
	body.page-id-11 .wp-block-cover.alignfull {
		min-height: 300px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* #89 - Reduce excessive empty space in hero sections */
	.careers-hero-section .wp-block-group,
	body.page-id-11 .has-texture-bg .wp-block-group {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* #90 - Single line text issue - prevent awkward line breaks */
	.careers-hero-section p,
	.careers-intro-section p,
	body.page-id-11 .has-texture-bg p {
		word-break: normal;
		overflow-wrap: normal;
	}

	/* #91 - Decrease header line height */
	.careers-hero-section h1,
	.careers-hero-section h2,
	.careers-hero-heading,
	body.page-id-11 h1.wp-block-heading,
	body.page-id-11 h2.wp-block-heading {
		line-height: 1.15;
	}

	/* #92 - Decrease Benefits section top spacing */
	.careers-benefits-section,
	.careers-benefits-3col-section,
	body.page-id-11 .has-theme-07-background-color {
		padding-top: 30px;
	}

	/* #93 - Fix columns - ensure benefits cards display properly */
	/* Target benefits sections - specifically the 3-column layout */
	/* REQUIRED: !important to override WordPress flex styles */
	.careers-benefits-section .wp-block-columns,
	.careers-benefits-3col-section .wp-block-columns,
	.careers-benefits-3col-section .wp-block-columns.has-3-columns,
	body.page-id-11 .has-theme-07-background-color .wp-block-columns,
	body.page-id-11 .has-texture-bg.careers-benefits-3col-section .wp-block-columns {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		gap: 40px !important;
	}

	/* REQUIRED: !important to override WP Column block inline flex-basis for mobile stacking */
	.careers-benefits-section .wp-block-column,
	.careers-benefits-3col-section .wp-block-column,
	body.page-id-11 .has-theme-07-background-color .wp-block-column,
	body.page-id-11 .has-texture-bg.careers-benefits-3col-section .wp-block-column,
	body.page-id-11 .careers-benefits-3col-section .wp-block-columns.has-3-columns>.wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		text-align: center;
		padding: 0 20px;
	}

	/* Ensure 3-column layout stacks on mobile - most specific override */
	/* Must override line 9767: .careers-benefits-3col-section.has-texture-bg .wp-block-columns.alignwide > .wp-block-column */
	/* REQUIRED: !important to override desktop 3-column layout for mobile full-width stacking */
	.careers-benefits-3col-section .wp-block-columns.alignwide.has-3-columns>.wp-block-column,
	.careers-benefits-3col-section.has-texture-bg .wp-block-columns.alignwide>.wp-block-column,
	body .careers-benefits-3col-section .wp-block-column,
	body .careers-benefits-3col-section.has-texture-bg .wp-block-columns.alignwide>.wp-block-column {
		flex: 1 1 100% !important;
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		max-width: none !important;
		min-width: auto !important;
	}

	/* #94 - Headline not cut off - fix text breaking in benefit cards */
	/* REQUIRED: !important to override inline styles from WordPress blocks */
	.careers-benefits-section h3,
	.careers-benefits-3col-section h3,
	.careers-benefits-section .wp-block-heading,
	.careers-benefits-3col-section .wp-block-heading,
	body.page-id-11 .has-theme-07-background-color h3,
	body.page-id-11 .has-theme-07-background-color .wp-block-heading {
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
		font-size: 24px !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.has-texture-bg h1.wp-block-heading[style*="font-size"] {
		font-size: 32px !important;
	}

	/* Fix paragraphs in benefits section */
	body.page-id-11 .has-theme-07-background-color p {
		max-width: 100%;
		text-align: center;
	}

	/* #95 - Add left margin for text content */
	.careers-hero-section .wp-block-group>*,
	body.page-id-11 .has-texture-bg .wp-block-column:last-child {
		margin-left: 16px;
		margin-right: 16px;
	}

	/* #96 - Decrease top section spacing */
	body.page-id-11 .has-texture-bg:first-of-type,
	.careers-hero-section {
		padding-top: 20px;
	}

	/* #97 - Decrease bottom spacing */
	.careers-benefits-section,
	.careers-benefits-3col-section,
	body.page-id-11 .has-theme-07-background-color {
		padding-bottom: 30px;
	}

	/* Fix: "THE NEXT GENERATION OF AQUATICS LEADERSHIP" heading alignment */
	body.page-id-11 .has-texture-bg h2.wp-block-heading {
		text-align: left;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Fix job cards in water ripple section */
	body.page-id-11 .has-water-ripple-bg .wp-block-columns {
		flex-direction: column;
		gap: 20px;
	}

	body.page-id-11 .has-water-ripple-bg .wp-block-column {
		flex-basis: 100%;
		width: 100%;
	}

	/* ============================================
	   CONTACT PAGE (page-id-25) - Mobile Fixes
	   Tasks #98-101
	   REQUIRED: !important declarations override Gravity Forms grid layout,
	   WP Button block inline sizing, and form input inline font-sizes for
	   mobile single-column layout and responsive typography.
	   ============================================ */

	/* #98 - Form fields on one line each - stack name fields vertically */
	/* Override Gravity Forms grid layout - applies to all contact forms on mobile */
	/* Since line 10427 forces display: grid !important, use grid-template-columns: 1fr for single column */
	.contact-hero-form-section .gform_wrapper .gfield--type-name .ginput_container_name,
	.contact-contact-section .gform_wrapper .gfield--type-name .ginput_container_name,
	.operations-contact-section .gform_wrapper .gfield--type-name .ginput_container_name,
	.partner-contact-section .gform_wrapper .gfield--type-name .ginput_container_name,
	body.page-id-25 .gform_wrapper .gfield--type-name .ginput_container_name {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.contact-hero-form-section .gform_wrapper .gfield--type-name .ginput_container_name>span,
	.contact-contact-section .gform_wrapper .gfield--type-name .ginput_container_name>span,
	.operations-contact-section .gform_wrapper .gfield--type-name .ginput_container_name>span,
	.partner-contact-section .gform_wrapper .gfield--type-name .ginput_container_name>span,
	body.page-id-25 .gform_wrapper .gfield--type-name .ginput_container_name>span {
		width: 100% !important;
	}

	/* #99 - Decrease button/text size - Contact page (page-id-25) */
	/* High specificity to override body .partner-contact-section .gform_wrapper.gform-theme styles */
	.contact-hero-form-section .gform_wrapper .gform_button,
	.contact-contact-section .gform_wrapper .gform_button,
	body.page-id-25 .gform_wrapper .gform_button,
	body.page-id-25 .gform_wrapper input[type="submit"],
	body.page-id-25 .gform_wrapper .gform_footer input[type="submit"],
	body.page-id-25 .partner-contact-section .gform_wrapper.gform-theme .gform_button,
	body.page-id-25 .partner-contact-section .gform_wrapper.gform-theme input[type="submit"],
	body.page-id-25 .form-image-section .gform_wrapper.gform-theme .gform_button,
	body.page-id-25 .form-image-section .gform_wrapper.gform-theme input[type="submit"] {
		font-size: var(--wp--preset--font-size--large) !important;
		padding: 12px 24px !important;
		min-width: auto !important;
		width: 100% !important;
		max-width: 280px !important;
		margin: 0 auto !important;
	}

	/* #99 - Decrease form text size */
	.contact-hero-form-section .gform_wrapper,
	.contact-contact-section .gform_wrapper,
	body.page-id-25 .gform_wrapper {
		font-size: var(--wp--preset--font-size--medium);
	}

	.contact-hero-form-section .gform_wrapper input,
	.contact-hero-form-section .gform_wrapper textarea,
	.contact-contact-section .gform_wrapper input,
	.contact-contact-section .gform_wrapper textarea,
	body.page-id-25 .gform_wrapper input,
	body.page-id-25 .gform_wrapper textarea {
		font-size: var(--wp--preset--font-size--medium) !important;
	}

	/* #100 - Footer appears different - ensure consistent footer styling */
	body.page-id-25 footer .wp-block-columns {
		flex-direction: column;
		gap: 24px;
	}

	body.page-id-25 footer .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		text-align: center;
	}

	/* #100 - Footer buttons - match other pages' footer button styling */
	body.page-id-25 footer .footer-button-careers .wp-block-button__link,
	body.page-id-25 footer .footer-button-connect .wp-block-button__link {
		font-size: var(--wp--custom--fontSize--lg) !important;
		width: 160px !important;
		min-width: 160px !important;
		height: auto !important;
		min-height: auto !important;
		padding: 10px 16px !important;
	}

	body.page-id-25 footer .wp-block-buttons:has(.footer-button-careers) {
		gap: 20px !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	/* #101 - Decrease field title/label size */
	.contact-hero-form-section .gform_wrapper .gfield_label,
	.contact-contact-section .gform_wrapper .gfield_label,
	body.page-id-25 .gform_wrapper .gfield_label,
	body.page-id-25 .gform_wrapper .gform-field-label,
	body.page-id-25 .gform_wrapper label.gfield_label,
	body.page-id-25 .gform_wrapper legend.gfield_label,
	body.page-id-25 .gform_wrapper .gfield .gform-field-label {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		line-height: 1.4 !important;
		padding-top: 6px !important;
		padding-bottom: 10px !important;
	}

	/* #101 - Sub-labels (First Name, Last Name) smaller */
	body.page-id-25 .gform_wrapper .gform-field-label--type-sub,
	body.page-id-25 .gform_wrapper .ginput_container_name label {
		font-size: var(--wp--custom--fontSize--sm) !important;
		line-height: 1.3 !important;
	}

	/* Contact page hero text adjustment */
	body.page-id-25 .has-texture-bg h1,
	body.page-id-25 .has-texture-bg h2 {
		font-size: clamp(24px, 6vw, 32px);
		line-height: 1.2;
	}

	/* Contact intro section padding */
	body.page-id-25 .has-texture-bg {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* ============================================
	   OPERATIONS PAGES - Mobile Fixes
	   Tasks #102-111
	   ============================================ */

	/* #102 - Section full width (image larger on top) */
	.single-operations .operations-intro-section .wp-block-image,
	.single-operations .operations-intro-section .wp-block-image img {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.single-operations .operations-intro-section .wp-block-columns {
		flex-direction: column;
	}

	.single-operations .operations-intro-section .wp-block-column:first-child {
		order: 1;
	}

	.single-operations .operations-intro-section .wp-block-column:last-child {
		order: 2;
		margin-left: 0;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* #103 - Add space above divider */
	.single-operations .wp-block-separator,
	.single-operations .operations-intro-section .wp-block-separator,
	.single-operations .operations-map-section .wp-block-separator {
		margin-top: 24px;
	}

	/* #104 - Decrease carousel size */
	.single-operations .wp-block-kindling-carousel,
	.single-operations .kindling-carousel-container {
		max-width: 100%;
		overflow: hidden;
	}

	.single-operations .splide__slide img {
		max-width: 100%;
		height: auto;
	}

	/* #105 - Fix left margin */
	.single-operations .operations-intro-section .wp-block-columns>.wp-block-column:last-child {
		margin-left: 0;
		padding-left: 16px;
		padding-right: 16px;
	}

	.single-operations .operations-map-content {
		margin-left: 16px;
		margin-right: 16px;
	}

	/* #106 - Decrease pattern size (site-wide) - already handled in global mobile */

	/* #107 - Map above and centered */
	.single-operations .operations-map-section .wp-block-columns {
		flex-direction: column-reverse;
	}

	/* NOTE: .operations-map-image styles merged into main definition at line ~22383 */
	/* NOTE: .operations-map-image img styling removed - overridden by !important at line ~22399 */

	.single-operations .operations-map-section .operations-map-content {
		order: 2;
		position: relative;
		top: auto;
		left: auto;
		max-width: 100%;
		padding: 0 16px;
	}

	/* #108 - Text moved into frame */
	.single-operations .operations-intro-section .wp-block-group {
		padding: 16px;
	}

	/* #109 - Fix divider line above image */
	.single-operations .wp-block-separator.alignleft,
	.single-operations .wp-block-separator.aligncenter {
		margin-left: auto;
		margin-right: auto;
		width: 150px;
		margin-bottom: 30px !important;
	}

	/* #110 - Form fields on separate lines */
	.single-operations .operations-contact-section .gform_wrapper .gfield--type-name .ginput_container_name {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.single-operations .operations-contact-section .gform_wrapper .gfield--type-name .ginput_container_name>span {
		width: 100%;
		flex-basis: 100%;
	}

	/* #111 - Decrease button size */
	.single-operations .operations-contact-section .gform_wrapper .gform_button,
	.single-operations .operations-contact-section .gform_wrapper input[type="submit"] {
		font-size: var(--wp--preset--font-size--medium);
		padding: 12px 24px;
		min-width: auto;
		width: 100%;
	}

	/* Operations headings - prevent cut off */
	.single-operations h1.wp-block-heading,
	.single-operations h2.wp-block-heading {
		font-size: clamp(24px, 6vw, 36px);
		line-height: 1.2;
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* NOTE: .operations-contact-section .wp-block-columns styles merged into definition at line ~18436
	   (flex-direction column, height auto) with !important */

	/* Operations leadership section - stack cards */
	.single-operations .operations-leadership-section .wp-block-columns,
	.single-operations .leadership-section .wp-block-columns {
		flex-direction: column;
		gap: 32px;
	}

	.single-operations .operations-leadership-section .wp-block-column,
	.single-operations .leadership-section .wp-block-column {
		flex-basis: 100%;
		width: 100%;
	}

	/* Operations solutions cards - stack */
	.single-operations .has-water-ripple-bg .wp-block-columns {
		flex-direction: column;
		gap: 24px;
	}

	.single-operations .has-water-ripple-bg .wp-block-column {
		flex-basis: 100%;
		width: 100%;
	}
}

/* ============================================
   SMALL MOBILE - Careers, Contact, Operations (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

	/* CAREERS - Tighter spacing */
	.careers-hero-section,
	body.page-id-11 .has-texture-bg {
		padding: 16px;
	}

	.careers-benefits-section h3,
	.careers-benefits-3col-section h3 {
		font-size: var(--wp--preset--font-size--medium);
	}

	/* CONTACT - Compact form */
	body.page-id-13 .gform_wrapper .gfield_label {
		font-size: var(--wp--custom--fontSize--sm);
	}

	body.page-id-13 .gform_wrapper input,
	body.page-id-13 .gform_wrapper textarea {
		font-size: var(--wp--custom--fontSize--base-lg);
		padding: 10px;
	}

	/* OPERATIONS - Extra compact */
	.single-operations .operations-intro-section,
	.single-operations .operations-map-section,
	.single-operations .operations-contact-section {
		padding: 16px;
	}

	.single-operations h1.wp-block-heading,
	.single-operations h2.wp-block-heading {
		font-size: clamp(20px, 5.5vw, 28px);
	}

	/* NOTE: Operations map img styling removed - overridden by !important at 781px (line ~22399) */
}

/* ============================================
   VERY SMALL MOBILE - Careers, Contact, Operations (max-width: 375px)
   ============================================ */
@media (max-width: 375px) {

	/* CAREERS */
	.careers-hero-section,
	body.page-id-11 .has-texture-bg {
		padding: 12px;
	}

	.careers-benefits-section h3,
	.careers-benefits-3col-section h3 {
		font-size: var(--wp--custom--fontSize--base-lg);
	}

	body.page-id-11 h1.wp-block-heading,
	body.page-id-11 h2.wp-block-heading {
		font-size: clamp(18px, 6vw, 24px);
	}

	/* CONTACT */
	body.page-id-13 .gform_wrapper {
		padding: 12px;
	}

	body.page-id-13 .gform_wrapper .gfield_label {
		font-size: var(--wp--preset--font-size--small);
	}

	/* OPERATIONS */
	.single-operations .operations-intro-section,
	.single-operations .operations-map-section,
	.single-operations .operations-contact-section {
		padding: 12px;
	}

	.single-operations h1.wp-block-heading,
	.single-operations h2.wp-block-heading {
		font-size: clamp(18px, 5vw, 24px);
	}

	.single-operations .wp-block-separator {
		width: 120px;
	}
}

/* ==========================================================================
   SERVICE AREAS PAGE - Mobile Fixes (max-width: 781px)
   Tasks #73-77
   Added: 2025-12-29
   Updated: 2025-12-29 - Fixed selectors to match actual page classes
   REQUIRED: !important declarations override WP Column block inline padding,
   WP Image block inline margins, and WP Columns block margin-top for mobile.
   ========================================================================== */
@media (max-width: 781px) {

	/* #73 - Same adjustments as first quad on About Us (page-intro-section) */
	/* Service Areas uses page-intro-section class from reusable block */
	.page-id-17 .page-intro-section,
	.page-id-17 .service-areas-facility-grid,
	.page-id-17 .service-areas-map-section {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Inner columns - stack vertically and remove extra padding */
	.page-id-17 .page-intro-section .wp-block-columns.alignwide,
	.page-id-17 .service-areas-facility-grid .wp-block-columns {
		flex-direction: column;
		gap: 24px;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* Columns full width on mobile */
	.page-id-17 .page-intro-section .wp-block-column,
	.page-id-17 .service-areas-facility-grid .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	/* Text column - 15px left/right padding */
	.page-id-17 .page-intro-section .wp-block-column:last-child {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Override inline padding on text column - 30px edge spacing */
	.page-id-17 .page-intro-section .wp-block-column:last-child[style*="padding-left"],
	.page-id-17 .page-intro-section .wp-block-column:last-child[style*="padding-right"] {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* Images - proper proportions like About Us */
	.page-id-17 .page-intro-section .wp-block-image img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		width: 100%;
		height: auto;
		min-height: 220px;
	}

	/* Intro image container - full width breakout + 30px margin-bottom */
	/* REQUIRED: !important to override .page-intro-section .has-offset-pool-bg reset at line ~20483 (later in cascade) */
	.page-id-17 .page-intro-section .wp-block-image.has-offset-pool-bg {
		width: 100vw !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		margin-bottom: 30px !important;
	}

	.page-id-17 .service-areas-facility-grid .wp-block-image img {
		object-fit: cover;
		width: 100%;
		height: auto;
		min-height: 180px;
		max-height: 280px;
	}

	/* #74 - Headline goes on two lines */
	/* Force headline to wrap - reduce font size to allow natural wrapping */
	.page-id-17 .page-intro-section h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px);
		line-height: 1.15;
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: none;
		max-width: 100%;
		margin-bottom: 10px;
		/* Spacing between heading and separator */
	}

	/* Facility grid headline */
	.page-id-17 .service-areas-facility-grid>h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px);
		line-height: 1.15;
		padding-left: 0;
		padding-right: 0;
	}

	/* Card headings in facility grid */
	.page-id-17 .service-areas-facility-grid .wp-block-group h3.wp-block-heading {
		font-size: clamp(16px, 4.5vw, 20px);
		line-height: 1.2;
	}

	/* #75 - Widen quad */
	/* Facility grid cards - full width on mobile */
	.page-id-17 .service-areas-facility-grid .wp-block-group.has-theme-07-background-color {
		padding: 0 0 20px 0;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Card inner padding */
	.page-id-17 .service-areas-facility-grid .wp-block-group.has-theme-07-background-color .wp-block-group {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Remove margin between card rows */
	.page-id-17 .service-areas-facility-grid .wp-block-columns[style*="margin-top"] {
		margin-top: 0 !important;
	}

	/* #76 - Decrease paragraph text size (too large) */
	.page-id-17 .page-intro-section p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.55;
	}

	.page-id-17 .service-areas-facility-grid p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.5;
	}

	/* Eyebrow/label text - smaller */
	.page-id-17 .page-intro-section .has-theme-06-color {
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 1px;
	}

	/* Separator - narrower on mobile */
	.page-id-17 .page-intro-section .wp-block-separator {
		width: 100px;
	}

	/* #77 - Stats above the map */
	.page-id-17 .service-areas-map-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Map container - full width with flexbox for mobile layout */
	.page-id-17 .service-areas-map-section .service-areas-map-container {
		width: 100%;
		max-width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Counter overlay - stack vertically, centered content, above map */
	.page-id-17 .service-areas-map-section .service-areas-counter-overlay {
		width: 100%;
		position: relative;
		margin-bottom: 24px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		order: -1;
	}

	.page-id-17 .service-areas-map-section .service-areas-counter-overlay .wp-block-group.has-theme-02-background-color {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	/* NOTE: Map image styling consolidated to line ~22144 (includes object-fit: contain) */

	/* Stats text styling */
	.page-id-17 .service-areas-map-section h3.wp-block-heading {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	/* Disclaimer text */
	.page-id-17 .service-areas-map-section>p {
		font-size: var(--wp--preset--font-size--small);
		margin-top: 32px;
	}

	/* Reduce space between sections */
	.page-id-17 .page-intro-section+.service-areas-facility-grid,
	.page-id-17 .service-areas-facility-grid+.service-areas-map-section {
		margin-top: 0;
	}

	/* ============================================
	   PARTNER WITH US PAGE - Mobile Fixes
	   Tasks #78-83 | Page ID: 21
	   ============================================ */

	/* #78 - Enlarge headline within blocks on mobile */
	.page-id-21 .page-intro-section h2.wp-block-heading,
	.page-id-21 .carousel-text-section h2.wp-block-heading {
		font-size: clamp(28px, 7.5vw, 38px);
		line-height: 1.15;
	}

	/* Partner Value Section - "THE VALUE OF PARTNERSHIP" h2 */
	/* #48 - Make this the dominant headline (larger than h3 card headings at 20-26px) */
	.page-id-21 h2.is-style-type-style-headline-large {
		font-size: clamp(28px, 7vw, 36px) !important;
		line-height: 1.15 !important;
	}

	/* Value proposition headings (Safe and Reliable, Efficiency, etc.) */
	.page-id-21 .page-intro-section h3.wp-block-heading {
		font-size: clamp(20px, 5.5vw, 26px);
		line-height: 1.2;
	}

	/* #79 - Pattern follows other page adjustments (consistent padding/margins) */
	/* Partner page sections - mobile padding */
	/* Note: carousel-text-section has custom handling below for full-width carousel
	   NOTE: padding-left/right overridden to 0 at line ~16392 for full-width intro image */
	.page-id-21 .page-intro-section {
		padding-top: 32px;
		padding-bottom: 40px !important;
	}

	/* Remove gaps: intro → partner value → large bg overlay */
	.page-id-21 .wp-block-kindling-section {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.page-id-21 .large-bg-overlay-section {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Partner contact section - no padding to allow full-width image */
	.page-id-21 .partner-contact-section {
		padding-left: 0;
		padding-right: 0;
		padding-top: 32px;
		padding-bottom: 0;
	}

	/* Inner containers - no extra padding */
	.page-id-21 .page-intro-section .wp-block-columns.alignwide,
	.page-id-21 .carousel-text-section .wp-block-columns.alignwide,
	.page-id-21 .partner-contact-section .wp-block-columns.alignwide {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* Intro section - image full width, text with 15px padding */
	.page-id-21 .page-intro-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.page-id-21 .page-intro-section .wp-block-columns {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Image column - full width edge-to-edge */
	.page-id-21 .page-intro-section .wp-block-column:first-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.page-id-21 .page-intro-section .wp-block-column:first-child .wp-block-image,
	.page-id-21 .page-intro-section .wp-block-column:first-child img {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
	}

	/* Text column - 15px padding left and right */
	.page-id-21 .page-intro-section .wp-block-column:last-child {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Decrease paragraph text size for readability */
	.page-id-21 .page-intro-section p,
	.page-id-21 .carousel-text-section p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.55;
	}

	/* #81 - Decrease margin on left side */
	.page-id-21 .page-intro-section .wp-block-column:first-child,
	.page-id-21 .carousel-text-section .wp-block-column {
		margin-left: 0;
		padding-left: 0;
	}

	/* Stack columns vertically */
	.page-id-21 .page-intro-section .wp-block-columns,
	.page-id-21 .carousel-text-section .wp-block-columns {
		flex-direction: column;
		gap: 24px;
	}

	.page-id-21 .page-intro-section .wp-block-column,
	.page-id-21 .carousel-text-section .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	/* Remove inline padding overrides on image column only */
	.page-id-21 .page-intro-section .wp-block-column:first-child[style*="padding-left"],
	.page-id-21 .page-intro-section .wp-block-column:first-child[style*="padding-right"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Text column - 30px edge spacing */
	.page-id-21 .page-intro-section .wp-block-column:last-child[style*="padding-left"],
	.page-id-21 .page-intro-section .wp-block-column:last-child[style*="padding-right"] {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* Images - proper proportions on mobile */
	.page-id-21 .page-intro-section .wp-block-image img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		width: 100%;
		height: auto;
		min-height: 220px;
	}

	/* Separator - narrower on mobile */
	.page-id-21 .page-intro-section .wp-block-separator {
		width: 100px;
	}

	/* Eyebrow/label text - smaller */
	.page-id-21 .page-intro-section .has-theme-06-color {
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 1px;
	}

	/* #80 - Carousel images need to go full width of window */
	/* The carousel is inside a column that's constrained by section padding */
	/* Override WordPress layout constraints for full-width carousel */

	/* Prevent horizontal scroll while allowing breakout */
	.page-id-21 {
		overflow-x: hidden;
	}

	/* Remove section-level constraints and make full viewport width */
	/* REQUIRED: !important to override WP Group block inline padding/width for full-width carousel breakout */
	.page-id-21 .carousel-text-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		max-width: 100vw !important;
		width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
	}

	/* Override is-layout-constrained centering for this section */
	/* REQUIRED: !important to override WP is-layout-constrained default max-width centering */
	.page-id-21 .carousel-text-section.is-layout-constrained>* {
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Stack columns vertically on mobile */
	/* REQUIRED: !important to override WP Columns block inline flex/gap/width styles for mobile stacking */
	.page-id-21 .carousel-text-section .wp-block-columns.alignwide {
		flex-direction: column !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		gap: 24px !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* First column (carousel) - full width within section */
	/* REQUIRED: !important to override WP Column block inline width/flex-basis for mobile full width */
	.page-id-21 .carousel-text-section .wp-block-columns>.wp-block-column:first-child {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		order: 1;
	}

	/* Second column (text) - add padding to match intro section (30px) */
	/* REQUIRED: !important to override WP Column block inline width/padding for mobile layout */
	.page-id-21 .carousel-text-section .wp-block-columns>.wp-block-column:last-child {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
		order: 2;
	}

	/* Override inline padding-left on text column */
	/* REQUIRED: !important to override WP Column block inline padding-left for mobile */
	.page-id-21 .carousel-text-section .wp-block-column[style*="padding-left: 100px"],
	.page-id-21 .carousel-text-section .wp-block-column[style*="padding-left:100px"] {
		padding-left: 30px !important;
	}

	/* Carousel container - full width within column */
	/* Override the global 952px width set on .project-zero-carousel */
	/* Use body prefix for higher specificity */
	/* REQUIRED: !important to override desktop fixed carousel width for responsive mobile layout */
	body.page-id-21 .carousel-text-section .project-zero-carousel,
	body.page-id-21 .project-zero-carousel,
	.page-id-21 .carousel-text-section .project-zero-carousel,
	.page-id-21 .project-zero-carousel {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		position: relative !important;
		left: auto !important;
		right: auto !important;
	}

	/* Kindling carousel (Splide) - full width on mobile */
	/* REQUIRED: !important to override Splide carousel default sizing for mobile full width */
	.page-id-21 .carousel-text-section .wp-block-kindling-carousel,
	.page-id-21 .carousel-text-section .kindling-carousel-container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	/* REQUIRED: !important to override carousel image fixed sizing for responsive mobile images */
	.page-id-21 .carousel-text-section .wp-block-kindling-carousel img,
	.page-id-21 .carousel-text-section .kindling-carousel-container img {
		width: 100% !important;
		height: auto !important;
		object-fit: cover;
	}

	/* REQUIRED: !important to override carousel slides container fixed sizing for mobile */
	body.page-id-21 .carousel-text-section .project-zero-carousel .carousel-slides,
	body.page-id-21 .project-zero-carousel .carousel-slides,
	.page-id-21 .carousel-text-section .project-zero-carousel .carousel-slides,
	.page-id-21 .project-zero-carousel .carousel-slides {
		width: 100% !important;
		height: auto !important;
		min-height: 250px;
		position: relative !important;
	}

	/* REQUIRED: !important to override carousel slide absolute positioning for mobile stacked layout */
	body.page-id-21 .carousel-text-section .project-zero-carousel .carousel-slide,
	body.page-id-21 .project-zero-carousel .carousel-slide,
	.page-id-21 .carousel-text-section .project-zero-carousel .carousel-slide,
	.page-id-21 .project-zero-carousel .carousel-slide {
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
	}

	/* Only show active slide, hide others */
	/* REQUIRED: !important to hide non-active carousel slides for mobile single-slide view */
	body.page-id-21 .project-zero-carousel .carousel-slide:not(.is-active) {
		display: none !important;
	}

	/* REQUIRED: !important to show active slide and reset positioning for mobile */
	body.page-id-21 .project-zero-carousel .carousel-slide.is-active {
		display: block !important;
		position: relative !important;
	}

	/* REQUIRED: !important to override carousel image fixed dimensions for responsive mobile sizing */
	body.page-id-21 .carousel-text-section .project-zero-carousel .carousel-slide img,
	body.page-id-21 .project-zero-carousel .carousel-slide img,
	.page-id-21 .carousel-text-section .project-zero-carousel .carousel-slide img,
	.page-id-21 .project-zero-carousel .carousel-slide img {
		width: 100% !important;
		height: auto !important;
		min-height: 250px;
		max-height: 350px;
		object-fit: cover;
		border-radius: 0 !important;
	}

	/* Carousel dots centered */
	body.page-id-21 .carousel-text-section .project-zero-carousel-dots,
	body.page-id-21 .project-zero-carousel-dots,
	.page-id-21 .carousel-text-section .project-zero-carousel-dots,
	.page-id-21 .project-zero-carousel-dots {
		justify-content: center;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 16px;
	}

	/* #82 - Photo needs to go below form on Let's Connect pattern */
	/* Stack columns and put form first, image below */
	/* REQUIRED: !important to override desktop absolute positioning and overflow hidden */

	/* Override section overflow and height to allow stacking */
	/* REQUIRED: !important to override desktop overflow hidden and fixed height for mobile stacked layout */
	.page-id-21 .partner-contact-section,
	.page-id-21 .partner-contact-section.has-droplet-bg,
	.page-id-21 .has-droplet-bg.partner-contact-section {
		overflow: visible !important;
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
	}

	/* REQUIRED: !important to override WP Columns block inline flex and spacing for mobile column stacking */
	.page-id-21 .partner-contact-section .wp-block-columns,
	.page-id-25 .partner-contact-section .wp-block-columns,
	.page-id-483 .partner-contact-section .wp-block-columns {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		height: auto !important;
		max-height: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* REQUIRED: !important to override section fixed height/overflow for mobile auto height layout */
	.page-id-21 .partner-contact-section,
	.page-id-25 .partner-contact-section,
	.page-id-483 .partner-contact-section {
		height: auto !important;
		max-height: none !important;
		min-height: auto !important;
		overflow: visible !important;
	}

	/* REQUIRED: !important to override WP Column block inline flex-basis for mobile auto sizing */
	.page-id-21 .partner-contact-section .wp-block-column,
	.page-id-25 .partner-contact-section .wp-block-column,
	.page-id-483 .partner-contact-section .wp-block-column {
		flex-basis: auto !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* Form column (first child) stays first - 30px horizontal padding for consistency */
	.page-id-21 .partner-contact-section .wp-block-column:first-child,
	.page-id-25 .partner-contact-section .wp-block-column:first-child,
	.page-id-483 .partner-contact-section .wp-block-column:first-child {
		order: 1 !important;
		padding: 32px 30px !important;
	}

	/* Image column goes below (second) - REQUIRED: !important to override desktop .has-droplet-bg absolute positioning */
	/* Must match or exceed specificity of: .has-droplet-bg .wp-block-column:last-child:not(...) */
	.page-id-21 .has-droplet-bg .wp-block-column:last-child,
	.page-id-21 .has-droplet-bg .wp-block-column.form-image-column,
	.page-id-21 .partner-contact-section .form-image-column,
	.page-id-21 .partner-contact-section .wp-block-column:last-child,
	body.page-id-21 .has-droplet-bg .wp-block-column:last-child,
	.page-id-25 .has-droplet-bg .wp-block-column:last-child,
	.page-id-25 .has-droplet-bg .wp-block-column.form-image-column,
	.page-id-25 .partner-contact-section .form-image-column,
	.page-id-25 .partner-contact-section .wp-block-column:last-child,
	body.page-id-25 .has-droplet-bg .wp-block-column:last-child,
	.page-id-483 .has-droplet-bg .wp-block-column:last-child,
	.page-id-483 .has-droplet-bg .wp-block-column.form-image-column,
	.page-id-483 .partner-contact-section .form-image-column,
	.page-id-483 .partner-contact-section .wp-block-column:last-child,
	body.page-id-483 .has-droplet-bg .wp-block-column:last-child {
		order: 2 !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100vw !important;
		height: auto !important;
		min-height: 250px !important;
		flex-basis: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Full-width image in Form + Image section */
	.page-id-21 .partner-contact-section .form-image-column .wp-block-image,
	.page-id-21 .partner-contact-section .wp-block-column:last-child .wp-block-image,
	.page-id-21 .has-droplet-bg .wp-block-column:last-child .wp-block-image,
	.page-id-25 .partner-contact-section .form-image-column .wp-block-image,
	.page-id-25 .partner-contact-section .wp-block-column:last-child .wp-block-image,
	.page-id-25 .has-droplet-bg .wp-block-column:last-child .wp-block-image,
	.page-id-483 .partner-contact-section .form-image-column .wp-block-image,
	.page-id-483 .partner-contact-section .wp-block-column:last-child .wp-block-image,
	.page-id-483 .has-droplet-bg .wp-block-column:last-child .wp-block-image {
		margin: 0 !important;
		width: 100% !important;
	}

	/* Reset image sizing for mobile - full width */
	.page-id-21 .partner-contact-section .form-image-column img,
	.page-id-21 .partner-contact-section .wp-block-column:last-child img,
	.page-id-21 .has-droplet-bg .wp-block-column:last-child img,
	.page-id-25 .partner-contact-section .form-image-column img,
	.page-id-25 .partner-contact-section .wp-block-column:last-child img,
	.page-id-25 .has-droplet-bg .wp-block-column:last-child img,
	.page-id-483 .partner-contact-section .form-image-column img,
	.page-id-483 .partner-contact-section .wp-block-column:last-child img,
	.page-id-483 .has-droplet-bg .wp-block-column:last-child img {
		width: 100% !important;
		height: auto !important;
		min-height: 250px;
		max-height: 350px;
		object-fit: cover;
		border-radius: 0 !important;
	}

	/* Contact section heading */
	.page-id-21 .partner-contact-section h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px) !important;
		line-height: 1.15 !important;
	}

	/* Contact section description */
	.page-id-21 .partner-contact-section p {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		line-height: 1.55 !important;
	}

	/* Form fields - constrain width to maintain equal padding on both sides */
	.page-id-21 .partner-contact-section .gform_wrapper,
	.page-id-25 .partner-contact-section .gform_wrapper,
	.page-id-483 .partner-contact-section .gform_wrapper {
		max-width: calc(100% - 15px) !important;
	}

	.page-id-21 .partner-contact-section .gform_wrapper input[type="text"],
	.page-id-21 .partner-contact-section .gform_wrapper input[type="email"],
	.page-id-21 .partner-contact-section .gform_wrapper input[type="tel"],
	.page-id-21 .partner-contact-section .gform_wrapper textarea,
	.page-id-21 .partner-contact-section .gform_wrapper select,
	.page-id-25 .partner-contact-section .gform_wrapper input[type="text"],
	.page-id-25 .partner-contact-section .gform_wrapper input[type="email"],
	.page-id-25 .partner-contact-section .gform_wrapper input[type="tel"],
	.page-id-25 .partner-contact-section .gform_wrapper textarea,
	.page-id-25 .partner-contact-section .gform_wrapper select,
	.page-id-483 .partner-contact-section .gform_wrapper input[type="text"],
	.page-id-483 .partner-contact-section .gform_wrapper input[type="email"],
	.page-id-483 .partner-contact-section .gform_wrapper input[type="tel"],
	.page-id-483 .partner-contact-section .gform_wrapper textarea,
	.page-id-483 .partner-contact-section .gform_wrapper select {
		max-width: 100% !important;
	}

	/* Contact form - reduce placeholder text size by 2px on mobile */
	.page-id-21 .partner-contact-section .gform_wrapper input::placeholder,
	.page-id-21 .partner-contact-section .gform_wrapper textarea::placeholder,
	.page-id-25 .partner-contact-section .gform_wrapper input::placeholder,
	.page-id-25 .partner-contact-section .gform_wrapper textarea::placeholder,
	.page-id-483 .partner-contact-section .gform_wrapper input::placeholder,
	.page-id-483 .partner-contact-section .gform_wrapper textarea::placeholder {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
	}

	/* #83 - Decrease size of button (way larger than others) */
	.page-id-21 .page-intro-section .wp-block-button .wp-block-button__link,
	.page-id-21 .carousel-text-section .wp-block-button .wp-block-button__link {
		font-size: var(--wp--custom--fontSize--base-sm);
		padding: 10px 20px;
		min-width: auto;
	}

	/* Form submit button - reduce size - REQUIRED: !important to override Gravity Forms styles */
	/* Need high specificity to override Gravity Forms default button styling */
	.page-id-21 .partner-contact-section .gform_wrapper .gform_button,
	.page-id-21 .partner-contact-section .gform_wrapper input[type="submit"],
	.page-id-21 .partner-contact-section .gform_wrapper.gform-theme .gform_button,
	.page-id-21 .partner-contact-section .gform-theme .gform-footer .gform_button,
	body.page-id-21 .partner-contact-section .gform_wrapper .gform_button,
	body.page-id-21 .gform_wrapper .gform_button.button,
	.page-id-21 .gform_wrapper .gform-footer .gform_button {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		padding: 12px 24px !important;
		width: auto !important;
		min-width: 200px !important;
		max-width: 100% !important;
		min-height: auto !important;
		height: auto !important;
		line-height: 1.4 !important;
	}

	/* Large bg overlay section - adjust text */
	.page-id-21 .large-bg-overlay-section h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px);
		line-height: 1.2;
	}

	.page-id-21 .large-bg-overlay-section p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.55;
	}
}

/* ==========================================================================
   BECOME A LIFEGUARD PAGE - Mobile Fixes (max-width: 781px)
   Tasks #84-88
   Added: 2025-12-29
   REQUIRED: !important declarations override WP Columns block core flex-wrap,
   WP Column block inline width/flex-basis, Job Fit desktop positioning,
   and carousel margin-left for mobile column stacking.
   ========================================================================== */
@media (max-width: 781px) {

	/* #84 - Pattern follows other page adjustments */
	/* Lifeguard sections - mobile padding */
	.lifeguard-intro-section,
	.job-fit-section,
	.lifeguard-love-section,
	.lifeguard-gallery-section,
	.lifeguard-gallery-strip {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Inner containers - no extra padding */
	.lifeguard-intro-section .wp-block-columns.alignwide,
	.job-fit-section .wp-block-columns.alignwide,
	.lifeguard-love-section .wp-block-columns.alignwide {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* Paragraph text size */
	.lifeguard-intro-section p,
	.job-fit-section p,
	.lifeguard-love-section p {
		font-size: var(--wp--custom--fontSize--base-lg);
		line-height: 1.6;
	}

	/* Stack columns - override WP core .wp-block-columns flex-wrap: wrap !important */
	.lifeguard-intro-section .wp-block-columns,
	.job-fit-section .wp-block-columns,
	.lifeguard-love-section .wp-block-columns {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 24px;
	}

	/* Job Fit Section - override desktop high-specificity rule for mobile stacking */
	.job-fit-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}

	/* Override WP core rule: .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column */
	.lifeguard-intro-section .wp-block-columns>.wp-block-column,
	.job-fit-section .wp-block-columns>.wp-block-column,
	.lifeguard-love-section .wp-block-columns>.wp-block-column {
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
	}

	/* Job Fit Section columns - override desktop high-specificity 50% width rules for mobile */
	.job-fit-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child,
	.job-fit-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:last-child {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: auto !important;
	}

	/* Override has-water-ripple-bg rule that sets position: absolute/relative on first column */
	/* Must match specificity: .has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child */
	.job-fit-section.has-water-ripple-bg:has(.has-theme-02-background-color):not(:has(.has-theme-07-background-color))>.wp-block-columns>.wp-block-column:first-child {
		position: static !important;
		top: auto !important;
		left: auto !important;
		bottom: auto !important;
	}

	/* #85 - Carousel full width */
	.job-fit-section,
	.job-fit-container {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.job-fit-carousel {
		width: 100%;
		max-width: 100%;
		margin-left: 0 !important;
		/* Reset desktop negative margin */
	}

	/* Job Fit carousel mobile - actual HTML class names */
	.job-fit-carousel .carousel-slides {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 250px;
	}

	.job-fit-carousel .carousel-slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		opacity: 0;
		transition: opacity 0.8s ease-in-out;
	}

	.job-fit-carousel .carousel-slide.is-active {
		opacity: 1;
		position: relative;
	}

	.job-fit-carousel .carousel-slide img {
		width: 100%;
		height: auto;
		object-fit: cover;
		max-height: 300px;
	}

	.job-fit-slides {
		width: 100%;
	}

	.job-fit-slide {
		width: 100%;
		flex: 0 0 100%;
	}

	.job-fit-slide img {
		width: 100%;
		height: auto;
		object-fit: cover;
		max-height: 300px;
	}

	/* #49 - Partner With Us carousel - fix white space by overriding 500px desktop height */
	/* REQUIRED: !important to override inline style --carousel-min-height:500px from WP database */
	.is-job-right-section .wp-block-kindling-carousel {
		--carousel-min-height: auto !important;
	}

	.is-job-right-section .kindling-carousel-container {
		min-height: auto !important;
	}

	.is-job-right-section .splide__slide figure.wp-block-image img {
		height: auto;
		max-height: 300px;
	}

	/* #86 - Decrease spacing below carousel */
	.job-fit-section {
		padding-bottom: 24px;
		margin-bottom: 0;
	}

	/* NOTE: job-fit-container gap complements size/padding rule at line ~16944 */
	.job-fit-container {
		gap: 20px;
	}

	.job-fit-content {
		padding: 0 20px;
	}

	/* Space after job fit section */
	.job-fit-section+* {
		margin-top: 32px;
	}

	/* #87 - Headline margin - "Looks" on third line */
	/* Adjust lifeguard section headings for better line breaks */
	.lifeguard-love-section h2.wp-block-heading,
	.lifeguard-intro-section h2.wp-block-heading {
		font-size: clamp(28px, 7vw, 40px);
		line-height: 1.15;
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: none;
		margin-bottom: 20px;
	}

	/* "WHY YOU'LL LOVE LIFEGUARDING" - ensure natural line breaks */
	.lifeguard-love-section .wp-block-heading[style*="uppercase"],
	.job-fit-content h2 {
		font-size: clamp(24px, 6vw, 36px);
		line-height: 1.2;
		letter-spacing: 0.02em;
	}

	/* #88 - Fix gallery carousel circles (dots) */
	/* Gallery carousel navigation dots */
	.lifeguard-gallery-strip .gallery-dots,
	.lifeguard-gallery-section .carousel-dots,
	.lifeguard-gallery-section .slick-dots,
	.lifeguard-gallery-section .kindling-carousel-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
		padding: 0;
	}

	.lifeguard-gallery-strip .gallery-dot,
	.lifeguard-gallery-section .carousel-dot,
	.lifeguard-gallery-section .slick-dots li button,
	.lifeguard-gallery-section .kindling-carousel-dot {
		width: 10px;
		height: 10px;
		border-radius: var(--wp--custom--border--rounded-full);
		background-color: rgba(26, 78, 162, 0.3);
		border: none;
		cursor: pointer;
		padding: 0;
		transition: background-color 0.3s ease;
	}

	.lifeguard-gallery-strip .gallery-dot.is-active,
	.lifeguard-gallery-section .carousel-dot.is-active,
	.lifeguard-gallery-section .slick-dots li.slick-active button,
	.lifeguard-gallery-section .kindling-carousel-dot.is-active {
		background-color: var(--wp--preset--color--theme-02, #1a4ea2);
	}

	/* Job fit carousel dots fix */
	.job-fit-dots,
	.job-fit-carousel-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
	}

	/* REQUIRED: !important to override default carousel dot sizing for consistent mobile touch targets */
	.job-fit-dot,
	.job-fit-carousel-dots .carousel-dot {
		width: 10px !important;
		height: 10px !important;
		min-width: 10px !important;
		min-height: 10px !important;
		border-radius: var(--wp--custom--border--rounded-full);
		background-color: rgba(26, 78, 162, 0.3);
		border: none;
		padding: 0 !important;
		cursor: pointer;
		padding: 0;
	}

	.job-fit-dot.is-active,
	.job-fit-carousel-dots .carousel-dot.is-active {
		background-color: var(--wp--preset--color--theme-02, #1a4ea2);
	}

	/* Gallery strip - full width images on mobile */
	.lifeguard-gallery-strip {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-left: 0;
		padding-right: 0;
	}

	.lifeguard-gallery-strip .gallery-images {
		display: flex;
		gap: 12px;
		padding: 0 20px;
	}

	.lifeguard-gallery-strip .gallery-image {
		flex: 0 0 85%;
		max-width: 85%;
	}

	.lifeguard-gallery-strip .gallery-image img {
		width: 100%;
		height: auto;
		border-radius: var(--wp--custom--border--rounded-small);
	}

	/* Lifeguard buttons */
	.lifeguard-intro-section .wp-block-button .wp-block-button__link,
	.job-fit-button {
		font-size: var(--wp--custom--fontSize--base-lg);
		padding: 12px 24px;
		min-width: auto;
	}
}

/* ============================================
   SMALL MOBILE - Service Areas, Partner, Lifeguard (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

	/* SERVICE AREAS - Tighter spacing */
	.service-areas-section,
	.service-areas-expertise-section,
	.service-areas-facility-grid,
	.service-areas-map-section {
		padding: 24px 16px;
	}

	.service-areas-section h2.wp-block-heading,
	.service-areas-expertise-section h2.wp-block-heading {
		font-size: clamp(24px, 6vw, 32px);
	}

	/* Image at top of card - no top padding (overrides inline padding-bottom:24px from DB) */
	/* REQUIRED: !important to override WP Group block inline padding styles for mobile card layout */
	.service-areas-facility-grid .wp-block-group.has-theme-07-background-color {
		padding: 0 20px 16px 20px !important;
	}

	/* Image Quad - full width image, 26px heading, no image margin */
	body.single-operations .service-areas-facility-grid .wp-block-group.has-theme-07-background-color .wp-block-image,
	body.single-operations .service-areas-facility-grid .wp-block-group.has-theme-07-background-color figure.wp-block-image {
		margin-bottom: 0 !important;
		margin-left: -20px !important;
		margin-right: -20px !important;
		width: calc(100% + 40px) !important;
		max-width: calc(100% + 40px) !important;
	}

	body.single-operations .service-areas-facility-grid .wp-block-group.has-theme-07-background-color .wp-block-image img {
		width: 100% !important;
		border-radius: 0 !important;
	}

	body.single-operations .service-areas-facility-grid .wp-block-group.has-theme-07-background-color h3.wp-block-heading {
		font-size: var(--wp--custom--fontSize--lg-xl) !important;
	}

	/* PARTNER - Compact layout */
	.partner-intro-section,
	.partner-value-section,
	.partner-focus-section,
	.partner-trusted-staffing-section,
	.partner-contact-section {
		padding: 24px 16px;
	}

	.partner-intro-section h2.wp-block-heading,
	.partner-value-section h2.wp-block-heading {
		font-size: clamp(26px, 7vw, 36px);
	}

	/* LIFEGUARD - Compact layout */
	.lifeguard-intro-section,
	.job-fit-section,
	.lifeguard-love-section,
	.lifeguard-gallery-section {
		padding: 24px 16px;
	}

	.lifeguard-love-section h2.wp-block-heading,
	.job-fit-content h2 {
		font-size: clamp(22px, 5.5vw, 30px);
	}

	.job-fit-slide img {
		max-height: 250px;
	}

	.job-fit-content {
		padding: 0 16px;
	}
}

/* ============================================
   VERY SMALL MOBILE - Service Areas, Partner, Lifeguard (max-width: 375px)
   ============================================ */
@media (max-width: 375px) {

	/* SERVICE AREAS */
	.service-areas-section,
	.service-areas-expertise-section,
	.service-areas-facility-grid,
	.service-areas-map-section {
		padding: 20px 12px;
	}

	.service-areas-section h2.wp-block-heading,
	.service-areas-expertise-section h2.wp-block-heading {
		font-size: clamp(22px, 5.5vw, 28px);
	}

	/* PARTNER */
	.partner-intro-section,
	.partner-value-section,
	.partner-focus-section,
	.partner-contact-section {
		padding: 20px 12px;
	}

	.partner-intro-section h2.wp-block-heading,
	.partner-value-section h2.wp-block-heading {
		font-size: clamp(24px, 6vw, 32px);
	}

	/* LIFEGUARD */
	.lifeguard-intro-section,
	.job-fit-section,
	.lifeguard-love-section {
		padding: 20px 12px;
	}

	.lifeguard-love-section h2.wp-block-heading,
	.job-fit-content h2 {
		font-size: clamp(20px, 5vw, 26px);
	}

	.job-fit-content {
		padding: 0 12px;
	}

	.lifeguard-gallery-strip .gallery-images {
		padding: 0 12px;
	}
}

/* ============================================
   Tasks #69-72: Our Solutions Page Mobile Fixes (375px viewport)
   Additional fixes for image/accordion layout and spacing
   ============================================ */
@media (max-width: 480px) {

	/* #69 - Add margin above Maintenance section and between solution sections */
	.solutions-section.image-accordion-section {
		margin-top: 32px;
	}

	/* First solutions section after intro doesn't need top margin */
	.solutions-intro-section+.solutions-section.image-accordion-section,
	.page-intro-section+.solutions-section.image-accordion-section {
		margin-top: 0;
	}

	/* #70 - Flip image above accordion in mobile view */
	/* Convert grid to flex column and reorder items */
	.solutions-section.image-accordion-section .is-style-kindling-grid-system,
	.image-accordion-section .is-style-kindling-grid-system {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	/* Image grid item comes first (order: -1) */
	.solutions-section.image-accordion-section .wp-block-kindling-grid-item:has(.wp-block-image),
	.solutions-section.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg,
	.solutions-section.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right,
	.image-accordion-section .wp-block-kindling-grid-item:has(.wp-block-image),
	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg,
	.image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right {
		order: -1;
	}

	/* Text/accordion grid item comes second (order: 1) */
	.solutions-section.image-accordion-section .wp-block-kindling-grid-item:has(.solutions-accordion),
	.solutions-section.image-accordion-section .wp-block-kindling-grid-item:has(h2),
	.image-accordion-section .wp-block-kindling-grid-item:has(.solutions-accordion),
	.image-accordion-section .wp-block-kindling-grid-item:has(h2) {
		order: 1;
	}

	/* #71 - Adjust divider line margin on top and bottom */
	/* Intro section divider/separator - centered on mobile
	   REQUIRED: !important to override WP Separator default left alignment */
	.solutions-intro-section .wp-block-separator,
	.page-intro-section .wp-block-separator,
	.solutions-section .short-underline {
		margin-top: 12px;
		margin-bottom: 16px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Accordion section separators */
	.solutions-accordion .wp-block-separator {
		margin-top: 8px;
		margin-bottom: 12px;
	}

	/* Separator in trusted partners section */
	.trusted-partners-section .wp-block-separator {
		margin-top: 16px;
		margin-bottom: 20px;
	}

	/* #72 - Decrease section height (less space on top and bottom) */
	/* Reduce vertical padding on solutions sections */
	.solutions-section.image-accordion-section,
	.image-accordion-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Intro section - reduce padding */
	.solutions-intro-section,
	.page-intro-section {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* Trusted partners section - reduce height */
	.trusted-partners-section {
		min-height: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Reduce padding inside cover inner container */
	.solutions-section.image-accordion-section .wp-block-cover__inner-container {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

/* 375px specific refinements */
@media (max-width: 375px) {

	/* #69 - Tighter margin between sections at smallest viewport */
	.solutions-section.image-accordion-section {
		margin-top: 24px;
	}

	/* #70 - Ensure flex order still works at 375px */
	.solutions-section.image-accordion-section .is-style-kindling-grid-system {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* #71 - Even tighter divider margins */
	.solutions-intro-section .wp-block-separator,
	.page-intro-section .wp-block-separator {
		margin-top: 10px;
		margin-bottom: 14px;
	}

	/* #72 - Smallest section padding */
	.solutions-section.image-accordion-section,
	.image-accordion-section {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.trusted-partners-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

/* ============================================
   Become a Lifeguard Page - Global Styles (all viewports)
   Page: /become-a-lifeguard/ (page-id-23)
   ============================================ */

/* Remove the dark overlay so true image shows through on Large BG Overlay section */
.page-id-23 .large-bg-overlay-section .wp-block-cover__background {
	display: none;
}

/* Remove grayscale filter to show true image colors */
.page-id-23 .large-bg-overlay-section .wp-block-cover__image-background {
	filter: none;
}

/* ============================================
   Tasks #84-86: Become a Lifeguard Page Mobile Fixes (375px viewport)
   Page: /become-a-lifeguard/
   ============================================ */
@media (max-width: 781px) {

	/* #84 - Consistent styling with other pages */
	/* Page intro section - consistent padding */
	.page-id-23 .page-intro-section,
	.page-id-23 .has-texture-bg.page-intro-section {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Lifeguard love section (yellow pattern background) - consistent padding */
	.page-id-23 .lifeguard-love-section,
	.page-id-23 .has-summer-pattern-bg {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Carousel text section (water ripple) - consistent 30px horizontal padding */
	/* REQUIRED: !important to override has-global-padding from theme.json */
	.page-id-23 .carousel-text-section,
	.page-id-23 .has-water-ripple-bg.carousel-text-section,
	.page-id-23 .carousel-text-section.has-global-padding {
		padding-left: 30px !important;
		padding-right: 30px !important;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Large bg overlay section - consistent padding */
	.page-id-23 .large-bg-overlay-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Lifeguard page - remove grayscale filter and overlay, show true image */
	.page-id-23 .large-bg-overlay-section .wp-block-cover__image-background {
		filter: none;
	}

	/* Remove the dark overlay so true image shows through */
	.page-id-23 .large-bg-overlay-section .wp-block-cover__background {
		display: none;
	}

	/* Headings - consistent sizing */
	.page-id-23 h2.wp-block-heading {
		font-size: clamp(28px, 7vw, 40px);
		line-height: 1.15;
		margin-bottom: 20px;
	}

	/* Paragraph text - consistent sizing */
	.page-id-23 .page-intro-section p,
	.page-id-23 .lifeguard-love-section p,
	.page-id-23 .carousel-text-section p {
		font-size: var(--wp--custom--fontSize--base-lg);
		line-height: 1.6;
	}

	/* Inner containers - remove extra padding */
	.page-id-23 .wp-block-columns.alignwide,
	.page-id-23 .wp-block-group.alignwide {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* #85 - Image carousel goes full width */
	.page-id-23 .image-gallery-carousel-section,
	.page-id-23 .has-red-pattern-bg {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		padding-left: 0;
		padding-right: 0;
	}

	/* Carousel container - full width */
	.page-id-23 .image-gallery-carousel-section .wp-block-kindling-carousel {
		width: 100%;
		max-width: 100%;
	}

	/* Carousel images - full width */
	.page-id-23 .image-gallery-carousel-section .carousel-slide img,
	.page-id-23 .image-gallery-carousel-section .wp-block-image img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	/* #86 - Decrease spacing below carousel */
	.page-id-23 .image-gallery-carousel-section {
		padding-top: 40px;
		padding-bottom: 24px;
		margin-bottom: 0;
	}

	/* Reduce margin on element after carousel */
	.page-id-23 .image-gallery-carousel-section+* {
		margin-top: 0;
	}

	/* Carousel dots - adjust for full width */
	.page-id-23 .image-gallery-carousel-section .splide__pagination {
		margin-top: 20px;
		padding-bottom: 0;
	}

	/* CTA section - reduce vertical padding to 80px
	   REQUIRED: !important to override WP Cover block inline padding/height styles */
	.page-id-23 .lifeguard-cta-section,
	body.page-id-23 .wp-block-cover.lifeguard-cta-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
		min-height: auto !important;
		height: auto !important;
	}

	/* Gallery section hr separator - centered (override left-align rule at line 12296)
	   REQUIRED: !important to override left-align mobile rule for centered separator */
	.page-id-23 .image-gallery-carousel-section .wp-block-separator,
	.page-id-23 .image-gallery-carousel-section hr,
	.page-id-23 .image-gallery-carousel-section hr.wp-block-separator.is-style-wide,
	.page-id-23 .image-gallery-carousel-section hr.wp-block-separator.is-style-wide.separator-224 {
		margin-left: auto !important;
		margin-right: auto !important;
		align-self: center !important;
	}

	/* Project Zero carousel in carousel-text-section - full width */
	.page-id-23 .carousel-text-section .project-zero-carousel {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		padding: 0;
	}

	.page-id-23 .carousel-text-section .project-zero-carousel .carousel-slide img {
		width: 100%;
		height: auto;
		max-height: 280px;
		object-fit: cover;
	}

	.page-id-23 .carousel-text-section .project-zero-carousel-dots {
		margin-top: 16px;
		padding: 0 20px;
	}
}

/* 480px specific refinements for Lifeguard page */
@media (max-width: 480px) {

	/* #50 - Fix button text wrapping - prevent "APPLY NOW" from stacking on two lines */
	.page-id-23 .wp-block-button__link {
		white-space: nowrap;
		min-width: 165px;
	}

	/* #84 - 30px horizontal padding for consistent edge spacing */
	.page-id-23 .page-intro-section,
	.page-id-23 .lifeguard-love-section,
	.page-id-23 .carousel-text-section {
		padding: 40px 30px;
	}

	/* #85 - Ensure carousel still full width */
	.page-id-23 .image-gallery-carousel-section {
		padding-top: 32px;
		padding-bottom: 20px;
	}

	/* #86 - Less spacing below carousel */
	.page-id-23 .image-gallery-carousel-section .splide__pagination {
		margin-top: 16px;
	}
}

/* 375px specific refinements for Lifeguard page */
@media (max-width: 375px) {

	/* #84 - 30px horizontal padding for consistent edge spacing */
	.page-id-23 .page-intro-section,
	.page-id-23 .lifeguard-love-section,
	.page-id-23 .carousel-text-section {
		padding: 40px 30px;
	}

	/* Headings - smaller at 375px */
	.page-id-23 h2.wp-block-heading {
		font-size: clamp(24px, 6vw, 32px);
	}

	/* #85 - Carousel full width maintained */
	.page-id-23 .image-gallery-carousel-section {
		padding-top: 24px;
		padding-bottom: 16px;
	}

	/* #86 - Minimal spacing below carousel */
	.page-id-23 .image-gallery-carousel-section .splide__pagination {
		margin-top: 12px;
	}

	/* Project Zero carousel height adjustment */
	.page-id-23 .carousel-text-section .project-zero-carousel .carousel-slide img {
		max-height: 240px;
	}

	/* #87 - Add margin on either side of headline so "Looks" goes on third line */
	.page-id-23 .image-gallery-carousel-section h2.wp-block-heading {
		padding-left: 40px;
		padding-right: 40px;
		max-width: 100%;
	}

	/* #88 - Gallery carousel dots fix - ensure visible and properly styled */
	.page-id-23 .image-gallery-carousel-section .splide__pagination {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 20px;
		padding: 0 20px;
	}

	.page-id-23 .image-gallery-carousel-section .splide__pagination__page {
		min-width: 14px;
		min-height: 14px;
		width: 14px;
		height: 14px;
		border-radius: var(--wp--custom--border--rounded-full);
		background-color: transparent;
		border: 2px solid var(--wp--preset--color--white);
		padding: 0;
		opacity: 1;
		cursor: pointer;
	}

	.page-id-23 .image-gallery-carousel-section .splide__pagination__page.is-active {
		background-color: var(--wp--preset--color--white);
		transform: scale(1);
	}

	.page-id-23 .image-gallery-carousel-section .splide__pagination__page::after {
		display: none;
	}

	/* ============================================
	   CAREERS PAGE MOBILE FIXES - Tasks #89-91
	   Page ID: 27
	   ============================================ */

	/* Task #89: Fix skinny sections
	   The safety-section uses 50/50 columns that don't stack properly
	   Force columns to stack and be full width
	   ---------------------------------------- */
	.page-id-27 .safety-section .wp-block-columns {
		flex-direction: column;
	}

	.page-id-27 .safety-section .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	/* ----------------------------------------
	   Task #90: Fix single-line text (text container too narrow)
	   Remove the 100px left padding and constrained content width
	   that causes text to be squished into a narrow column
	   ---------------------------------------- */
	.page-id-27 .safety-section .wp-block-column[style*="padding-left:100px"],
	.page-id-27 .safety-section .wp-block-column[style*="padding-left: 100px"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Remove constrained content width inside text column */
	.page-id-27 .safety-section .wp-block-group[class*="contentSize"] {
		max-width: 100%;
	}

	/* Ensure inner groups don't constrain width */
	.page-id-27 .safety-section .wp-block-column .wp-block-group {
		max-width: 100%;
		width: 100%;
	}

	/* ----------------------------------------
	   Task #91: Decrease line-height on headers
	   Reduce from 1.2 to tighter spacing on mobile
	   ---------------------------------------- */
	.page-id-27 .safety-section h2.wp-block-heading {
		line-height: 1.1;
	}

	.page-id-27 h1.wp-block-heading,
	.page-id-27 h2.wp-block-heading,
	.page-id-27 h3.wp-block-heading {
		line-height: 1.1;
	}

	/* Additional mobile refinements for Careers page */
	.page-id-27 .safety-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Carousel in safety-section - full width on mobile */
	.page-id-27 .safety-section .project-zero-carousel {
		width: 100%;
		max-width: 100%;
	}

	.page-id-27 .safety-section .project-zero-carousel .carousel-slides {
		height: auto;
		min-height: 280px;
		max-height: 350px;
	}

	.page-id-27 .safety-section .project-zero-carousel .carousel-slide img {
		height: 280px;
		object-fit: cover;
	}

	/* Careers Safety Kindling Carousel - mobile */
	.page-id-27 .careers-safety-carousel .splide__slide {
		height: 300px;
	}

	.page-id-27 .careers-safety-carousel .splide__pagination {
		bottom: 15px;
		gap: 10px;
	}

	.page-id-27 .careers-safety-carousel .splide__pagination__page {
		min-width: 14px;
		min-height: 14px;
		width: 14px;
		height: 14px;
	}

	.page-id-27 .careers-safety-carousel .splide__pagination__page::after {
		width: 14px;
		height: 14px;
	}

	/* ============================================
	   CAREERS PAGE (page-id-27) - MOBILE FIXES
	   Tasks #92-97
	   ============================================ */

	/* #92 - Decrease Benefits section top spacing */
	.page-id-27 .careers-benefits-section,
	.page-id-27 .careers-benefits-3col-section,
	.page-id-27 .has-theme-07-background-color {
		padding-top: 32px;
	}

	/* #93 - Fix columns - ensure proper stacking on mobile */
	.page-id-27 .wp-block-columns {
		flex-direction: column;
		gap: 24px;
	}

	.page-id-27 .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	/* #94 - Headline not cut off - fix truncated headings */
	.page-id-27 h1.wp-block-heading,
	.page-id-27 h2.wp-block-heading,
	.page-id-27 h3.wp-block-heading {
		white-space: normal;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
		max-width: 100%;
	}

	/* #95 - Add left/right margin for content */
	.page-id-27 .wp-block-group,
	.page-id-27 .wp-block-cover__inner-container,
	.page-id-27 .has-texture-bg>.wp-block-group,
	.page-id-27 .has-water-ripple-bg>.wp-block-group {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Prevent double-padding on nested groups */
	.page-id-27 .wp-block-group .wp-block-group {
		padding-left: 0;
		padding-right: 0;
	}

	/* #96 - Decrease top section spacing */
	.page-id-27 .careers-hero-section,
	.page-id-27 .has-texture-bg:first-of-type {
		padding-top: 24px;
	}

	/* #97 - Decrease bottom spacing */
	.page-id-27 .careers-benefits-section,
	.page-id-27 .careers-benefits-3col-section,
	.page-id-27 section,
	.page-id-27 .wp-block-group.alignfull {
		padding-bottom: 32px;
	}
}

@media (max-width: 480px) {

	/* #92 - Benefits section - tighter spacing at 480px */
	.page-id-27 .careers-benefits-section,
	.page-id-27 .careers-benefits-3col-section,
	.page-id-27 .has-theme-07-background-color {
		padding-top: 24px;
	}

	/* #93 - Columns gap tighter at smaller screens */
	.page-id-27 .wp-block-columns {
		gap: 20px;
	}

	/* #95 - Margins consistent at 480px */
	.page-id-27 .wp-block-group,
	.page-id-27 .wp-block-cover__inner-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* #96 - Tighter top section spacing */
	.page-id-27 .careers-hero-section,
	.page-id-27 .has-texture-bg:first-of-type {
		padding-top: 20px;
	}

	/* #97 - Tighter bottom spacing */
	.page-id-27 .careers-benefits-section,
	.page-id-27 .careers-benefits-3col-section,
	.page-id-27 section,
	.page-id-27 .wp-block-group.alignfull {
		padding-bottom: 24px;
	}
}

@media (max-width: 375px) {

	/* #92 - Benefits section - minimal spacing at 375px */
	.page-id-27 .careers-benefits-section,
	.page-id-27 .careers-benefits-3col-section,
	.page-id-27 .has-theme-07-background-color {
		padding-top: 20px;
	}

	/* #93 - Ensure benefit cards stack with proper spacing */
	.page-id-27 .careers-benefits-3col-section .wp-block-columns,
	.page-id-27 .careers-benefits-section .wp-block-columns {
		flex-direction: column;
		gap: 16px;
	}

	.page-id-27 .careers-benefits-3col-section .wp-block-column,
	.page-id-27 .careers-benefits-section .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	/* #94 - Headlines - prevent cut-off at 375px */
	.page-id-27 h1.wp-block-heading,
	.page-id-27 h2.wp-block-heading {
		font-size: clamp(22px, 6vw, 32px);
		line-height: 1.2;
		white-space: normal;
		word-break: normal;
		overflow-wrap: break-word;
	}

	.page-id-27 h3.wp-block-heading {
		font-size: clamp(18px, 5vw, 24px);
		line-height: 1.25;
	}

	/* #95 - Consistent left/right margin at 375px */
	.page-id-27 .wp-block-group,
	.page-id-27 .wp-block-cover__inner-container,
	.page-id-27 .alignfull>.wp-block-group {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Benefit card text containers */
	.page-id-27 .careers-benefits-3col-section .wp-block-column,
	.page-id-27 .has-theme-07-background-color .wp-block-column {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* #96 - Minimal top spacing at 375px */
	.page-id-27 .careers-hero-section,
	.page-id-27 .has-texture-bg:first-of-type {
		padding-top: 16px;
	}

	/* Hero content area */
	.page-id-27 .careers-hero-section .wp-block-group {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	/* #97 - Minimal bottom spacing at 375px */
	.page-id-27 .careers-benefits-section,
	.page-id-27 .careers-benefits-3col-section,
	.page-id-27 section,
	.page-id-27 .wp-block-group.alignfull {
		padding-bottom: 20px;
	}

	/* Careers Beyond the Pool Deck - fix truncated heading */
	.page-id-27 .has-water-ripple-bg h1.wp-block-heading,
	.page-id-27 .has-water-ripple-bg h2.wp-block-heading {
		white-space: normal;
		word-wrap: break-word;
		font-size: clamp(20px, 5.5vw, 28px);
	}

	/* ============================================
	   CONTACT PAGE (page-id-25) - Extra Small Mobile (max-width: 375px)
	   Tasks #98-101 continued

	   REQUIRED: !important declarations override Gravity Forms plugin
	   styles, WP Button block inline styles, and footer layout defaults.
	   ============================================ */

	/* #98 - Form fields single column at 375px */
	body.page-id-25 .gform_wrapper .gform_fields {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	/* #99 - Further decrease button size at 375px */
	body.page-id-25 .gform_wrapper .gform_button,
	body.page-id-25 .gform_wrapper input[type="submit"],
	body.page-id-25 .gform_wrapper .gform_footer input[type="submit"] {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		padding: 10px 20px !important;
		max-width: 240px !important;
		letter-spacing: 0.5px !important;
	}

	/* #99 - Decrease form input text size at 375px */
	body.page-id-25 .gform_wrapper input,
	body.page-id-25 .gform_wrapper textarea {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
	}

	/* #100 - Footer buttons smaller at 375px */
	body.page-id-25 footer .footer-button-careers .wp-block-button__link,
	body.page-id-25 footer .footer-button-connect .wp-block-button__link {
		font-size: var(--wp--preset--font-size--medium) !important;
		width: 140px !important;
		min-width: 140px !important;
		padding: 8px 14px !important;
	}

	/* #101 - Field labels smaller at 375px */
	body.page-id-25 .gform_wrapper .gfield_label {
		font-size: var(--wp--custom--fontSize--sm) !important;
		padding-top: 4px !important;
		padding-bottom: 8px !important;
	}

	/* Contact page section padding at 375px */
	body.page-id-25 .has-droplet-bg,
	body.page-id-25 .contact-hero-form-section,
	body.page-id-25 .contact-contact-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* GET IN TOUCH heading size reduction */
	body.page-id-25 h1.wp-block-heading,
	body.page-id-25 h2.wp-block-heading {
		font-size: clamp(22px, 6vw, 28px) !important;
		line-height: 1.2;
	}

	/* Form container spacing */
	body.page-id-25 .gform_wrapper {
		max-width: 100% !important;
	}

	/* Footer spacing consistent with other pages */
	body.page-id-25 footer .wp-block-buttons:has(.footer-button-careers) {
		gap: 16px !important;
	}
}

/* ============================================
   OPERATIONS CPT (single-operations) - Mobile (max-width: 781px)
   Tasks #102-110

   REQUIRED: !important declarations override WordPress core block
   styles, custom block inline styles, and grid system defaults.
   Mobile layouts require full-width breakout and column stacking.
   ============================================ */
@media (max-width: 781px) {

	/* Operations Single Template - 781px mobile breakpoint
	   REQUIRED: !important throughout to override WP block inline styles and Kindling Grid System
	   for full-width mobile layouts with stacked content and edge-to-edge images */

	/* #102 - Section full width - image larger on top */
	/* Hero carousel full width */
	.single-operations .wp-block-kindling-carousel.alignfull,
	.single-operations .operations-intro-section .wp-block-kindling-carousel {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
	}

	/* Operations intro section - full width container */
	/* Break out of parent container padding */
	.single-operations .operations-intro-section {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: visible !important;
	}

	.single-operations .operations-intro-section>.wp-block-group,
	.single-operations .operations-intro-section .wp-block-group.alignwide {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}

	/* Operations intro uses grid system - stack on mobile */
	.single-operations .operations-intro-section .is-style-kindling-grid-system {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		padding: 0 !important;
	}

	/* Image grid item - full width edge to edge */
	.single-operations .operations-intro-section .wp-block-kindling-grid-item:first-child {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.single-operations .operations-intro-section .wp-block-kindling-grid-item:first-child .wp-block-image {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.single-operations .operations-intro-section .wp-block-kindling-grid-item:first-child .wp-block-image img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		display: block !important;
	}

	/* Text grid item - with padding */
	.single-operations .operations-intro-section .wp-block-kindling-grid-item:last-child {
		width: 100% !important;
		padding: 24px 16px !important;
	}

	/* Remove offset-pool-bg on mobile for full width */
	.single-operations .operations-intro-section .has-offset-pool-bg::before {
		display: none !important;
	}

	.single-operations .operations-intro-section .has-offset-pool-bg {
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		padding: 0 !important;
	}

	/* #103 - Add space above divider + #109 width constraint
	   REQUIRED: !important to override WP Separator block inline styles for mobile spacing */
	.single-operations .wp-block-separator {
		margin-top: 32px !important;
		margin-bottom: 24px !important;
	}

	.single-operations .operations-intro-section .wp-block-separator {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
		width: 150px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* #104 - Decrease carousel size */
	.single-operations .our-solutions-section .wp-block-kindling-carousel,
	.single-operations .has-theme-02-background-color .wp-block-kindling-carousel {
		max-width: calc(100% - 32px) !important;
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.single-operations .our-solutions-section .splide__slide,
	.single-operations .has-theme-02-background-color .splide__slide {
		max-width: 280px !important;
	}

	/* REQUIRED: !important to override Splide carousel image sizing for mobile responsive images */
	.single-operations .our-solutions-section .splide__slide img,
	.single-operations .has-theme-02-background-color .splide__slide img {
		width: 100% !important;
		height: auto !important;
		border-radius: var(--wp--custom--border--rounded-medium);
	}

	/* #105 - Fix left margin (add space) */
	/* REQUIRED: !important to override WP Column block inline margin/padding for mobile spacing */
	.single-operations .operations-intro-section .wp-block-column:last-child {
		margin-left: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* REQUIRED: !important to override WP Group block inline padding/margin for mobile content spacing */
	/* Merged: padding/margin + position reset (previously at #108) */
	.single-operations .operations-map-section .operations-map-content {
		padding-left: 16px !important;
		padding-right: 16px !important;
		margin-left: 0 !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		max-width: 100% !important;
	}



	/* #107 - Map section - text first, then map centered below */
	/* REQUIRED: !important to override WP Group block inline min-height/padding for mobile auto height
	   Merged: overflow: visible from later rule at ~22471 */
	.single-operations .operations-map-section {
		min-height: auto !important;
		padding: 40px 20px !important;
		overflow: visible !important;
	}

	/* REQUIRED: !important to override WP Columns block inline flex/gap for mobile column stacking */
	.single-operations .operations-map-section .wp-block-columns {
		flex-direction: column !important;
		gap: 24px !important;
	}

	/* Text content first */
	/* REQUIRED: !important to override WP Column block inline width/order for mobile reordering */
	.single-operations .operations-map-section .wp-block-columns>.wp-block-column:first-child {
		order: 1 !important;
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Map image second, centered */
	/* REQUIRED: !important to override desktop absolute positioning for mobile stacked layout */
	.single-operations .operations-map-section .wp-block-columns>.wp-block-column:last-child {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
		order: 2 !important;
		flex-basis: 100% !important;
	}

	/* NOTE: .operations-map-image styles merged into main definition at line ~22329
	   (display flex, justify-content center, width, position reset) */
	/* NOTE: .operations-map-image img 90%/320px rule removed - overridden by full-width rule at ~22348 */

	/* #108 - Text moved into frame */
	/* REQUIRED: !important to override WP Group block inline padding for mobile content spacing */
	.single-operations .operations-intro-section .wp-block-column:last-child .wp-block-group {
		padding: 24px 16px !important;
	}

	/* Ensure text stays within bounds */
	.single-operations .operations-intro-section h2,
	.single-operations .operations-intro-section p {
		max-width: 100% !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* Operations title sizing for mobile */
	.single-operations .operations-intro-section h2.has-theme-02-color {
		font-size: clamp(28px, 7vw, 36px) !important;
		line-height: 1.1 !important;
	}

	/* Safety section - stack columns and fix text positioning (#108) */
	.single-operations .safety-section {
		padding: 40px 0 !important;
	}

	.single-operations .safety-section .wp-block-columns {
		flex-direction: column !important;
		gap: 24px !important;
	}

	.single-operations .safety-section .wp-block-columns>.wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		padding: 0 16px !important;
	}

	/* Remove the 100px padding on safety text column */
	.single-operations .safety-section .wp-block-columns>.wp-block-column:last-child {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.single-operations .safety-section .wp-block-group {
		padding: 0 !important;
	}

	/* Safety carousel - full width */
	.single-operations .safety-section .project-zero-carousel {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.single-operations .safety-section .project-zero-carousel img {
		width: 100% !important;
		height: auto !important;
		border-radius: var(--wp--custom--border--rounded-small) !important;
	}

	/* Safety heading size */
	.single-operations .safety-section h2 {
		font-size: clamp(24px, 6vw, 32px) !important;
		line-height: 1.2 !important;
	}

	/* NOTE: #109 - .operations-intro-section .wp-block-separator merged into definition at line ~18223 */

	.single-operations .operations-map-section .wp-block-separator {
		width: 150px !important;
		margin-left: 16px !important;
		margin-right: auto !important;
	}

	/* #110 - Form fields on separate lines */
	.single-operations .operations-contact-section .gform_wrapper .gform_fields {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.single-operations .operations-contact-section .gform_wrapper .gfield--type-name .ginput_container_name {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
	}

	.single-operations .operations-contact-section .gform_wrapper .gfield--type-name .ginput_container_name>span {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Operations contact section - stack columns + height reset for mobile
	   REQUIRED: !important to override desktop fixed height and WP Columns inline styles */
	.single-operations .operations-contact-section .wp-block-columns {
		flex-direction: column !important;
		height: auto !important;
		max-height: none !important;
	}

	.single-operations .operations-contact-section .wp-block-columns>.wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Hide image column (second column) on mobile for cleaner form display */
	.single-operations .operations-contact-section .wp-block-columns>.wp-block-column:last-child {
		display: none !important;
	}

	/* First column (form) full width */
	.single-operations .operations-contact-section .wp-block-columns>.wp-block-column:first-child {
		flex-basis: 100% !important;
		width: 100% !important;
		padding: 32px 16px !important;
	}

	/* Contact section - reset fixed height for mobile to prevent footer overlap */
	/* REQUIRED: !important to override desktop 932px fixed height */
	.single-operations .operations-contact-section {
		padding: 0 !important;
		height: auto !important;
		max-height: none !important;
		min-height: auto !important;
		overflow: visible !important;
	}

	.single-operations .operations-contact-section .wp-block-column:first-child {
		max-height: none !important;
		overflow: visible !important;
	}

	/* Contact form heading */
	.single-operations .operations-contact-section h2 {
		font-size: clamp(24px, 6vw, 32px) !important;
	}

	/* Submit button full width */
	.single-operations .operations-contact-section .gform_wrapper .gform_button,
	.single-operations .operations-contact-section .gform_wrapper input[type="submit"] {
		width: 100% !important;
		font-size: var(--wp--custom--fontSize--lg) !important;
		padding: 14px 24px !important;
	}
}

/* ============================================
   OPERATIONS CPT - Extra Small Mobile (max-width: 375px)
   Tasks #102-110 refinements
   ============================================ */
@media (max-width: 375px) {

	/* #102 - Full width image refinement */
	.single-operations .operations-intro-section .wp-block-column:first-child .wp-block-image img {
		width: 100vw !important;
		height: auto !important;
		object-fit: cover !important;
	}

	/* #104 - Further decrease carousel size */
	.single-operations .our-solutions-section .splide__slide,
	.single-operations .has-theme-02-background-color .splide__slide {
		max-width: 240px !important;
	}

	/* #105 - Consistent margins */
	.single-operations .wp-block-group:not(.alignfull) {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* #106 - Pattern even smaller on extra small screens */
	.single-operations .has-water-ripple-bg::before {
		background-size: 300% auto !important;
		opacity: 0.2 !important;
	}

	/* NOTE: #107 map img rule removed - overridden by full-width rule at ~22352 */

	/* #108 - Tighter text frame */
	.single-operations .operations-intro-section .wp-block-column:last-child .wp-block-group {
		padding: 16px !important;
	}

	/* Operations title even smaller */
	.single-operations .operations-intro-section h2.has-theme-03-color {
		font-size: clamp(28px, 7vw, 36px) !important;
	}

	/* Operations eyebrow text */
	.single-operations .operations-intro-section p.has-theme-06-color {
		font-size: var(--wp--preset--font-size--large) !important;
	}

	/* #109 - Divider width adjustment */
	.single-operations .wp-block-separator {
		width: 120px !important;
	}

	/* #110 - Form field font size */
	.single-operations .operations-contact-section .gform_wrapper input,
	.single-operations .operations-contact-section .gform_wrapper textarea {
		font-size: var(--wp--preset--font-size--medium) !important;
	}

	/* Submit button */
	.single-operations .operations-contact-section .gform_wrapper .gform_button,
	.single-operations .operations-contact-section .gform_wrapper input[type="submit"] {
		font-size: var(--wp--preset--font-size--medium) !important;
		padding: 12px 20px !important;
	}

	/* Section headings */
	.single-operations h2.wp-block-heading {
		font-size: clamp(20px, 5.5vw, 28px) !important;
		line-height: 1.2 !important;
	}

	/* Communities We Serve heading */
	.single-operations .operations-map-section h2 {
		font-size: clamp(22px, 6vw, 28px) !important;
	}

	/* Our Solutions section */
	.single-operations .our-solutions-section h2,
	.single-operations .has-theme-02-background-color h2 {
		font-size: clamp(24px, 6vw, 30px) !important;
		text-align: center !important;
	}

	/* Leadership section */
	.single-operations .operations-leadership-section,
	.single-operations .leadership-section {
		padding: 24px 16px !important;
	}

	.single-operations .operations-leadership-section h2,
	.single-operations .leadership-section h2 {
		font-size: clamp(22px, 6vw, 28px) !important;
	}

	/* Leadership cards */
	.single-operations .operations-leadership-section .wp-block-column,
	.single-operations .leadership-section .wp-block-column {
		padding: 16px !important;
	}
}

/* ============================================
   WCAG 2.1 TOUCH TARGET ACCESSIBILITY FIXES
   Minimum 44x44px touch targets for all interactive elements
   ============================================ */

/* ----------------------------------------
   Navigation Submenu Toggle - 44px Touch Target
   Visual icon stays 14x14px, but clickable area is 44x44px
   ---------------------------------------- */
.wp-block-navigation__submenu-icon,
.wp-block-navigation-submenu__toggle,
button.wp-block-navigation-submenu__toggle,
.wp-block-navigation-item.has-child>.wp-block-navigation-submenu__toggle,
.wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	box-sizing: border-box;
	cursor: pointer;
}

/* Keep visual icon at 14x14px within the larger touch target */
.wp-block-navigation__submenu-icon svg,
.wp-block-navigation-submenu__toggle svg,
button.wp-block-navigation-submenu__toggle svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ========================================
   MOBILE TOUCH TARGETS (max-width: 781px)
   WCAG requires 44x44px minimum for touch devices
   ======================================== */
@media (max-width: 781px) {

	/* Submenu toggle - adequate touch target */
	.wp-block-navigation__submenu-icon,
	.wp-block-navigation-submenu__toggle,
	button.wp-block-navigation-submenu__toggle {
		min-width: 48px;
		min-height: 48px;
		padding: 17px;
	}

	/* Carousel Pagination Dots - 44px Touch Target */
	/* Splide pagination dots - all carousels */
	.splide__pagination__page,
	.partner-staffing-carousel .splide__pagination__page,
	.home-gallery-section .splide__pagination__page,
	.carousel-text-section .splide__pagination__page,
	.image-gallery-carousel-section .splide__pagination__page {
		min-width: 17px;
		min-height: 18px;
		width: 17px;
		height: 18px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
	}

	/* Keep visual dot appearance at original size via ::after */
	.splide__pagination__page::after,
	.partner-staffing-carousel .splide__pagination__page::after,
	.home-gallery-section .splide__pagination__page::after,
	.carousel-text-section .splide__pagination__page::after,
	.image-gallery-carousel-section .splide__pagination__page::after {
		width: 18px;
		height: 18px;
	}

	/* Gallery carousel dots on lifeguard page */
	.gallery-carousel-dot,
	.lifeguard-gallery-section .carousel-dot,
	.lifeguard-gallery-section .kindling-carousel-dot {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
	}

	/* Maintain visual dot size within larger touch target */
	.gallery-carousel-dot::after,
	.lifeguard-gallery-section .carousel-dot::after,
	.lifeguard-gallery-section .kindling-carousel-dot::after {
		width: 18px;
		height: 18px;
	}

	/* Mobile Button Touch Targets - 44px minimum */
	/* CTA buttons and form buttons */
	.wp-block-button__link,
	.gform_wrapper .gform_button,
	.gform_wrapper input[type="submit"] {
		min-height: 44px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* Footer social/icon links */
	.wp-block-social-links .wp-block-social-link a {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Skip to content link (when visible) */
	.skip-link:focus,
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ==========================================================================
   TABLET TOUCH TARGET FIXES (768px - 1023px)
   WCAG 2.1 requires 44x44px minimum touch targets for tablet devices
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

	/* Carousel pagination dots - WCAG 44px minimum touch target */
	/* High specificity selectors to override component-specific rules */
	.splide__pagination__page,
	.home-service-areas-carousel .splide__pagination__page,
	.project-zero-carousel .splide__pagination__page,
	.hero-carousel .splide__pagination__page {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
		padding: 12px;
	}

	/* Announcement banner close button touch target */
	#announcement-banner-close {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ----------------------------------------
   768px Tablet Text Truncation Fixes
   Fixes for text clipping/truncation issues
   REQUIRED: !important used to override inline styles from WP database/patterns
   ---------------------------------------- */
@media (max-width: 1024px) {

	/* Service Areas page - Partner intro section text touching left edge */
	/* REQUIRED: !important to override inline padding:0 from pattern */
	.page-intro-section,
	.partner-intro-section,
	.service-areas-expertise-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Service Areas - Text column padding override */
	/* REQUIRED: !important to override inline padding-left:100px, padding-right:185px */
	.partner-intro-section .wp-block-columns>.wp-block-column:last-child,
	.page-intro-section .wp-block-columns>.wp-block-column:last-child,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:last-child {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Service Areas page - Aquatic Solutions heading truncation */
	.aquatic-solutions-heading,
	.aquatic-solutions-section h2 {
		white-space: normal !important;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* Lifeguard page - Why You'll Love section benefit headings truncation */
	.has-summer-pattern-bg h2,
	.has-summer-pattern-bg h3,
	.lifeguard-love-grid h2,
	.lifeguard-love-grid h3,
	.lifeguard-love-section h2,
	.lifeguard-love-section h3 {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* Careers page - Job Fit section heading touching left edge */
	.job-fit-content {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.job-fit-content h2 {
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

@media (max-width: 768px) {

	/* Service Areas - Ensure intro sections have proper padding */
	/* REQUIRED: !important to override inline padding:0 from pattern */
	.page-intro-section,
	.partner-intro-section,
	.service-areas-expertise-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Intro sections text column - 30px edge spacing on mobile */
	/* REQUIRED: !important to override inline padding values from pattern */
	.partner-intro-section .wp-block-columns>.wp-block-column:last-child,
	.page-intro-section .wp-block-columns>.wp-block-column:last-child,
	.service-areas-expertise-section .wp-block-columns>.wp-block-column:last-child {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* Service Areas - Aquatic Solutions section padding (actual class: service-areas-facility-grid) */
	/* REQUIRED: !important to override alignfull edge-to-edge */
	.service-areas-facility-grid,
	.aquatic-solutions-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Service Areas - Force headings to wrap properly */
	.page-intro-section h2,
	.page-intro-section h3,
	.page-intro-section p[style*="uppercase"],
	.partner-intro-section h2,
	.partner-intro-section h3,
	.partner-intro-section p[style*="uppercase"],
	.service-areas-expertise-section h2,
	.service-areas-expertise-section h3,
	.service-areas-facility-grid h2,
	.aquatic-solutions-heading,
	.aquatic-solutions-section h2,
	h2.aquatic-solutions-heading {
		white-space: normal !important;
		overflow-wrap: break-word;
		word-wrap: break-word;
		hyphens: none;
	}

	/* Lifeguard - Why You'll Love section benefit cards */
	/* REQUIRED: !important to override inline styles */
	.has-summer-pattern-bg,
	.lifeguard-love-section {
		padding-left: 0px !important;
		padding-right: 0px !important;
		overflow: hidden;
	}

	/* Lifeguard - Stack the kindling grid system at 768px */
	/* The grid uses is-style-kindling-grid-system with is-layout-grid */
	.lifeguard-love-section .is-style-kindling-grid-system,
	.has-summer-pattern-bg .is-style-kindling-grid-system {
		display: flex !important;
		flex-direction: column !important;
		gap: 32px !important;
	}

	/* Lifeguard - Grid items should be full width */
	.lifeguard-love-section .wp-block-kindling-grid-item,
	.has-summer-pattern-bg .wp-block-kindling-grid-item {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Lifeguard - Benefit headings like "COMPETITIVE PAY", "FREE TRAINING & CERTIFICATION" */
	.has-summer-pattern-bg h3,
	.lifeguard-love-section h3,
	.has-summer-pattern-bg .wp-block-kindling-grid-item h3,
	.lifeguard-love-section .wp-block-kindling-grid-item h3 {
		white-space: normal !important;
		overflow-wrap: break-word;
		word-wrap: break-word;
		font-size: clamp(18px, 4vw, 24px) !important;
		line-height: 1.2;
	}

	/* Careers - "The Next Generation" section (actual class: safety-section with has-water-ripple-bg) */
	/* REQUIRED: !important to override existing padding rules */
	.safety-section,
	.job-fit-section {
		overflow: hidden;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Careers - "The Next Generation" heading and text column */
	.safety-section .wp-block-columns>.wp-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Careers - Force heading to wrap properly */
	.safety-section h2,
	.job-fit-content h2 {
		white-space: normal !important;
		overflow-wrap: break-word;
		word-wrap: break-word;
		font-size: clamp(24px, 6vw, 36px) !important;
		line-height: 1.15;
	}

	.job-fit-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.job-fit-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ============================================
   ABOUT US PAGE - Minor Fixes for A-tier
   Added: 2025-12-29
   ============================================ */

/* Timeline scroll gradient indicator - visual cue that content extends beyond viewport */
/* Adds a fade gradient on the right side to hint at horizontal scroll */
.company-timeline-section::before {
	display: none;
}

/* Hide gradient on mobile where timeline is vertical */
@media (max-width: 781px) {
	.company-timeline-section::before {
		display: none;
	}
}

/* Stat label wrapping fix - prevent "Years of Service" from wrapping to 3 lines */
/* Target the metric counter labels in stats sections */
.wp-block-kindling-metric-counter .metric-counter-label {
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: normal;
}

/* At 480px and below, switch stats grid to 2x2 layout with wider columns */
@media (max-width: 480px) {

	/* Make stats grid 2 columns instead of 4 narrow ones */
	.is-style-section-2 .is-style-kindling-grid-system {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 32px 16px !important;
	}

	/* Each stat spans 1 column in the 2-column grid */
	.is-style-section-2 .is-style-grid-item-span-full-to-one-quarter {
		grid-column: span 1 !important;
	}

	/* Keep number and suffix on same line */
	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-value {
		white-space: nowrap !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: baseline !important;
		justify-content: center !important;
	}

	/* Reduce stat value size for better proportions */
	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-number,
	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-suffix {
		font-size: var(--wp--preset--font-size--xxx-large) !important;
		display: inline-block !important;
		flex-shrink: 0 !important;
	}

	/* Reduce label size and improve readability */
	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-label {
		font-size: var(--wp--preset--font-size--small) !important;
		letter-spacing: 0.3px;
		line-height: 1.3 !important;
		text-transform: uppercase;
	}
}

/* At very small screens (375px and below), keep 2-column but tighter */
@media (max-width: 375px) {
	.is-style-section-2 .is-style-kindling-grid-system {
		gap: 20px 12px !important;
	}

	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-label {
		font-size: var(--wp--custom--fontSize--xs) !important;
		letter-spacing: 0.2px;
	}

	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-number,
	.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-suffix {
		font-size: var(--wp--custom--fontSize--4xl) !important;
	}
}

/* ==========================================================================
   HOME STAT BAR (Proven Results) - Mobile Fixes
   Center heading and remove horizontal padding
   ========================================================================== */

@media (max-width: 781px) {
	/* Home Stat Bar - 781px mobile breakpoint
	   REQUIRED: !important throughout to override Kindling Section block inline styles
	   for centered mobile layout with full-width stat bar */

	/* Center the heading in stat bar section */
	.is-style-section-2>.wp-block-heading,
	.is-style-section-2 h2.wp-block-heading,
	.wp-block-kindling-section.is-style-section-2>.wp-block-heading {
		text-align: center !important;
	}

	/* Center the separator under heading */
	.is-style-section-2>.wp-block-separator {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Remove horizontal padding from stat bar section */
	.wp-block-kindling-section.is-style-section-2 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Center the metric counters grid */
	.is-style-section-2 .is-style-kindling-grid-system {
		justify-content: center;
	}

	/* Home page .wp-block-list - add 15px margin-left */
	.home .wp-block-list,
	.page-id-11 .wp-block-list {
		margin-left: 15px !important;
	}
}

/* ==========================================================================
   Mobile Navigation Fixes - Task #mobile-nav-styling
   ========================================================================== */

/* Mobile viewport styles (max-width: 1279px) */
@media (max-width: 1279px) {

	/* ==========================================================================
	   1. CLOSE BUTTON (X) INSIDE MOBILE NAV PANEL
	   Add a dedicated close button that is always accessible
	   ========================================================================== */

	/* Close button inside mobile nav - simple text, no border */
	.mobile-nav-close {
		position: absolute;
		top: 20px;
		right: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--sansation), sans-serif;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
		z-index: 10;
		padding: 0;
	}

	.mobile-nav-close:hover {
		opacity: 0.8;
	}

	.mobile-nav-close:focus {
		outline: 2px solid var(--wp--preset--color--white);
		outline-offset: 2px;
	}

	/* Only show the first close button - hide any duplicates */
	.mobile-nav-close~.mobile-nav-close {
		display: none;
	}

	/* Hide WordPress responsive container close button (we have our own) */
	.mobile-navigation .wp-block-navigation__responsive-container-close {
		display: none;
	}

	/* ==========================================================================
	   2. MOBILE NAV - FULL HEIGHT, NO LOGO
	   Clean mobile navigation without logo
	   ========================================================================== */

	/* Logo visible in ACG-style mobile nav (styled below in ~line 24856) */

	/* NOTE: .mobile-navigation-inner styles (padding, position, overflow) are set in
	   main definition ~line 9887 */

	/* ==========================================================================
	   2b. MOBILE NAV SUBMENU - Operations pops out left
	   Caret next to text, submenu appears as overlay to the left

	   REQUIRED: !important declarations override WordPress Navigation block's
	   default submenu behavior, inline SVG fill colors, and display states.
	   Custom mobile submenu requires click-to-open instead of hover.
	   ========================================================================== */

	/* Allow submenu to extend beyond mobile nav panel boundaries
	   NOTE: .mobile-navigation, .mobile-navigation-inner, and .wp-block-navigation__container
	   overflow:visible are set in main definitions ~lines 9862, 9887, and 9919 */

	/* Parent item with submenu - flex row with wrap so submenu goes below */
	.mobile-navigation .wp-block-navigation-item.has-child {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		position: relative;
		overflow: visible !important;
	}

	/* Operations link - inline with caret */
	.mobile-navigation .wp-block-navigation-item.has-child>.wp-block-navigation-item__content {
		flex: 0 0 auto;
		display: inline-flex !important;
		align-items: center !important;
	}

	/* Submenu toggle button (caret) - close to text */
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle,
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 20px !important;
		height: 20px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer;
		flex-shrink: 0;
	}

	/* Caret SVG - blue color (force override inline fill) */
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle svg,
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon svg {
		width: 14px !important;
		height: 14px !important;
		fill: var(--wp--preset--color--theme-02) !important;
		stroke: var(--wp--preset--color--theme-02) !important;
		transition: transform 0.2s ease;
	}

	/* Rotate caret when submenu is open (only our custom class) */
	.mobile-navigation .wp-block-navigation-item.has-child.open-on-click .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	/* Submenu container - hidden by default, prevent WordPress from showing it */
	.mobile-navigation .wp-block-navigation__submenu-container {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Show submenu when parent is open - inline dropdown within the panel */
	.mobile-navigation .wp-block-navigation-item.has-child.open-on-click>.wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		min-width: auto !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		background: transparent !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 10px 0 0 20px !important;
		z-index: auto !important;
		pointer-events: auto !important;
		gap: 8px !important;
	}

	/* Submenu items - indented, smaller text */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
		font-family: var(--wp--preset--font-family--sansation), 'Sansation', sans-serif !important;
		font-size: var(--wp--preset--font-size--medium) !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 1px !important;
		padding: 6px 0 !important;
		color: var(--wp--preset--color--theme-02) !important;
		display: block !important;
		background: none !important;
		background-color: transparent !important;
	}

	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
		color: var(--wp--preset--color--theme-03) !important;
		background: none !important;
		background-color: transparent !important;
	}

	/* ==========================================================================
	   3. MOBILE NAV TEXT STYLING - SANSATION FONT
	   Match desktop navigation typography - left aligned, no separators
	   ========================================================================== */

	/* NOTE: .mobile-navigation .wp-block-navigation-item styles (width, border, margin, padding,
	   min-height, height) are set in main definition ~line 9933 */

	/* NOTE: .mobile-navigation .wp-block-navigation__container styles (flex, gap, margin,
	   padding, align-items, overflow) are set in main definition ~line 9919 */

	/* NOTE: .mobile-navigation z-index:100002 is set in main definition ~line 9862,
	   which ensures it appears above all content including banners and sticky headers */

	/* CRITICAL: .wp-site-blocks has isolation:isolate which creates a stacking context
	   This z-index ensures the entire site content is above the announcement banner */
	.wp-site-blocks {
		z-index: 100 !important;
		position: relative !important;
	}

	/* Banner should be below .wp-site-blocks */
	.announcement-banner {
		z-index: 50 !important;
	}

	/* Hide banner and header bar when mobile nav is open - full screen ACG menu */
	body.mobile-nav-open .announcement-banner,
	body.mobile-nav-open #announcement-banner,
	body.mobile-nav-open .mobile-header-bar {
		display: none !important;
	}

	/* Navigation links - Sansation font, left aligned, tight spacing */
	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--sansation), 'Sansation', sans-serif !important;
		font-size: var(--wp--custom--fontSize--lg) !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 1.4px !important;
		color: var(--wp--preset--color--theme-02) !important;
		text-decoration: none !important;
		text-align: left !important;
		padding: 10px 0 !important;
		margin: 0 !important;
		line-height: 1 !important;
		display: block !important;
		min-height: 0 !important;
		height: auto !important;
		/* Prevent desktop hover styles from applying background */
		background: none !important;
		background-color: transparent !important;
	}

	/* Label inside links - no padding (link already has padding) */
	.mobile-navigation .wp-block-navigation-item__label {
		padding: 0 !important;
		margin: 0 !important;
		display: inline !important;
	}

	/* NOTE: .mobile-navigation .wp-block-navigation-item tight spacing styles
	   are set in main definition ~line 9933 */

	/* Nav container - use 15px gap for even spacing */
	.mobile-navigation .wp-block-navigation__container,
	.mobile-navigation .wp-block-navigation__container.wp-block-navigation {
		gap: 15px !important;
		row-gap: 15px !important;
	}

	/* NOTE: .mobile-navigation .wp-block-buttons styles (gap, margin-top)
	   are set in main definition ~line 9967 */

	/* Hover state for navigation links - color change only, NO background */
	.mobile-navigation .wp-block-navigation-item a:hover,
	.mobile-navigation .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--theme-03) !important;
		background: none !important;
		background-color: transparent !important;
	}

	/* Remove separators from submenu items too */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: none !important;
	}

	/* NOTE: .mobile-navigation .wp-block-button__link styles (font-family, size, weight,
	   text-transform, letter-spacing) are set in main definition ~line 9979 */

	/* ==========================================================================
	   4. MOBILE TEXT CONTAINER MARGINS (15px)
	   Add consistent side margins for all text containers on mobile
	   ========================================================================== */

	/* Direct text content - ensure minimum side padding */
	.entry-content .wp-block-paragraph,
	.entry-content .wp-block-list,
	.entry-content .wp-block-buttons {
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}

	/* Group blocks that are full-width - add inner padding
	   NOTE: Moved to dedicated media query @media (min-width: 481px) and (max-width: 1279px)
	   at end of file to exclude mobile viewport */
	/* .entry-content .wp-block-group.alignfull,
	.entry-content .wp-block-group.alignwide {
		padding-left: 30px;
		padding-right: 30px;
	} */

	/* But nested content within those groups should not double-pad
	   NOTE: Also moved to end of file */
	/* .entry-content .wp-block-group.alignfull .wp-block-paragraph,
	.entry-content .wp-block-group.alignfull .wp-block-heading,
	.entry-content .wp-block-group.alignfull .wp-block-list,
	.entry-content .wp-block-group.alignfull .wp-block-buttons,
	.entry-content .wp-block-group.alignwide .wp-block-paragraph,
	.entry-content .wp-block-group.alignwide .wp-block-heading,
	.entry-content .wp-block-group.alignwide .wp-block-list,
	.entry-content .wp-block-group.alignwide .wp-block-buttons {
		padding-left: 0;
		padding-right: 0;
	} */

	/* List margin-top in alignfull groups */
	.entry-content .wp-block-group.alignfull .wp-block-list {
		margin-top: 10px;
		font-size: var(--wp--preset--font-size--medium) !important;
		padding-left: 0 !important;
	}

	/* Cover block inner content - ensure padding */
	.wp-block-cover .wp-block-cover__inner-container {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Columns - each column gets padding */
	.wp-block-columns {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* But column children don't need extra padding */
	.wp-block-column {
		padding-left: 0;
		padding-right: 0;
	}

	/* Section wrapper - common pattern in this theme */
	.is-style-kindling-section,
	.kindling-section {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Ensure text blocks don't overflow */
	.wp-block-paragraph,
	.wp-block-heading,
	.wp-block-list {
		max-width: 100%;
		overflow-wrap: break-word;
	}
}

/* Carousel dots responsive - 1024px */
@media (max-width: 1024px) {
	.home-hero-carousel-dots .carousel-dot {
		min-width: 24px;
		min-height: 44px;
		width: 24px;
		height: 44px;
	}
}

/* NOTE: Carousel dots responsive 1279px styles (.home-hero-carousel-dots, .carousel-dots)
   are set in the main 1279px media query ~line 10149 */

/* Extra small devices - tighter mobile nav
   REQUIRED: !important throughout to override WP Navigation block styles for compact 375px layouts */
@media (max-width: 375px) {

	/* Smaller logo for very small screens */
	.mobile-navigation-inner::before {
		width: 50px;
		height: 50px;
		top: 50px;
	}

	.mobile-navigation-inner {
		padding-top: 130px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Smaller navigation text */
	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--medium) !important;
		letter-spacing: 1px !important;
	}
}

/* ============================================
   CAREERS PAGE MOBILE SPACING AUDIT - 375px
   Added: 2025-12-30
   Fixes excessive vertical padding and inconsistent spacing
   REQUIRED: !important throughout to override WP block inline padding/margins
   for compact mobile layouts optimized for small viewports
   ============================================ */

@media (max-width: 480px) {

	/* Careers Hero/Intro Section - reduce excessive 180px vertical padding */
	.page-id-27 .intro-text-only-section.has-texture-bg,
	body.page-id-27 .wp-block-group.alignfull.has-texture-bg.intro-text-only-section {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Lifeguard CTA Cover - reduce excessive 238px vertical padding */
	.page-id-27 .careers-lifeguard-cta-section,
	body.page-id-27 .wp-block-cover.careers-lifeguard-cta-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
		min-height: auto !important;
	}

	/* #56 - Fix lifeguard image crop - shift focal point left to show lifeguards on slide */
	.page-id-27 .careers-lifeguard-cta-section img.wp-block-cover__image-background {
		object-position: left center !important;
	}

	/* Center separators on mobile - Lifeguard CTA and Careers Beyond sections */
	.page-id-27 .careers-lifeguard-cta-section .wp-block-separator,
	.page-id-27 .service-areas-facility-grid .wp-block-separator {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Leadership/Next Generation Section - reduce 100px vertical padding */
	.page-id-27 .safety-section.has-water-ripple-bg,
	body.page-id-27 .wp-block-group.safety-section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Consistent horizontal padding across all sections */
	.page-id-27 .wp-block-group.alignfull,
	.page-id-27 .wp-block-cover.alignfull {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Inner content containers - remove nested padding buildup */
	.page-id-27 .wp-block-group.alignfull>.wp-block-group,
	.page-id-27 .wp-block-cover__inner-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}



	.page-id-27 .service-areas-facility-grid .wp-block-columns {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.page-id-27 .service-areas-facility-grid .wp-block-column {
		padding: 0 !important;
	}

	/* Card container - full width */
	.page-id-27 .service-areas-facility-grid .wp-block-group.has-theme-07-background-color {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 0 !important;
	}

	/* Card images - full width edge to edge */
	.page-id-27 .service-areas-facility-grid .wp-block-image {
		width: 100% !important;
		margin: 0 !important;
	}

	.page-id-27 .service-areas-facility-grid .wp-block-image img {
		width: 100% !important;
		border-radius: 0 !important;
	}

	/* Card text area - add padding for readability */
	.page-id-27 .service-areas-facility-grid .wp-block-group.has-theme-07-background-color>.wp-block-group {
		padding: 20px 16px !important;
	}

	/* Card headings - centered on mobile */
	.page-id-27 .service-areas-facility-grid h3.wp-block-heading {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	/* Benefits section cards - reduce inner padding */
	.page-id-27 .careers-benefits-3col-section .wp-block-column {
		padding: 16px !important;
	}

	/* Separator width for mobile */
	.page-id-27 .wp-block-separator {
		width: 200px !important;
		margin-left: 0 !important;
	}

	/* Gap between sections */
	.page-id-27 .wp-block-group.alignfull+.wp-block-group.alignfull,
	.page-id-27 .wp-block-cover.alignfull+.wp-block-group.alignfull,
	.page-id-27 .wp-block-group.alignfull+.wp-block-cover.alignfull {
		margin-top: 0 !important;
	}
}

@media (max-width: 375px) {

	/* Even tighter spacing at 375px */
	.page-id-27 .intro-text-only-section.has-texture-bg,
	body.page-id-27 .wp-block-group.alignfull.has-texture-bg.intro-text-only-section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Lifeguard CTA - tighter at 375px */
	.page-id-27 .careers-lifeguard-cta-section,
	body.page-id-27 .wp-block-cover.careers-lifeguard-cta-section {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	/* Leadership section - tighter */
	.page-id-27 .safety-section.has-water-ripple-bg,
	body.page-id-27 .wp-block-group.safety-section {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	/* Consistent 16px edge spacing at 375px */
	.page-id-27 .wp-block-group.alignfull,
	.page-id-27 .wp-block-cover.alignfull {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Careers Beyond Pool Deck section */
	.page-id-27 .service-areas-facility-grid {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	/* Cards - tighter at 375px */
	.page-id-27 .service-areas-facility-grid .wp-block-column {
		padding: 16px !important;
	}

	/* Benefits section - compact */
	.page-id-27 .careers-benefits-3col-section {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.page-id-27 .careers-benefits-3col-section .wp-block-column {
		padding: 12px !important;
	}

	/* Ensure separator is left-aligned */
	.page-id-27 .wp-block-separator {
		width: 60px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* REQUIRED: Override WP database inline has-theme-02-color class - copy should be dark gray to match site aesthetic */
	.page-id-27 .service-areas-facility-grid p.has-theme-02-color {
		color: var(--wp--preset--color--theme-06) !important;
	}
}

/* ============================================
   ABOUT PAGE MOBILE SPACING AUDIT - 375px
   Added: 2025-12-30
   Fixes identified spacing issues on About page
   REQUIRED: !important throughout to override WP block inline padding/margins
   for consistent mobile spacing across About page sections
   ============================================ */

/* About page mobile spacing fixes */
@media (max-width: 781px) {

	/* Project Zero section - 80px vertical padding on mobile */
	.page-id-13 .project-zero-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	/* Safety quote section - ensure adequate horizontal padding */
	.page-id-13 .has-texture-bg.large-bg-overlay-section {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Carousel + Text (Project Zero) - 80px vertical padding on mobile */
	.page-id-13 .carousel-text-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
		padding-left: 24px;
		padding-right: 24px;
	}

	/* About intro section - ensure consistent spacing */
	.page-id-13 .about-intro-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* #41 - Fix tight copy spacing for all caps section */
	/* REQUIRED: !important to override global mobile h2 rules at lines 12283 (line-height:1) and 12338 (letter-spacing:-0.02em) */
	.page-id-13 .large-bg-overlay-section h2.wp-block-heading {
		line-height: 1.35 !important;
		letter-spacing: 0.5px !important;
	}

	/* Paragraph below the all-caps heading - increase line-height for readability */
	.page-id-13 .large-bg-overlay-section p {
		line-height: 1.5;
	}
}

@media (max-width: 480px) {

	/* Tighter horizontal padding at smaller screens */
	.page-id-13 .has-texture-bg.large-bg-overlay-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Carousel + Text (Project Zero) - 80px vertical padding on mobile */
	.page-id-13 .carousel-text-section {
		padding-top: 0px !important;
		padding-bottom: 40px !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* Project Zero section - 80px vertical padding on mobile */
	.page-id-13 .project-zero-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	/* Safety stats section - ensure compact grid */
	.page-id-13 .safety-stats-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Company timeline section - proper spacing */
	.page-id-13 .company-timeline-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

@media (max-width: 375px) {

	/* Even tighter horizontal padding at 375px */
	.page-id-13 .has-texture-bg.large-bg-overlay-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Carousel + Text (Project Zero) - 80px vertical padding on mobile */
	.page-id-13 .carousel-text-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* About intro - compact at smallest breakpoint */
	.page-id-13 .about-intro-section {
		padding-top: 32px;
		padding-bottom: 32px;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Project Zero - 80px vertical padding on mobile */
	.page-id-13 .project-zero-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Safety stats - compact */
	.page-id-13 .safety-stats-section {
		padding-top: 32px;
		padding-bottom: 32px;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Company timeline - compact */
	.page-id-13 .company-timeline-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* CTA section at bottom - consistent */
	.page-id-13 .cta-section,
	.page-id-13 .wp-block-group:has(.wp-block-buttons) {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

/* ============================================
   MOBILE SPACING AUDIT FIXES - Lifeguard & Careers Pages
   Viewport: 375px mobile
   Added: 2025-12-30
   ============================================ */

/* === BECOME A LIFEGUARD PAGE (page-id-23) - Mobile Fixes === */
@media (max-width: 781px) {

	/* Fix: Hero section text positioning - ensure text is fully visible */
	.page-id-23 .lifeguard-hero-section .wp-block-cover__inner-container,
	.page-id-23 .hero-cover-section .wp-block-cover__inner-container,
	body.page-id-23 .wp-block-cover.alignfull .wp-block-cover__inner-container {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* Fix: Reduce excessive spacing in hero content */
	.page-id-23 .lifeguard-intro-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Fix: Tighten "WHY YOU WILL LOVE LIFEGUARDING" section */
	.page-id-23 .lifeguard-love-section {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}

	/* Fix: Reduce gap between benefit items */
	.page-id-23 .lifeguard-love-section .wp-block-columns {
		gap: 20px;
	}

	.page-id-23 .lifeguard-love-section .wp-block-column {
		margin-bottom: 16px;
	}

	/* Fix: "IS THIS JOB RIGHT FOR YOU?" section spacing */
	.page-id-23 .job-fit-section {
		padding-top: 32px;
		padding-bottom: 24px;
	}

	/* Fix: Gallery section - reduce top/bottom padding */
	.page-id-23 .lifeguard-gallery-section,
	.page-id-23 .lifeguard-gallery-strip {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* Fix: CTA section before footer - tighter spacing */
	.page-id-23 .wp-block-cover.alignfull:last-of-type {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Consistent edge spacing */
	.page-id-23 .wp-block-group.alignfull,
	.page-id-23 .wp-block-cover.alignfull {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* === CAREERS PAGE (page-id-27) - Mobile Fixes === */

	/* Fix: Reduce large empty space in hero section */
	.page-id-27 .careers-hero-section,
	.page-id-27 .hero-cover-section,
	body.page-id-27 .wp-block-cover.alignfull:first-of-type {
		min-height: auto;
		padding-top: 24px;
	}

	/* Fix: Hero inner content - reduce top spacing */
	.page-id-27 .careers-hero-section .wp-block-cover__inner-container,
	body.page-id-27 .wp-block-cover.alignfull .wp-block-cover__inner-container {
		padding-top: 16px;
	}

	/* Fix: Intro section - "BECOME AN AQUATICS SPECIALIST" - reduce spacing */
	.page-id-27 .intro-text-only-section,
	body.page-id-27 .has-texture-bg.intro-text-only-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Fix #58: Make intro heading dominant - larger than other H2s (28px) on mobile */
	.page-id-27 .intro-text-only-section h2.wp-block-heading {
		font-size: 34px !important;
		line-height: 1.1;
	}

	/* Fix #57: Improve line spacing/copy readability on mobile */
	/* REQUIRED: !important to override inline line-height:1.5 from WP database */
	.page-id-27 .intro-text-only-section p,
	.page-id-27 .safety-section p {
		line-height: 1.65 !important;
	}

	/* Fix: Job category cards - consistent spacing between cards */
	/* #55 - Match Service Areas tile spacing for consistency */
	/* REQUIRED: !important to override WP inline gap styles */
	.page-id-27 .service-areas-facility-grid .wp-block-columns,
	.page-id-27 .has-water-ripple-bg .wp-block-columns {
		gap: 30px !important;
		margin-bottom: 30px !important;
	}

	/* Fix: Benefits section - reduce excessive top margin */
	.page-id-27 .careers-benefits-3col-section,
	body.page-id-27 .has-texture-bg.careers-benefits-3col-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Fix: Benefits items - tighter vertical spacing */
	/* REQUIRED: !important to override WP container gap styles - tightens spacing per feedback #60 */
	.page-id-27 .careers-benefits-3col-section .wp-block-columns,
	.page-id-27 .careers-benefits-3col-section .wp-block-columns.alignwide,
	.page-id-27 .careers-benefits-3col-section .wp-block-columns.has-3-columns,
	body.page-id-27 .careers-benefits-3col-section .wp-block-columns.is-layout-flex {
		gap: 24px !important;
		padding: 0 !important;
	}

	.page-id-27 .careers-benefits-3col-section .wp-block-column {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* Fix: Separator consistency and centering */
	.page-id-27 .careers-benefits-3col-section .wp-block-separator {
		margin-top: 12px;
		margin-bottom: 30px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* === Extra Small Mobile (375px) - Additional Tightening === */
@media (max-width: 375px) {

	/* LIFEGUARD PAGE - Tighter spacing at 375px */
	.page-id-23 .lifeguard-intro-section,
	.page-id-23 .lifeguard-love-section,
	.page-id-23 .job-fit-section {
		padding-top: 24px;
		padding-bottom: 24px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.page-id-23 .lifeguard-love-section .wp-block-columns {
		gap: 16px;
	}

	.page-id-23 .lifeguard-gallery-section,
	.page-id-23 .lifeguard-gallery-strip {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* CAREERS PAGE - Tighter spacing at 375px */
	.page-id-27 .intro-text-only-section,
	body.page-id-27 .has-texture-bg.intro-text-only-section {
		padding-top: 24px;
		padding-bottom: 24px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.page-id-27 .careers-benefits-3col-section .wp-block-columns {
		gap: 24px;
	}

	/* Reduce heading sizes slightly for very small screens */
	.page-id-23 h2.wp-block-heading,
	.page-id-27 h2.wp-block-heading {
		font-size: clamp(22px, 6vw, 28px);
		line-height: 1.2;
	}

	/* Ensure edge spacing consistency */
	.page-id-23 .wp-block-group.alignfull,
	.page-id-23 .wp-block-cover.alignfull,
	.page-id-27 .wp-block-group.alignfull,
	.page-id-27 .wp-block-cover.alignfull {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ============================================
   PARTNER PAGE MOBILE SPACING AUDIT - 375px
   Added: 2025-12-30
   Fixes spacing issues identified in mobile audit

   REQUIRED: !important declarations override WordPress database inline
   styles from block editor. Desktop-specific padding and font sizes
   must be overridden for proper mobile display.
   ============================================ */

@media (max-width: 480px) {

	/* Partner Intro Section - override desktop inline padding */
	/* REQUIRED: !important to override inline style padding-right:185px and padding-left:100px */
	.partner-intro-section .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section .wp-block-columns>.wp-block-column[style*="padding"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Partner Intro - reduce vertical section padding */
	.partner-intro-section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	/* Partner Intro - heading typography for mobile */
	.partner-intro-section .wp-block-heading {
		font-size: clamp(28px, 7vw, 40px) !important;
		line-height: 1.15 !important;
		letter-spacing: 1px !important;
	}

	/* Partner Intro - subheading typography */
	.partner-intro-section p[style*="font-size: var(--wp--preset--font-size--xx-large)"] {
		font-size: var(--wp--preset--font-size--large) !important;
	}

	/* Partner Intro - body text typography */
	.partner-intro-section p[style*="font-size: var(--wp--custom--fontSize--xl)"] {
		font-size: var(--wp--preset--font-size--medium) !important;
		line-height: 1.5 !important;
	}

	/* Partner Value Section - reduce section padding */
	.wp-block-kindling-section:has(.is-style-kindling-grid-system) {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	/* Partner page - remove gaps around partner value section */
	.page-id-21 .wp-block-kindling-section:has(.is-style-kindling-grid-system) {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Partner Value Section - tighten grid gap */
	.partner-value-section .is-style-kindling-grid-system,
	.wp-block-kindling-section .is-style-kindling-grid-system {
		gap: 32px !important;
	}

	/* Partner Value - heading typography */
	.partner-value-section .wp-block-heading.is-style-type-style-headline-medium,
	.wp-block-kindling-section h3.is-style-type-style-headline-medium {
		font-size: clamp(20px, 5vw, 28px) !important;
		line-height: 1.2 !important;
	}

	/* Partner Value - section title */
	.wp-block-kindling-section h2.is-style-type-style-headline-large {
		font-size: clamp(24px, 6vw, 32px) !important;
		line-height: 1.15 !important;
	}

	/* Partner page - "THE VALUE OF PARTNERSHIP" h2 - dominant headline */
	/* #48 - Must be larger than h3 card headings (20-28px) */
	.page-id-21 h2.is-style-type-style-headline-large {
		font-size: clamp(28px, 7vw, 36px) !important;
	}

	/* Partner Focus Section - reduce excessive cover padding */
	/* REQUIRED: !important to override inline padding-top:225px and padding-bottom:225px */
	.partner-focus-section,
	.wp-block-cover.partner-focus-section {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
		min-height: auto !important;
	}

	/* Partner Focus Section - heading typography for mobile */
	/* REQUIRED: !important to override inline font-size: var(--wp--custom--fontSize--5xl) and line-height:60px */
	.partner-focus-section h2.wp-block-heading,
	.partner-focus-section .partner-focus-content h2 {
		font-size: clamp(22px, 6vw, 32px) !important;
		line-height: 1.25 !important;
		letter-spacing: 0.5px !important;
	}

	/* Partner Focus Section - paragraph typography */
	.partner-focus-section p,
	.partner-focus-content p {
		font-size: var(--wp--preset--font-size--medium) !important;
		line-height: 1.5 !important;
	}

	/* Partner Trusted Staffing Section - carousel spacing */
	.partner-trusted-staffing-section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	/* Partner Trusted Staffing - heading */
	.partner-trusted-staffing-section .wp-block-heading {
		font-size: clamp(24px, 6vw, 32px) !important;
		line-height: 1.2 !important;
	}

	/* Partner Contact Section - reduce padding */
	.partner-contact-section {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Partner Contact - column stacking and padding */
	.partner-contact-section .wp-block-columns {
		flex-direction: column !important;
	}

	.partner-contact-section .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Partner Contact - form column padding */
	/* REQUIRED: !important to override inline padding values */
	.partner-contact-section .wp-block-column:first-child {
		padding: 40px 20px !important;
		max-height: none !important;
	}

	/* Partner Contact - heading typography */
	/* REQUIRED: !important to override inline font-size: var(--wp--custom--fontSize--5xl) and line-height:60px */
	.partner-contact-section h2.wp-block-heading {
		font-size: clamp(28px, 7vw, 40px) !important;
		line-height: 1.2 !important;
	}

	/* Partner Contact - description text */
	/* REQUIRED: !important to override inline font-size: var(--wp--preset--font-size--large) for mobile responsive text */
	.partner-contact-section p[style*="font-size: var(--wp--preset--font-size--large)"] {
		font-size: var(--wp--preset--font-size--medium) !important;
		line-height: 1.5 !important;
	}

	/* Partner Contact - image column */
	.partner-contact-section .partner-contact-image-column {
		width: 100% !important;
		flex-basis: 100% !important;
		height: 250px !important;
		min-height: 250px !important;
	}

	/* Partner Contact - image sizing */
	.partner-contact-section .partner-contact-image-column img {
		height: 250px !important;
		object-fit: cover !important;
	}

	/* Separator consistency across all partner sections */
	.partner-intro-section .wp-block-separator,
	.partner-contact-section .wp-block-separator {
		width: 120px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

/* Partner Page - Extra small mobile (375px) tighter spacing adjustments */
/* REQUIRED: !important declarations continue to override WP database inline styles at smaller viewport */
@media (max-width: 375px) {

	/* Partner Intro - tighter spacing at 375px */
	.partner-intro-section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.partner-intro-section .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section .wp-block-columns>.wp-block-column[style*="padding"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Partner Intro - smaller heading at 375px */
	.partner-intro-section .wp-block-heading {
		font-size: clamp(24px, 7vw, 32px) !important;
	}

	/* Partner Value - tighter at 375px */
	.wp-block-kindling-section:has(.is-style-kindling-grid-system) {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.partner-value-section .is-style-kindling-grid-system,
	.wp-block-kindling-section .is-style-kindling-grid-system {
		gap: 24px !important;
	}

	/* Partner Focus - tighter at 375px */
	.partner-focus-section,
	.wp-block-cover.partner-focus-section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	.partner-focus-section h2.wp-block-heading {
		font-size: clamp(18px, 5.5vw, 26px) !important;
	}

	/* Partner Trusted Staffing - tighter at 375px */
	.partner-trusted-staffing-section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Partner Contact - tighter at 375px */
	.partner-contact-section .wp-block-column:first-child {
		padding: 32px 16px !important;
	}

	.partner-contact-section h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px) !important;
	}

	/* Separator - narrower at 375px */
	.partner-intro-section .wp-block-separator,
	.partner-contact-section .wp-block-separator {
		width: 80px !important;
	}
}

/* ==========================================================================
   OUR SOLUTIONS PAGE (page-id-15) - Mobile Spacing Audit Fixes
   Date: 2025-12-30
   Viewport: 375px
   Issues Fixed:
   - Text truncation/cutoff on right edge
   - Intro section inline padding override
   - Accordion description text overflow
   - Consistent spacing between sections

   REQUIRED: !important declarations override WP Column/Grid/Image block
   inline styles and Kindling grid system defaults for mobile layouts.
   ========================================================================== */

/* Mobile viewport - Solutions page specific fixes */
@media (max-width: 781px) {

	/* 1. PAGE INTRO SECTION - 30px edge spacing */
	/* REQUIRED: !important to override inline styles from WordPress database */
	.page-id-15 .page-intro-section .wp-block-columns>.wp-block-column:last-child,
	.page-id-15 .page-intro-section .wp-block-column[style*="padding-left"],
	.page-id-15 .page-intro-section .wp-block-column[style*="padding-right"] {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* 2. PAGE INTRO SECTION - Stack columns and ensure proper width */
	.page-id-15 .page-intro-section .wp-block-columns.alignwide {
		flex-direction: column;
		gap: 24px;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.page-id-15 .page-intro-section .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
		max-width: 100%;
	}

	/* 3. PAGE INTRO SECTION - Outer container padding */
	.page-id-15 .page-intro-section,
	.page-id-15 .has-texture-bg.page-intro-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* 4. INTRO TEXT - Ensure text doesn't overflow */
	.page-id-15 .page-intro-section p,
	.page-id-15 .page-intro-section h2,
	.page-id-15 .page-intro-section .wp-block-group {
		max-width: 100%;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* 5. INTRO HEADING - Proper sizing */
	.page-id-15 .page-intro-section h2.wp-block-heading {
		font-size: clamp(26px, 7vw, 36px);
		line-height: 1.15;
		letter-spacing: 1px;
	}

	/* 6. INTRO LABEL (OUR SOLUTIONS) - Scale down */
	.page-id-15 .page-intro-section p[style*="uppercase"],
	.page-id-15 .page-intro-section .has-theme-06-color {

		letter-spacing: 1px;
	}

	/* 7. INTRO BODY TEXT - Readable size */
	.page-id-15 .page-intro-section p:not([style*="uppercase"]):not(.has-theme-06-color) {
		font-size: var(--wp--custom--fontSize--base-lg);
		line-height: 1.5;
	}

	/* 8. INTRO SEPARATOR - Narrower and centered on mobile */
	.page-id-15 .page-intro-section .wp-block-separator,
	.page-id-15 .page-intro-section .wp-block-separator.separator-224,
	.page-id-15 .page-intro-section hr.wp-block-separator.is-style-wide.separator-224 {
		width: 120px !important;
		max-width: 120px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
	}

	/* 9. IMAGE-ACCORDION SECTIONS - Prevent text overflow */
	.page-id-15 .solutions-section.image-accordion-section,
	.page-id-15 .image-accordion-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
		overflow: hidden;
	}

	/* 10. ACCORDION SECTION HEADINGS - Scale down */
	.page-id-15 .solutions-section h2.wp-block-heading {
		font-size: clamp(28px, 7.5vw, 40px);
		letter-spacing: 1px;
		line-height: 1.1;
	}

	/* 11. ACCORDION DESCRIPTION TEXT - Ensure full visibility */
	.page-id-15 .solutions-section>.wp-block-group>.wp-block-group>.wp-block-kindling-grid-item>p,
	.page-id-15 .solutions-section .wp-block-kindling-grid-item>p,
	.page-id-15 .image-accordion-section p:not(.accordion-content) {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.5;
		max-width: 100%;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* 12. ACCORDION ITEMS - Proper sizing */
	.page-id-15 .solutions-accordion .accordion-item {
		font-size: var(--wp--custom--fontSize--base-lg);
		padding: 14px 32px 14px 0;
		letter-spacing: 1px;
	}

	/* 13. ACCORDION CONTENT TEXT */
	.page-id-15 .solutions-accordion .accordion-content,
	.page-id-15 .solutions-accordion .accordion-content p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.5;
	}

	/* 14. GRID ITEMS - Overflow control (width/max-width overridden at line ~20716) */
	.page-id-15 .solutions-section .wp-block-kindling-grid-item,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item {
		padding-left: 0;
		padding-right: 0;
		overflow: hidden;
	}

	/* 15. GRID SYSTEM - Stack items vertically */
	.page-id-15 .solutions-section .is-style-kindling-grid-system,
	.page-id-15 .image-accordion-section .is-style-kindling-grid-system {
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}

	/* 16. IMAGE ITEMS - Remove offset positioning on mobile */
	.page-id-15 .solutions-section .has-offset-pool-bg,
	.page-id-15 .solutions-section .has-offset-pool-bg-right {
		margin-left: 0 !important;
		margin-right: 0 !important;
		right: 0 !important;
		left: 0 !important;
	}

	/* 17. IMAGES - Proper sizing within container */
	.page-id-15 .solutions-section .wp-block-image,
	.page-id-15 .image-accordion-section .wp-block-image {
		width: 100%;
		max-width: 100%;
	}

	.page-id-15 .solutions-section .wp-block-image img,
	.page-id-15 .image-accordion-section .wp-block-image img {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	/* 18. TRUSTED PARTNERS SECTION */
	.page-id-15 .trusted-partners-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
		min-height: auto !important;
		/* REQUIRED: Override inline style from WP database */
	}

	.page-id-15 .trusted-partners-section h2.wp-block-heading {
		font-size: clamp(26px, 7vw, 36px);
		letter-spacing: 1px;
	}

	.page-id-15 .trusted-partners-section p {
		font-size: var(--wp--custom--fontSize--base-lg);
		line-height: 1.5;
		padding-left: 0;
		padding-right: 0;
	}

	/* 19. SECTION SPACING - Consistent gaps */
	.page-id-15 .solutions-section+.solutions-section,
	.page-id-15 .page-intro-section+.solutions-section {
		margin-top: 0;
	}

	/* 20. FOOTER CTA SECTION */
	.page-id-15 .wp-block-cover:has(.wp-block-buttons) {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* 480px viewport - Tighter spacing */
@media (max-width: 480px) {

	/* Tighter container padding */
	.page-id-15 .page-intro-section,
	.page-id-15 .has-texture-bg.page-intro-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 28px;
		padding-bottom: 28px;
	}

	/* Text column - 30px edge spacing */
	.page-id-15 .page-intro-section .wp-block-columns>.wp-block-column:last-child,
	.page-id-15 .page-intro-section .wp-block-column[style*="padding-left"] {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* Accordion sections */
	.page-id-15 .solutions-section.image-accordion-section,
	.page-id-15 .image-accordion-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 28px;
		padding-bottom: 28px;
	}

	/* Trusted partners */
	.page-id-15 .trusted-partners-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* Grid gap tighter */
	.page-id-15 .solutions-section .is-style-kindling-grid-system,
	.page-id-15 .image-accordion-section .is-style-kindling-grid-system {
		gap: 20px !important;
	}

	/* Accordion items tighter */
	.page-id-15 .solutions-accordion .accordion-item {
		font-size: var(--wp--custom--fontSize--base-sm);
		padding: 12px 28px 12px 0;
	}
}

/* 375px viewport - Most compact */
@media (max-width: 375px) {

	/* Even tighter padding */
	.page-id-15 .page-intro-section,
	.page-id-15 .has-texture-bg.page-intro-section {
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* Text column - 30px edge spacing */
	.page-id-15 .page-intro-section .wp-block-columns>.wp-block-column:last-child,
	.page-id-15 .page-intro-section .wp-block-column[style*="padding-left"] {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* Intro heading smaller */
	.page-id-15 .page-intro-section h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px);
	}

	/* Intro label smaller */
	.page-id-15 .page-intro-section p[style*="uppercase"],
	.page-id-15 .page-intro-section .has-theme-06-color {
		font-size: var(--wp--preset--font-size--small) !important;
	}

	/* Body text smaller */
	.page-id-15 .page-intro-section p:not([style*="uppercase"]):not(.has-theme-06-color) {
		font-size: var(--wp--custom--fontSize--base-sm);
	}

	/* Separator even narrower and centered */
	.page-id-15 .page-intro-section .wp-block-separator,
	.page-id-15 .page-intro-section .wp-block-separator.separator-224,
	.page-id-15 .page-intro-section hr.wp-block-separator.is-style-wide.separator-224 {
		width: 100px !important;
		max-width: 100px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
	}

	/* Accordion sections */
	.page-id-15 .solutions-section.image-accordion-section,
	.page-id-15 .image-accordion-section {
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* NOTE: .page-id-15 .solutions-section h2 removed - overridden with !important at ~20619 */

	/* Accordion items most compact */
	.page-id-15 .solutions-accordion .accordion-item {
		font-size: var(--wp--custom--fontSize--sm);
		padding: 10px 24px 10px 0;
		letter-spacing: 0.8px;
	}

	.page-id-15 .solutions-accordion .accordion-content,
	.page-id-15 .solutions-accordion .accordion-content p {
		font-size: var(--wp--custom--fontSize--sm);
	}

	/* Trusted partners */
	.page-id-15 .trusted-partners-section {
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.page-id-15 .trusted-partners-section h2.wp-block-heading {
		font-size: clamp(24px, 6.5vw, 32px);
	}

	.page-id-15 .trusted-partners-section p {
		font-size: var(--wp--custom--fontSize--base-sm);
	}

	/* Grid gap most compact */
	.page-id-15 .solutions-section .is-style-kindling-grid-system,
	.page-id-15 .image-accordion-section .is-style-kindling-grid-system {
		gap: 16px !important;
	}

	/* Bottom padding for fixed banner */
	body.page-id-15 {
		padding-bottom: 75px;
	}
}

/* ============================================
   SERVICE AREAS PAGE MOBILE SPACING AUDIT
   Viewport: 375px mobile
   Added: 2025-12-30
   Fixes identified spacing issues on Service Areas page
   ============================================ */

@media (max-width: 480px) {

	/* Fix: Intro section paragraph font size too large (was 20px from inline clamp) */
	/* REQUIRED: !important to override inline styles from WP database content */
	.page-id-17 .page-intro-section p,
	body.page-id-17 .page-intro-section .wp-block-column p {
		font-size: var(--wp--preset--font-size--medium) !important;
		line-height: 1.55 !important;
	}

	/* Fix: Intro image - ensure consistent horizontal alignment */
	.page-id-17 .page-intro-section .wp-block-image {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	.page-id-17 .page-intro-section .wp-block-image img {
		width: 100%;
		max-width: 100%;
	}

	/* Fix: Section heading spacing - "AQUATIC SOLUTIONS FOR EVERY FACILITY" */
	.page-id-17 .service-areas-facility-grid>.wp-block-group>h2.wp-block-heading {
		font-size: clamp(20px, 5.5vw, 26px);
		line-height: 1.2;
		margin-bottom: 24px;
		padding-left: 0;
		padding-right: 0;
	}

	/* Fix: Card headings - slightly smaller for better fit */
	/* REQUIRED: !important to override inline clamp() styles from WP database */
	.service-areas-facility-grid .has-theme-07-background-color h3.wp-block-heading,
	.operations-facility-grid .has-theme-07-background-color h3.wp-block-heading {
		font-size: var(--wp--preset--font-size--large) !important;
		line-height: 1.25 !important;
		margin-bottom: 8px;
	}

	/* Fix: Card text boxes - better internal padding */
	/* REQUIRED: !important to override inline padding from WP database */
	.page-id-17 .service-areas-facility-grid .has-theme-07-background-color {}

	/* Fix: Card text boxes - inner group padding */
	.page-id-17 .service-areas-facility-grid .has-theme-07-background-color .wp-block-group {
		padding: 0;
	}

	/* Fix: Card paragraph text */
	.page-id-17 .service-areas-facility-grid .has-theme-07-background-color p {
		font-size: var(--wp--custom--fontSize--base-sm);
		line-height: 1.5;
		margin-top: 4px;
	}

	/* Fix: Reduce gap between card rows */
	.page-id-17 .service-areas-facility-grid .wp-block-columns {
		margin-bottom: 24px;
	}

	/* Fix: Stats counter section - improve spacing */
	.page-id-17 .service-areas-map-section .service-areas-counter-overlay {
		margin-bottom: 16px;
	}

	.page-id-17 .service-areas-map-section .service-areas-counter-overlay .has-theme-02-background-color {
		padding: 16px 20px;
		gap: 8px;
	}

	/* Fix: Stats text sizing */
	.page-id-17 .service-areas-counter-overlay .wp-block-heading {
		font-size: var(--wp--preset--font-size--xx-large);
		line-height: 1.1;
	}

	.page-id-17 .service-areas-counter-overlay p {
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.5px;
	}

	/* Fix: Map disclaimer text */
	.page-id-17 .service-areas-map-section>p.has-text-align-center {
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.4;
		padding-left: 8px;
		padding-right: 8px;
	}

	/* Fix: Ensure consistent horizontal padding */
	.page-id-17 .page-intro-section,
	.page-id-17 .service-areas-facility-grid,
	.page-id-17 .service-areas-map-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Fix: Intro columns - ensure full width stacking */
	.page-id-17 .page-intro-section .wp-block-columns {
		flex-direction: column;
		gap: 20px;
	}

	.page-id-17 .page-intro-section .wp-block-column {
		width: 100%;
		flex-basis: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 375px) {

	/* Tighter spacing at 375px */
	.page-id-17 .page-intro-section,
	.page-id-17 .service-areas-facility-grid,
	.page-id-17 .service-areas-map-section {
		padding-top: 32px;
		padding-bottom: 32px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Smaller intro paragraph at 375px */
	/* REQUIRED: !important to override inline clamp() styles from WP database */
	.page-id-17 .page-intro-section p {
		font-size: var(--wp--custom--fontSize--base-lg) !important;
	}

	/* Tighter card spacing at 375px */
	.page-id-17 .service-areas-facility-grid .wp-block-columns {
		gap: 20px;
		margin-bottom: 20px;
	}

	/* Smaller section heading at 375px */
	.page-id-17 .service-areas-facility-grid>.wp-block-group>h2.wp-block-heading {
		font-size: clamp(18px, 5vw, 22px);
	}

	/* Card heading at 375px */
	/* REQUIRED: !important to override inline clamp() styles from WP database */
	.page-id-17 .service-areas-facility-grid .has-theme-07-background-color h3.wp-block-heading {
		font-size: var(--wp--custom--fontSize--lg) !important;
	}

	/* Card text box padding at 375px */
	/* REQUIRED: !important to override inline padding from WP database */
	.page-id-17 .service-areas-facility-grid .has-theme-07-background-color {
		padding: 12px !important;
	}

	/* Stats boxes at 375px */
	.page-id-17 .service-areas-counter-overlay .has-theme-02-background-color {
		padding: 12px 16px;
	}

	.page-id-17 .service-areas-counter-overlay .wp-block-heading {
		font-size: var(--wp--custom--fontSize--2xl);
	}
}

/* ==========================================================================
   OUR SOLUTIONS PAGE - Additional Mobile Text Overflow Fixes
   Date: 2025-12-30
   Issue: Accordion text and headings still being cut off at right edge
   ========================================================================== */

@media (max-width: 781px) {

	/* Force all text in solutions sections to wrap and not overflow */
	.page-id-15 .solutions-section,
	.page-id-15 .image-accordion-section,
	.page-id-15 .solutions-accordion {
		overflow-x: hidden;
		max-width: 100vw;
	}

	/* NOTE: Accordion inner container styling consolidated to line ~20695 with !important */

	/* Accordion headings (h3) - prevent overflow with word wrap */
	.page-id-15 .solutions-accordion h3,
	.page-id-15 .solutions-accordion .accordion-item,
	.page-id-15 .solutions-section h3.wp-block-heading {
		max-width: 100%;
		white-space: normal !important;
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
		padding-right: 30px;
	}

	/* Description paragraphs under section titles */
	.page-id-15 .solutions-section .wp-block-kindling-grid-item>p,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item>p,
	.page-id-15 .solutions-section p.has-white-color {
		max-width: 100%;
		overflow-wrap: break-word;
		word-wrap: break-word;
		padding-right: 10px;
	}

	/* Accordion content text */
	.page-id-15 .solutions-accordion p,
	.page-id-15 .accordion-content {
		max-width: 100%;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* Cover inner container - constrain width */
	.page-id-15 .solutions-section .wp-block-cover__inner-container,
	.page-id-15 .image-accordion-section .wp-block-cover__inner-container {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	/* NOTE: .wp-block-kindling-grid-item overflow/max-width merged into definition at line ~20299 */
}

@media (max-width: 480px) {

	/* Even more aggressive text wrapping at 480px */
	.page-id-15 .solutions-accordion h3,
	.page-id-15 .solutions-accordion .accordion-item {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		letter-spacing: 0.8px;
		padding-right: 25px;
		line-height: 1.3;
	}

	/* Description text under section headings */
	.page-id-15 .solutions-section .wp-block-kindling-grid-item>p,
	.page-id-15 .solutions-section p.has-white-color:not(.accordion-content) {
		font-size: var(--wp--custom--fontSize--base-lg) !important;
		line-height: 1.45;
	}
}

@media (max-width: 375px) {

	/* Most aggressive text wrapping at 375px */
	.page-id-15 .solutions-accordion h3,
	.page-id-15 .solutions-accordion .accordion-item {
		font-size: var(--wp--custom--fontSize--sm) !important;
		letter-spacing: 0.6px;
		padding-right: 20px;
		line-height: 1.25;
	}

	/* Description text smaller */
	.page-id-15 .solutions-section .wp-block-kindling-grid-item>p,
	.page-id-15 .solutions-section p.has-white-color:not(.accordion-content) {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		line-height: 1.4;
	}

	/* Section headings smaller */
	.page-id-15 .solutions-section h2.wp-block-heading {
		font-size: clamp(22px, 6vw, 30px) !important;
		letter-spacing: 0.8px;
	}
}

/* ==========================================================================
   OUR SOLUTIONS PAGE - Fix alignfull section overflow
   Date: 2025-12-30
   Issue: Blue accordion sections extend beyond viewport causing text cutoff
   REQUIRED: !important to override WP alignfull block viewport breakout styles for mobile overflow fix
   ========================================================================== */

@media (max-width: 781px) {

	/* Force alignfull sections to respect viewport width */
	.page-id-15 .solutions-section.alignfull,
	.page-id-15 .image-accordion-section.alignfull,
	.page-id-15 .wp-block-group.alignfull.solutions-section {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	/* Inner alignwide group needs to fit within parent */
	.page-id-15 .solutions-section .wp-block-group.alignwide,
	.page-id-15 .image-accordion-section .wp-block-group.alignwide {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Grid system container - full width but with padding from parent */
	.page-id-15 .solutions-section .is-style-kindling-grid-system,
	.page-id-15 .image-accordion-section .is-style-kindling-grid-system {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Grid items need proper width constraint */
	.page-id-15 .solutions-section .wp-block-kindling-grid-item,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item {
		width: calc(100vw - 40px) !important;
		max-width: calc(100vw - 40px) !important;
		box-sizing: border-box !important;
	}

	/* All paragraphs inside blue sections */
	.page-id-15 .solutions-section.has-theme-02-background-color p,
	.page-id-15 .image-accordion-section.has-theme-02-background-color p {
		max-width: calc(100vw - 60px) !important;
		overflow-wrap: break-word !important;
		word-wrap: break-word !important;
	}

	/* All accordion items/headings */
	.page-id-15 .solutions-accordion h3.wp-block-heading,
	.page-id-15 .solutions-accordion .accordion-item.wp-block-heading {
		max-width: calc(100vw - 70px) !important;
		overflow-wrap: break-word !important;
		word-wrap: break-word !important;
		white-space: normal !important;
	}
}

@media (max-width: 480px) {

	/* Tighter constraints at 480px */
	.page-id-15 .solutions-section .wp-block-kindling-grid-item,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item {
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
	}

	.page-id-15 .solutions-section.has-theme-02-background-color p,
	.page-id-15 .image-accordion-section.has-theme-02-background-color p {
		max-width: calc(100vw - 50px) !important;
	}

	.page-id-15 .solutions-accordion h3.wp-block-heading,
	.page-id-15 .solutions-accordion .accordion-item.wp-block-heading {
		max-width: calc(100vw - 60px) !important;
	}
}

@media (max-width: 375px) {

	/* Tightest constraints at 375px */
	.page-id-15 .solutions-section .wp-block-kindling-grid-item,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
	}

	.page-id-15 .solutions-section.has-theme-02-background-color p,
	.page-id-15 .image-accordion-section.has-theme-02-background-color p {
		max-width: calc(100vw - 40px) !important;
	}

	.page-id-15 .solutions-accordion h3.wp-block-heading,
	.page-id-15 .solutions-accordion .accordion-item.wp-block-heading {
		max-width: calc(100vw - 50px) !important;
	}
}

/* ==========================================================================
   Homepage Hero - Remove white gap and reduce intro padding (mobile)
   REQUIRED: !important throughout to override WP block inline padding/margins
   for seamless mobile hero carousel and CTA section layouts
   ========================================================================== */
@media (max-width: 1279px) {

	/* Homepage hero carousel wrapper - remove any bottom padding, set min-height */
	.home-hero-carousel-wrapper {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
		min-height: 80vh !important;
	}

	/* Homepage about/intro section - vertical padding 29px (10% reduction from 32px) */
	.home-about-section {
		padding-top: 29px !important;
		padding-bottom: 29px !important;
	}

	/* Homepage dual CTA section - full width, 20px gap between CTAs */
	.home-cta-dual-section {
		padding: 0 !important;
		margin: 0 !important;
		gap: 20px !important;
	}

	/* Remove gap between dual CTA buttons on mobile */
	.home-cta-dual-section .wp-block-buttons {
		gap: 0 !important;
	}

	/* Dual CTA covers on mobile - remove min-height, 80px vertical padding */
	.home-cta-dual-section .wp-block-cover {
		min-height: auto !important;
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	/* Our Solutions Pattern - Mobile padding fix */
	/* Remove horizontal padding on solutions-section-cover and all children */
	.solutions-section-cover,
	.solutions-section-cover * {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ==========================================================================
   MOBILE FOOTER - Compact layout for 375px viewport
   Reduces excessive vertical spacing, makes footer more compact
   REQUIRED: !important declarations override WP Block inline styles for mobile footer compact layout
   ========================================================================== */
@media (max-width: 480px) {

	/* Reduce footer container padding from 60px to 30px */
	/* REQUIRED: !important to override inline styles from WordPress block */
	.wp-block-group.has-theme-02-background-color.has-background[style*="padding-top:60px"] {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	/* Reduce spacing between footer columns */
	.wp-block-group.has-theme-02-background-color>.wp-block-columns>.wp-block-column {
		margin-bottom: 12px !important;
	}

	/* Footer buttons - reduce gap between Careers and Let's Connect */
	body .wp-block-buttons:has(.footer-button-careers) {
		gap: 12px !important;
	}

	/* Footer buttons - smaller on mobile */
	/* Task #44: Added border-radius to make CTAs pill-shaped like desktop */
	body .footer-button-careers .wp-block-button__link,
	body .footer-button-connect .wp-block-button__link {
		width: 140px !important;
		min-width: 140px !important;
		font-size: var(--wp--custom--fontSize--lg) !important;
		padding: 8px 12px !important;
		border-radius: 50px !important;
	}

	body .footer-button-connect .wp-block-button__link {
		height: auto !important;
		min-height: unset !important;
	}

	/* Footer policy links column - much tighter spacing */
	.wp-block-group.has-theme-02-background-color .wp-block-column p.has-small-font-size,
	.wp-block-group.has-theme-02-background-color .wp-block-column p.has-theme-04-color {
		margin-top: 0 !important;
		margin-bottom: 4px !important;
		line-height: 1.4 !important;
	}

	/* Footer awards container - horizontal row layout */
	.wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex:has(> .wp-block-image) {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		margin-bottom: 0 !important;
		justify-content: flex-start !important;
	}

	/* Footer award images - smaller size to fit 3 in a row */
	.wp-block-group.has-theme-02-background-color:not(.solutions-section):not(.image-accordion-section) .wp-block-image {
		width: 60px !important;
		max-width: 60px !important;
		flex: 0 0 60px !important;
	}

	.wp-block-group.has-theme-02-background-color:not(.solutions-section):not(.image-accordion-section) .wp-block-image img {
		width: 60px !important;
		height: auto !important;
	}

	/* Footer social links - smaller icon */
	.wp-block-group.has-theme-02-background-color .wp-block-social-links {
		margin-bottom: 4px !important;
	}

	.wp-block-group.has-theme-02-background-color .wp-block-social-links.has-huge-icon-size .wp-social-link svg {
		width: 36px !important;
		height: 36px !important;
	}

	/* Footer phone number - smaller */
	.wp-block-group.has-theme-02-background-color p[style*="font-size: var(--wp--preset--font-size--x-large)"] {
		font-size: var(--wp--preset--font-size--medium) !important;
		margin-bottom: 2px !important;
		margin-top: 0 !important;
	}

	/* Footer copyright - tighter margin */
	.wp-block-group.has-theme-02-background-color p[style*="font-size: var(--wp--custom--fontSize--base-sm)"] {
		font-size: var(--wp--custom--fontSize--xs) !important;
		margin-top: 2px !important;
		margin-bottom: 0 !important;
	}

	/* Footer vertical flex group - reduce internal gaps */
	.wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex.is-vertical {
		gap: 4px !important;
	}

	/* Remove phone icon on mobile to save space */
	.wp-block-group.has-theme-02-background-color a[href^="tel:"]::before {
		display: none !important;
	}
}

/* Additional 375px specific overrides */
@media (max-width: 375px) {

	/* Even smaller padding at 375px */
	.wp-block-group.has-theme-02-background-color.has-background[style*="padding-top:60px"] {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}

	/* Smaller column margins */
	.wp-block-group.has-theme-02-background-color>.wp-block-columns>.wp-block-column {
		margin-bottom: 10px !important;
	}

	/* Footer buttons - inline layout on very small screens */
	.wp-block-group.has-theme-02-background-color .wp-block-buttons.is-vertical {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	/* Footer buttons - even smaller */
	body .footer-button-careers .wp-block-button__link,
	body .footer-button-connect .wp-block-button__link {
		width: auto !important;
		min-width: 110px !important;
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		padding: 6px 12px !important;
	}

	/* Footer policy links - minimal spacing, override accessibility touch targets */
	.wp-block-group.has-theme-02-background-color .wp-block-column p.has-small-font-size,
	.wp-block-group.has-theme-02-background-color .wp-block-column p.has-theme-04-color {
		margin-bottom: 2px !important;
		font-size: var(--wp--preset--font-size--small) !important;
	}

	/* Override accessibility min-height on footer policy links for mobile compactness */
	/* REQUIRED: !important to override accessibility touch target rules */
	footer .has-theme-04-color a,
	footer a[href*="accessibility"],
	footer a[href*="privacy"],
	footer a[href*="terms"],
	.wp-block-group.has-theme-02-background-color .has-theme-04-color a {
		min-height: 32px !important;
		padding: 6px 4px !important;
	}

	/* Footer award images - fit 3 across at 375px with wrapping */
	.wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex:has(> .wp-block-image) {
		flex-wrap: wrap !important;
	}

	.wp-block-group.has-theme-02-background-color:not(.solutions-section):not(.image-accordion-section) .wp-block-image {
		width: 55px !important;
		max-width: 55px !important;
		flex: 0 0 55px !important;
	}

	.wp-block-group.has-theme-02-background-color:not(.solutions-section):not(.image-accordion-section) .wp-block-image img {
		width: 55px !important;
	}

	/* Footer social links - even smaller */
	.wp-block-group.has-theme-02-background-color .wp-block-social-links.has-huge-icon-size .wp-social-link svg {
		width: 32px !important;
		height: 32px !important;
	}

	/* Footer phone number - smaller at 375px */
	.wp-block-group.has-theme-02-background-color p[style*="font-size: var(--wp--preset--font-size--x-large)"] {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
	}
}

/* ============================================
   OPERATIONS CPT - Mobile Hero Section Fixes
   Match page hero template styling at mobile viewports
   REQUIRED: !important for z-index to ensure proper stacking context
   with navigation dropdown overlays
   ============================================ */

/* Operations hero cover - base styles for mobile alignment with page hero templates */
/* Lower z-index so dropdown can appear above it */
.single-operations .operations-hero.hero-cover-section {
	position: relative;
	z-index: 1 !important;
	overflow: visible;
}

/* Ensure the Operations hero cover behaves like page hero templates */
/* Lower z-index so dropdown can appear above it */
.single-operations .operations-hero.hero-cover-section .wp-block-cover__inner-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 1 !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Operations hero indicator dots - match page hero template positioning */
.single-operations .operations-hero .hero-indicator-dots {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 100;
}

/* ==========================================================================
   OPERATIONS CPT - Full-Width Pattern Support (All Viewports)
   Remove root padding to allow patterns to go edge-to-edge
   ========================================================================== */

/* Remove theme.json root padding from Operations CPT singles
   Theme.json sets padding-left/right: var(--wp--preset--spacing--40) on body
   This prevents full-width patterns from reaching the viewport edges */
body.single-operations>.wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
}

/* Reset all parent containers to allow full-bleed patterns */
body.single-operations .wp-site-blocks>.wp-block-group,
body.single-operations main.wp-block-group,
body.single-operations .wp-block-post-content {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* Ensure alignfull blocks truly go edge-to-edge */
body.single-operations .wp-block-group.alignfull,
body.single-operations .wp-block-cover.alignfull,
body.single-operations .wp-block-columns.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

/* Override WordPress has-global-padding on Operations CPT sections */
body.single-operations .wp-block-group.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Mobile breakpoint - Operations CPT hero section alignment with page hero templates */
@media (max-width: 781px) {

	/* Operations body/container - remove root-level padding from theme.json
	   Theme.json sets padding-left/right: var(--wp--preset--spacing--40) on body
	   We need to reset this for the hero to be truly full-bleed */
	body.single-operations {
		overflow-x: hidden;
	}

	/* CRITICAL: Reset the root body padding for Operations pages on mobile
	   This overrides theme.json spacing.padding settings */
	body.single-operations>.wp-site-blocks {
		padding-left: 0;
		padding-right: 0;
	}

	/* Reset all parent containers to allow full-bleed hero */
	body.single-operations .wp-site-blocks>.wp-block-group,
	body.single-operations .wp-block-group:has(.operations-hero),
	body.single-operations main.wp-block-group,
	body.single-operations .wp-block-post-content {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* Operations hero cover - full bleed edge-to-edge on mobile */
	/* CRITICAL: Force true full-viewport-width using negative margins
	   Theme.json spacing--40 = clamp(1.5rem, 5vw, 2rem) = ~19px at 375px
	   Use 100vw width with left:50% transform to guarantee full bleed */
	.single-operations .operations-hero.hero-cover-section,
	.single-operations .operations-hero.wp-block-cover.alignfull,
	body.single-operations .operations-hero.hero-cover-section,
	body.single-operations .wp-block-cover.operations-hero {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		max-width: 100vw;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* Force reusable block wrapper to have no margins/padding */
	body.single-operations .wp-block[data-type="core/block"]:has(.operations-hero) {
		margin: 0;
		padding: 0;
		width: 100%;
		max-width: 100%;
	}

	/* Ensure hero image fills the cover completely */
	.single-operations .operations-hero.hero-cover-section .wp-block-cover__image-background {
		border-radius: 0;
		object-fit: cover;
	}

	/* Match hero height with page hero templates on mobile - 60vh */
	/* High specificity to override generic .hero-cover-section rules */
	body.single-operations .operations-hero.hero-cover-section,
	body.single-operations .wp-block-cover.operations-hero.hero-cover-section,
	.single-operations .operations-hero.hero-cover-section.wp-block-cover {
		min-height: 70vh;
		height: 70vh;
		max-height: 70vh;
	}

	/* Operations hero gradient overlay - match page hero templates */
	.single-operations .operations-hero.hero-cover-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(rgb(26, 78, 162) 0%, rgba(26, 78, 162, 0) 100%);
		z-index: 1;
		pointer-events: none;
	}

	/* Hide the default cover background overlay for Operations hero */
	.single-operations .operations-hero.hero-cover-section .wp-block-cover__background {
		opacity: 0;
	}

	/* Hero indicator dots - position properly on mobile */
	.single-operations .operations-hero .hero-indicator-dots {
		bottom: -10px;
	}

	.single-operations .operations-hero .hero-indicator-dots .hero-dot {
		width: 12px;
		height: 12px;
		border-radius: var(--wp--custom--border--rounded-full);
		background-color: #d94040;
	}

	.single-operations .operations-hero .hero-indicator-dots .hero-dot.active {
		width: 80px;
		border-radius: var(--wp--custom--border--rounded-sm-md);
	}

	/* Operations hero mobile navigation - ensure hamburger shows like other hero pages */
	/* The hero-mobile-nav-wrapper from header-hero-simple should display correctly */
	/* Banner is now at bottom, so no adjustment needed */
	body.single-operations .hero-mobile-nav-wrapper {
		display: block;
		position: fixed;
		top: 20px;
		right: 15px;
		z-index: 99999;
	}

	body.single-operations .hero-mobile-nav-wrapper .mobile-nav-toggle {
		display: flex;
		background-color: var(--wp--preset--color--theme-02);
		border: 3px solid white;
		border-radius: var(--wp--custom--border--rounded-small);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	}

	body.single-operations .hero-mobile-nav-wrapper .hamburger-inner,
	body.single-operations .hero-mobile-nav-wrapper .hamburger-inner::before,
	body.single-operations .hero-mobile-nav-wrapper .hamburger-inner::after {
		background-color: white;
	}

	/* Hide desktop navigation on mobile */
	body.single-operations .hero-navigation,
	body.single-operations .hero-navigation-block-wrapper,
	body.single-operations .desktop-navigation {
		display: none;
	}

	/* Remove any inner padding from hero cover inner container on mobile */
	body.single-operations .operations-hero.hero-cover-section .wp-block-cover__inner-container {
		padding: 0;
	}
}

/* Extra small mobile (375px) - Operations hero refinements */
@media (max-width: 375px) {

	/* Smaller hero height for very small screens - override 60vh from 781px breakpoint */
	body.single-operations .operations-hero.hero-cover-section,
	body.single-operations .wp-block-cover.operations-hero.hero-cover-section {
		min-height: 50vh;
		height: 50vh;
		max-height: 50vh;
	}

	/* Smaller indicator dots */
	.single-operations .operations-hero .hero-indicator-dots {
		gap: 8px;
	}

	.single-operations .operations-hero .hero-indicator-dots .hero-dot {
		width: 10px;
		height: 10px;
	}

	.single-operations .operations-hero .hero-indicator-dots .hero-dot.active {
		width: 60px;
		border-radius: var(--wp--custom--border--rounded-sm-sm);
	}
}

/* ==========================================================================
   Single Operations - Hero Header (transparent overlay like hero page)
   ========================================================================== */

/* Hide carousel dots on operations pages - no carousel present */
body.single-operations .hero-carousel-dots {
	display: none;
}

/* ==========================================================================
   MOBILE FOOTER A-TIER REDESIGN - 375px-480px (tablet/small mobile)
   Comprehensive overhaul for professional, compact appearance
   REQUIRED: !important declarations throughout this section override WordPress
   block inline styles (Grid, Buttons, Lists, Social Links, Images) to achieve
   mobile-optimized stacked layout, full-width elements, and consistent alignment.
   ========================================================================== */
@media (max-width: 480px) {

	/* Footer container - remove excessive padding */
	/* REQUIRED: !important to override inline WordPress styles */
	.wp-block-group.has-white-color.has-theme-02-background-color.has-background {
		padding-top: 32px !important;
		padding-bottom: 60px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Main footer flex container - stack vertically and LEFT ALIGN on mobile */
	/* Target the kindling-grid-system container */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-style-kindling-grid-system {
		flex-wrap: wrap !important;
		flex-direction: column !important;
		gap: 20px !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Override alignwide max-width in footer */
	.wp-block-group.has-white-color.has-theme-02-background-color .alignwide {
		max-width: 100% !important;
		width: 100% !important;
	}

	/* CRITICAL: Force ALL children of grid system to be full-width and LEFT ALIGNED */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-style-kindling-grid-system>.wp-block-group {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		align-self: flex-start !important;
	}

	/* Force awards and social links to left align */
	.wp-block-group.has-white-color.has-theme-02-background-color .is-content-justification-center {
		align-self: flex-start !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
	}

	/* Social links container - merged: justify-content from line ~21527 */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-social-links {
		align-self: flex-start !important;
		margin-left: 0 !important;
		margin-right: auto !important;
		justify-content: flex-start !important;
	}

	/* CRITICAL: Override WordPress is-content-justification-right margin hack on social icons */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-social-links .wp-social-link {
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* Footer buttons container - stacked vertically, CENTERED */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-buttons.is-vertical {
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
		justify-content: center !important;
		align-items: center !important;
	}

	/* Footer buttons - FULL WIDTH to container */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-buttons.is-vertical .wp-block-button {
		width: 100% !important;
	}

	/* Footer buttons - sizing only, preserve original button styles */
	.wp-block-group.has-white-color.has-theme-02-background-color .footer-button-careers .wp-block-button__link,
	.wp-block-group.has-white-color.has-theme-02-background-color .footer-button-connect .wp-block-button__link {
		width: 100% !important;
		min-width: unset !important;
		padding: 12px 20px !important;
		font-size: var(--wp--custom--fontSize--base-sm) !important;
		text-align: center !important;
	}

	/* Careers button - ghost pill style with light blue border */
	.wp-block-group.has-white-color.has-theme-02-background-color .footer-button-careers .wp-block-button__link {
		background: transparent !important;
		background-color: transparent !important;
		border: 2px solid var(--wp--preset--color--theme-03) !important;
		border-radius: 54px !important;
		color: var(--wp--preset--color--white) !important;
	}

	/* Let's Connect button - dark blue with light blue border */
	.wp-block-group.has-white-color.has-theme-02-background-color .footer-button-connect .wp-block-button__link {
		background-color: var(--wp--preset--color--theme-02) !important;
		border: 2px solid var(--wp--preset--color--theme-03) !important;
		border-radius: 54px !important;
		color: var(--wp--preset--color--white) !important;
		position: relative !important;
		overflow: hidden !important;
	}

	/* Policy links list - FULL WIDTH with space-between */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-list {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		width: 100% !important;
		gap: 8px !important;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
	}

	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-list li {
		margin: 0 !important;
		padding: 0 !important;
		flex: 1 1 auto !important;
		text-align: center !important;
	}

	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-list li a {
		font-size: var(--wp--preset--font-size--small) !important;
		font-weight: 600 !important;
		letter-spacing: 0.5px !important;
		text-transform: uppercase !important;
		padding: 4px 0 !important;
		min-height: unset !important;
		display: block !important;
	}

	/* Awards container - horizontal row, CENTERED */
	/* MUST override column direction from parent rules */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 16px !important;
		justify-content: center !important;
		width: 100% !important;
	}

	/* Award images - larger, flexible width to span container */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center .wp-block-image,
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center figure {
		flex: 1 1 auto !important;
		max-width: 100px !important;
		width: auto !important;
		min-width: unset !important;
	}

	/* REQUIRED: Override inline width styles on img tags - consistent height logos */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center .wp-block-image img,
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center figure img,
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center img[style*="width"] {
		width: auto !important;
		max-width: none !important;
		min-width: unset !important;
		height: 110px !important;
		max-height: 110px !important;
		object-fit: contain !important;
	}

	/* HIDE privacy choices button on mobile */
	.wp-block-group.has-white-color.has-theme-02-background-color .privacy-choices-button {
		display: none !important;
	}

	/* Right column container - HORIZONTAL row with LinkedIn left, phone centered */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-vertical.is-content-justification-right {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		position: relative !important;
	}

	/* LinkedIn - stays on the left */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-vertical.is-content-justification-right>.wp-block-social-links {
		flex: 0 0 auto !important;
		width: auto !important;
		justify-content: flex-start !important;
	}

	/* Constrained container (phone section) - absolutely centered, aligned with LinkedIn */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-vertical.is-content-justification-right>.wp-block-group.is-layout-constrained {
		position: absolute !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		padding: 0 !important;
		gap: 4px !important;
		margin-top: 10px !important;
	}

	/* Phone icon + number row - horizontal, vertically aligned */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-vertical.is-content-justification-right .wp-block-group.is-content-justification-right.is-nowrap {
		width: auto !important;
		justify-content: center !important;
		align-items: center !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
	}

	/* Phone row children - inline, override footer 100% width rule */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-right.is-nowrap>* {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: auto !important;
	}

	/* Phone icon - proper sizing and alignment */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-right.is-nowrap .wp-block-outermost-icon-block {
		display: flex !important;
		align-items: center !important;
		flex: 0 0 auto !important;
	}

	/* Phone number paragraph - inline */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-right.is-nowrap p {
		margin: 0 !important;
		flex: 0 0 auto !important;
	}

	/* Task #45: Show copyright on mobile - was previously hidden, now visible per ACG reference */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-vertical.is-content-justification-right p.has-text-align-right {
		display: block !important;
		text-align: center !important;
		width: 100% !important;
		margin-top: 8px !important;
		font-size: var(--wp--preset--font-size--small) !important;
	}

	/* NOTE: Social links justify-content merged to line ~21332 */

	/* LinkedIn icon wrapper - left align within its container */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-social-links.has-huge-icon-size {
		display: flex !important;
		justify-content: flex-start !important;
		width: 100% !important;
	}

	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-social-links.has-huge-icon-size .wp-social-link svg {
		width: 28px !important;
		height: 28px !important;
	}

	/* Main footer content row - STACK VERTICALLY and LEFT ALIGN ALL children */
	/* Target the flex container with space-between */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-space-between.is-layout-flex {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}

	/* Force ALL children of footer main row to be left aligned (EXCEPT buttons - those are centered) */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-space-between.is-layout-flex>*:not(.wp-block-buttons) {
		width: 100% !important;
		display: flex !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	/* Awards container - keep HORIZONTAL and LEFT ALIGN */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center.is-layout-flex {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
	}

	/* Phone icon and number container - CENTERED */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-right {
		justify-content: center !important;
		gap: 8px !important;
		width: 100% !important;
	}

	/* Show phone icon on mobile - YELLOW color */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-outermost-icon-block {
		display: inline-flex !important;
	}

	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-outermost-icon-block svg {
		fill: var(--wp--preset--color--theme-04) !important;
		color: var(--wp--preset--color--theme-04) !important;
	}

	/* Phone number - prominent but not overwhelming */
	.wp-block-group.has-white-color.has-theme-02-background-color .has-theme-04-color[style*="font-size"] a,
	.wp-block-group.has-white-color.has-theme-02-background-color p.has-theme-04-color a {
		font-size: var(--wp--custom--fontSize--lg) !important;
		font-weight: 700 !important;
	}

	/* Copyright text - subtle */
	.wp-block-group.has-white-color.has-theme-02-background-color .has-white-color[style*="font-size: var(--wp--custom--fontSize--base-sm)"],
	.wp-block-group.has-white-color.has-theme-02-background-color p.has-white-color {
		font-size: var(--wp--custom--fontSize--xs) !important;
		opacity: 0.8;
		margin: 0 !important;
	}

	/* NOTE: Privacy choices button is hidden at 480px (see line ~21450) - styling removed as dead code */

	/* Inner constrained group - remove excess spacing */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-layout-constrained {
		padding: 0 !important;
	}
}

/* 375px specific refinements */
@media (max-width: 375px) {

	/* Even more compact at 375px */
	.wp-block-group.has-white-color.has-theme-02-background-color.has-background {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Tighter gap between sections */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-nowrap {
		gap: 20px !important;
	}

	/* Buttons slightly smaller */
	.wp-block-group.has-white-color.has-theme-02-background-color .footer-button-careers .wp-block-button__link,
	.wp-block-group.has-white-color.has-theme-02-background-color .footer-button-connect .wp-block-button__link {
		padding: 8px 16px !important;
		font-size: var(--wp--custom--fontSize--sm) !important;
	}

	/* Policy links - even smaller font */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-list li a {
		font-size: var(--wp--custom--fontSize--2xs) !important;
	}

	/* Awards - slightly smaller at 375px but still span width */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-center .wp-block-image img {
		max-width: 90px !important;
		max-height: 90px !important;
	}

	/* Phone number */
	.wp-block-group.has-white-color.has-theme-02-background-color .has-theme-04-color[style*="font-size"] a,
	.wp-block-group.has-white-color.has-theme-02-background-color p.has-theme-04-color a {
		font-size: var(--wp--preset--font-size--medium) !important;
	}
}

/* ============================================
   LARGE BG OVERLAY SECTION - Mobile Padding Fix
   Reduces inline 225px padding to ~112px on mobile
   ============================================ */

/* Tablet and mobile - reduce 225px padding to 112px */
/* REQUIRED: !important to override inline padding-top:225px and padding-bottom:225px from WordPress database content */
@media (max-width: 781px) {
	.large-bg-overlay-section.wp-block-cover[style*="padding-top"] {
		padding-top: 112px !important;
		padding-bottom: 112px !important;
	}
}

/* Smaller phones - reduce further to 80px */
@media (max-width: 480px) {
	.large-bg-overlay-section.wp-block-cover[style*="padding-top"] {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

/* Extra small phones - reduce to 60px */
@media (max-width: 375px) {
	.large-bg-overlay-section.wp-block-cover[style*="padding-top"] {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
}

/* ============================================
   HOME PAGE - Mobile 430px Fixes
   Service Areas + Large BG Overlay + Global Carousel
   ============================================ */
@media (max-width: 480px) {

	/* --- GLOBAL CAROUSEL RULES (Mobile) --- */
	/* Full-width carousels on mobile */
	.wp-block-kindling-carousel {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
	}

	/* Indicator dots spacing - 30px below carousel */
	.wp-block-kindling-carousel .splide__pagination {
		margin-top: 30px !important;
		bottom: -3px !important;
	}

	/* --- HOME SERVICE AREAS SECTION --- */

	/* Separator - reduce width and left-align */
	.service-areas-section .wp-block-separator {
		width: 150px !important;
		max-width: 150px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* Reduce gap between button and carousel */
	.service-areas-section .wp-block-kindling-grid-item:first-child .wp-block-group {
		gap: 16px;
	}

	/* Service Areas carousel - override for nested grid structure */
	/* Needs specific margins to break out of grid item container */
	.service-areas-section .service-areas-carousel-splide {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: -60px !important;
		margin-right: -35px !important;
	}

	/* Reduce section bottom padding */
	.service-areas-section {
		padding-bottom: 40px !important;
	}

	/* --- LARGE BG OVERLAY SECTION --- */
	/* Reduce padding by 50% (from 80px to 40px) */
	.large-bg-overlay-section.wp-block-cover[style*="padding-top"],
	.large-bg-overlay-section>.large-bg-overlay-content-wrapper {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* ============================================
   CAROUSEL + TEXT SECTION - Mobile Column Reorder
   Swap order: Text on top, Carousel on bottom
   ============================================ */
@media (max-width: 781px) {

	/* Carousel + Text section columns - reorder for mobile */
	/* Text column appears first (top), carousel column appears second (bottom) */
	.carousel-text-section .wp-block-columns {
		display: flex;
		flex-direction: column;
	}

	/* Carousel column (first child) - move to bottom */
	.carousel-text-section .wp-block-columns>.wp-block-column:first-child {
		order: 2;
	}

	/* Text column (last child) - move to top */
	.carousel-text-section .wp-block-columns>.wp-block-column:last-child {
		order: 1;
	}

	/* Job Fit section - same reorder pattern */
	/* NOTE: job-fit-container flex column already set at 1024px (line ~4199), removed redundant rule */

	/* Job fit section - carousel column first on mobile (Carousel + Text pattern) */
	.job-fit-section .wp-block-columns>.wp-block-column:first-child {
		order: 1 !important;
	}

	.job-fit-section .wp-block-columns>.wp-block-column:last-child {
		order: 2 !important;
	}
}

/* ==========================================================================
   INTRO SECTION MOBILE FIXES - Overlap and Heading Margin
   Fix content collision when columns stack on mobile
   ========================================================================== */

/* Mobile - Fix intro section overlap when columns stack (max-width: 767px) */
@media (max-width: 767px) {

	/* Remove min-height on texture bg sections */
	.has-theme-01-background-color.has-texture-bg {
		min-height: auto !important;
	}

	/* Force intro section columns to stack properly */
	.about-intro-section .wp-block-columns,
	.solutions-intro-section .wp-block-columns,
	.partner-intro-section .wp-block-columns,
	.lifeguard-intro-section .wp-block-columns,
	.page-intro-section .wp-block-columns {
		flex-direction: column;
		gap: 24px;
	}

	/* Ensure columns take full width when stacked */
	.about-intro-section .wp-block-columns>.wp-block-column,
	.solutions-intro-section .wp-block-columns>.wp-block-column,
	.partner-intro-section .wp-block-columns>.wp-block-column,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column,
	.page-intro-section .wp-block-columns>.wp-block-column {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* Reset offset-pool-bg margin on mobile to prevent overlap */
	.about-intro-section .has-offset-pool-bg,
	.solutions-intro-section .has-offset-pool-bg,
	.partner-intro-section .has-offset-pool-bg,
	.lifeguard-intro-section .has-offset-pool-bg,
	.page-intro-section .has-offset-pool-bg {
		margin-right: 0;
		margin-bottom: 0;
	}

	/* Hide pool offset background decoration on mobile */
	.about-intro-section .has-offset-pool-bg::before,
	.solutions-intro-section .has-offset-pool-bg::before,
	.partner-intro-section .has-offset-pool-bg::before,
	.lifeguard-intro-section .has-offset-pool-bg::before,
	.page-intro-section .has-offset-pool-bg::before {
		display: none;
	}

	/* Reduce heading margin-bottom to 10px on mobile */
	.about-intro-section h1.wp-block-heading,
	.about-intro-section h2.wp-block-heading,
	.solutions-intro-section h1.wp-block-heading,
	.solutions-intro-section h2.wp-block-heading,
	.partner-intro-section h1.wp-block-heading,
	.partner-intro-section h2.wp-block-heading,
	.lifeguard-intro-section h1.wp-block-heading,
	.lifeguard-intro-section h2.wp-block-heading,
	.page-intro-section h1.wp-block-heading,
	.page-intro-section h2.wp-block-heading {
		margin-bottom: 10px;
	}

	/* Text column 30px edge spacing - alignwide columns break out of parent padding */
	/* REQUIRED: !important to override inline styles from WP editor */
	.about-intro-section .wp-block-columns>.wp-block-column:last-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:last-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:last-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:last-child,
	.page-intro-section .wp-block-columns>.wp-block-column:last-child {
		margin-left: 0;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

@media (min-width: 768px) and (max-width: 1516px) {
	.wp-container-core-group-is-layout-fc67a129 {
		padding-left: 50px !important;
	}

	.wp-container-core-group-is-layout-38152dc2 .wp-block-kindling-grid-item {
		padding-right: 10px !important;
	}

	.page-id-23 .page-intro-section .wp-block-columns>.wp-block-column:last-child {
		padding-right: 5% !important;
		padding-left: 0% !important;
	}
}

/* Very small mobile - 375px refinements */
@media (max-width: 375px) {

	/* Tighter column gap at 375px */
	.about-intro-section .wp-block-columns,
	.solutions-intro-section .wp-block-columns,
	.partner-intro-section .wp-block-columns,
	.lifeguard-intro-section .wp-block-columns,
	.page-intro-section .wp-block-columns {
		gap: 20px;
	}

	/* Ensure heading margin stays at 10px */
	.about-intro-section h1.wp-block-heading,
	.about-intro-section h2.wp-block-heading,
	.solutions-intro-section h1.wp-block-heading,
	.solutions-intro-section h2.wp-block-heading,
	.partner-intro-section h1.wp-block-heading,
	.partner-intro-section h2.wp-block-heading,
	.lifeguard-intro-section h1.wp-block-heading,
	.lifeguard-intro-section h2.wp-block-heading,
	.page-intro-section h1.wp-block-heading,
	.page-intro-section h2.wp-block-heading {
		margin-bottom: 10px;
	}
}

/* ==========================================================================
   Single CPT - Our Solutions Section Mobile Fixes
   Fix grid-based solution cards on Operations CPT pages to match homepage mobile styling
   ========================================================================== */

@media (max-width: 781px) {

	/* Grid system inside solutions-section-cover - stack cards vertically */
	.solutions-section-cover .is-style-kindling-grid-system {
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding: 0 16px;
	}

	/* Solution cards - full width and centered */
	.solutions-section-cover .solutions-card-new {
		width: 100%;
		max-width: 100%;
	}

	/* Card images - larger and properly sized */
	.solutions-section-cover .solutions-card-new .wp-block-image {
		width: 100%;
		max-width: 100%;
		margin: 0 auto 24px;
	}

	.solutions-section-cover .solutions-card-new .wp-block-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		border-radius: var(--wp--custom--border--rounded-small);
	}

	/* Card text content - centered and properly spaced */
	.solutions-section-cover .solutions-card-new .wp-block-group {
		padding: 0 16px;
		text-align: center;
	}

	/* Card headings - prevent awkward text wrapping */
	.solutions-section-cover .solutions-card-new h3.wp-block-heading {
		font-size: var(--wp--preset--font-size--x-large);
		line-height: 1.2;
		white-space: normal;
		word-break: normal;
		overflow-wrap: break-word;
		text-align: center;
	}

	/* Card separator - left aligned at all viewports (uses !important to override section separator rule) */
	.solutions-section-cover .solutions-card-new .wp-block-separator {
		margin-left: 0 !important;
		margin-right: auto !important;
		width: 150px;
	}

	/* Card description text - readable size */
	.solutions-section-cover .solutions-card-new p {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.5;
		text-align: center;
	}

	/* Read More link styling - uppercase with underline */
	.solutions-section-cover .solutions-card-new .solutions-read-more,
	.solutions-section-cover .solutions-card-new a,
	.solutions-section-cover .solutions-card-new p a,
	.solutions-section-cover .has-text-align-left a {
		display: inline-block;
		text-align: center;
		text-transform: uppercase !important;
		text-decoration: underline !important;
		text-underline-offset: 4px;
	}

	/* NOTE: .solutions-section-cover padding merged to line ~14392 */

	/* Operations single - solutions section no bottom padding */
	/* REQUIRED: !important to override inline styles from WP database content */
	body.single-operations .solutions-section-cover {
		padding-bottom: 0 !important;
	}

	/* Section heading - centered */
	.solutions-section-cover h2.wp-block-heading {
		text-align: center;
		font-size: clamp(28px, 7vw, 36px);
		line-height: 1.2;
		margin-bottom: 16px;
	}

	/* Section separator - centered - !important to ensure override */
	.solutions-section-cover .wp-block-separator,
	.solutions-section-cover .wp-block-separator.short-underline,
	.solutions-section-cover hr.wp-block-separator {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Extra small mobile - 375px refinements for solutions-section-cover */
@media (max-width: 375px) {

	.solutions-section-cover .is-style-kindling-grid-system {
		gap: 24px;
		padding: 0 12px;
	}

	.solutions-section-cover .solutions-card-new h3.wp-block-heading {
		font-size: var(--wp--custom--fontSize--xl);
	}

	.solutions-section-cover .solutions-card-new p {
		font-size: var(--wp--custom--fontSize--base-lg);
	}

	.solutions-section-cover {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

/* ==========================================================================
   FOOTER MOBILE LAYOUT FIX - 375px viewport
   LinkedIn icon + phone number horizontal, copyright below, hide privacy choices
   Footer uses is-style-kindling-grid-system flex layout (not columns)

   REQUIRED: !important declarations throughout this section override WordPress
   block inline styles for mobile footer grid transformation and element visibility.
   ========================================================================== */
@media (max-width: 480px) {

	/* Hide Privacy Choices button on mobile */
	/* REQUIRED: !important to override block editor styles */
	.privacy-choices-button,
	.ot-sdk-show-settings,
	[class*="privacy-choices"],
	button[id*="privacy"],
	footer .wp-block-button.privacy-choices-button,
	footer .wp-block-buttons:has(.privacy-choices-button) {
		display: none !important;
	}

	/* Footer last group - NOTE: flex layout overridden by grid at line ~22040 */

	/* LinkedIn icon - smaller size */
	footer .is-style-kindling-grid-system .wp-block-social-links.has-huge-icon-size {
		font-size: var(--wp--custom--fontSize--2xl) !important;
	}

	/* Phone number row (icon + phone) - keep horizontal */
	footer .is-style-kindling-grid-system .is-content-justification-right.is-nowrap {
		justify-content: flex-start !important;
		gap: 8px !important;
	}

	/* Phone icon - smaller */
	footer .is-style-kindling-grid-system .wp-block-outermost-icon-block .icon-container {
		width: 20px !important;
	}

	/* Phone number text - smaller */
	footer .is-style-kindling-grid-system .has-theme-04-color {
		font-size: var(--wp--preset--font-size--medium) !important;
	}

	/* NOTE: .has-global-padding flex layout removed - overridden by display: contents at line ~22010 */

	/* Make LinkedIn and phone row horizontal using grid */
	/* NOTE: gap set at ~21977 with 4px 10px */
	footer .is-style-kindling-grid-system>.wp-block-group.is-vertical {
		display: grid !important;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto auto;
		align-items: center !important;
	}

	/* LinkedIn - row 1, col 1 */
	footer .is-style-kindling-grid-system>.wp-block-group.is-vertical>.wp-block-social-links {
		grid-row: 1 !important;
		grid-column: 1 !important;
	}

	/* Phone group container - row 1, col 2 */
	footer .is-style-kindling-grid-system>.wp-block-group.is-vertical>.wp-block-group.has-global-padding {
		grid-row: 1 !important;
		grid-column: 2 !important;
		display: contents !important;
	}

	/* Phone number flex row - row 1, col 2 */
	footer .is-style-kindling-grid-system>.wp-block-group.is-vertical .is-content-justification-right.is-nowrap {
		grid-row: 1 !important;
		grid-column: 2 !important;
	}

	/* Copyright - row 2, spans both columns */
	footer .is-style-kindling-grid-system>.wp-block-group.is-vertical .has-text-align-right:not(.has-theme-04-color) {
		grid-row: 2 !important;
		grid-column: 1 / -1 !important;
		text-align: center !important;
		font-size: var(--wp--preset--font-size--small) !important;
		margin-top: 8px !important;
	}
}

/* Extra refinements for 375px specifically
   REQUIRED: !important declarations continue to override WP block inline styles
   for tighter spacing and smaller icons at extra-small mobile viewport. */
@media (max-width: 375px) {

	/* Ensure privacy choices stays hidden */
	.privacy-choices-button,
	footer .wp-block-button.privacy-choices-button,
	footer .wp-block-buttons:has(.privacy-choices-button) {
		display: none !important;
	}

	/* Tighter spacing */
	footer .is-style-kindling-grid-system>.wp-block-group.is-vertical {
		gap: 4px 10px !important;
	}

	/* Phone number smaller */
	footer .is-style-kindling-grid-system .has-theme-04-color {
		font-size: var(--wp--custom--fontSize--base-sm) !important;
	}

	/* LinkedIn icon smaller */
	footer .is-style-kindling-grid-system .wp-block-social-links.has-huge-icon-size {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}

	/* Phone icon smaller */
	footer .is-style-kindling-grid-system .wp-block-outermost-icon-block .icon-container {
		width: 16px !important;
	}
}

/* ==========================================================================
   MOBILE FOOTER OVERRIDES - Must be at end to override WP container classes

   REQUIRED: !important declarations override WP generated container classes
   (wp-container-core-*) and layout defaults for mobile footer alignment.
   NOTE: min-width: 431px excludes 430px mobile breakpoint which has different centering rules
   ========================================================================== */
@media (max-width: 781px) and (min-width: 431px) {

	/* Force left alignment on footer flex containers (EXCEPT buttons - those are centered) */
	footer.wp-block-template-part [class*="wp-container-core"]:not(.wp-block-buttons),
	footer.wp-block-template-part .is-layout-flex:not(.wp-block-buttons),
	footer.wp-block-template-part .wp-block-social-links,
	footer.wp-block-template-part .wp-block-group.is-vertical:not(:has(.wp-block-buttons)) {
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	/* Footer buttons - full width within container */
	footer.wp-block-template-part .wp-block-buttons,
	footer.wp-block-template-part .wp-block-buttons.is-vertical,
	footer.wp-block-template-part [class*="wp-container-core-buttons"] {
		justify-content: center !important;
		align-items: stretch !important;
		width: 100% !important;
	}

	/* Footer button wrappers and links - full width */
	footer.wp-block-template-part .wp-block-buttons .wp-block-button,
	footer.wp-block-template-part .wp-block-buttons .wp-block-button__link {
		width: 100% !important;
		text-align: center !important;
	}

	/* Left align the phone and copyright text */
	footer.wp-block-template-part .has-text-align-right {
		text-align: left !important;
	}

	/* Phone icon via CSS pseudo-element */
	/* REQUIRED: !important to override default link display and add phone icon pseudo-element */
	footer.wp-block-template-part a[href^="tel:"] {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px;
	}

	footer.wp-block-template-part a[href^="tel:"]::before {
		content: "";
		display: inline-block !important;
		width: 18px !important;
		height: 18px !important;
		flex-shrink: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fbd872' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
	}

	/* ==========================================================================
	   SERVICE AREAS PAGE - Map Section Mobile Fixes
	   1. Center the stats/text content above the map on mobile
	   2. Zoom in on the map to better show service area circles
	   ========================================================================== */

	/* Center the stats boxes container */
	.page-id-17 .service-areas-map-section .service-areas-counter-overlay>.wp-block-group.has-theme-02-background-color {
		justify-content: center;
		margin: 0 auto;
	}

	/* Center the description text below stats */
	.page-id-17 .service-areas-map-section .service-areas-counter-overlay>p {
		text-align: center;
		max-width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Note: Map container flex layout consolidated to line ~16230 */
	/* Note: Counter overlay order: -1 consolidated to line ~16238 */

	/* Map image stays below stats, show full map on mobile (no zoom/crop) */
	.page-id-17 .service-areas-map-section .service-areas-map-image {
		order: 1;
		margin: 0 0 24px 0;
		width: 100%;
	}

	.page-id-17 .service-areas-map-section .service-areas-map-image img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

/* NOTE: 480px map image rule removed - identical values cascade from 781px rule at line ~22125 */

/* ==========================================================================
   OPERATIONS PAGES - Mobile Fixes
   Date: 2025-12-31
   REQUIRED: !important declarations override WP Column/Image block inline
   styles for mobile padding, margins, full-width images, and form button sizing.
   ========================================================================== */

/* Operations mobile fixes - 430px and below */
@media (max-width: 430px) {

	/* Separator - reduce vertical margins */
	.single-operations .wp-block-separator {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}

	/* ------------------------------------------
	   Solutions Cards (Management/Maintenance/Repair) - 430px responsive
	   Reduced separator, centered, remove extra padding
	   ------------------------------------------ */
	/* Separator - 100px width, centered */
	.single-operations .solutions-card-new .wp-block-separator,
	.single-operations .solutions-card-new hr {
		width: 100px !important;
		max-width: 100px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 12px !important;
		margin-bottom: 16px !important;
	}

	/* Remove extra padding on text content area */
	.single-operations .solutions-card-new>.wp-block-group {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Heading - center aligned, proper sizing */
	.single-operations .solutions-card-new h3.wp-block-heading {
		text-align: center !important;
		font-size: 24px !important;
		line-height: 1.3 !important;
		letter-spacing: 0.72px !important;
	}

	/* Paragraph text - center aligned */
	.single-operations .solutions-card-new p {
		text-align: center !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	/* READ MORE link styling */
	.single-operations .solutions-card-new .solutions-read-more,
	.single-operations .solutions-card-new p a {
		font-size: var(--wp--preset--font-size--medium) !important;
		letter-spacing: 0.84px !important;
	}

	/* ------------------------------------------
	   Large BG Overlay (Blue) - 430px responsive
	   Background cover, reduced separator, centered
	   ------------------------------------------ */
	/* Background image must cover - use !important to override any constraints */
	.single-operations .large-bg-overlay-section.large-bg-overlay-blue {
		position: relative !important;
		overflow: hidden !important;
	}

	.single-operations .large-bg-overlay-section.large-bg-overlay-blue>.large-bg-overlay-image,
	.single-operations .large-bg-overlay-section.large-bg-overlay-blue>figure.wp-block-image.large-bg-overlay-image {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		z-index: 0 !important;
		margin: 0 !important;
	}

	.single-operations .large-bg-overlay-section.large-bg-overlay-blue>.large-bg-overlay-image img,
	.single-operations .large-bg-overlay-section.large-bg-overlay-blue>figure.wp-block-image.large-bg-overlay-image img {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	/* Separator - 100px width, centered */
	.single-operations .large-bg-overlay-blue .wp-block-separator,
	.single-operations .large-bg-overlay-blue hr {
		width: 100px;
		max-width: 100px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 12px;
		margin-bottom: 16px;
	}

	/* Remove padding on text content area */
	.single-operations .large-bg-overlay-blue .large-bg-overlay-content {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Content wrapper - ensure proper z-index */
	.single-operations .large-bg-overlay-blue .large-bg-overlay-content-wrapper {
		position: relative;
		z-index: 1;
	}

	/* Button - match other sections */
	.single-operations .large-bg-overlay-blue .wp-block-button__link {
		padding: 11px 24px;
		font-size: 14px;
		letter-spacing: 0.84px;
	}
}

/* Home hero - 70vh on small mobile (430px and below) */
@media (max-width: 430px) {

	.home-hero-carousel,
	body.home .hero-cover-section,
	body.home .wp-block-cover.hero-cover-section {
		min-height: 70vh !important;
		height: 70vh !important;
	}
}

/* Home gallery section - full width carousel at 430px */
@media (max-width: 430px) {

	/* Allow overflow so carousel can extend to edges */
	.home-gallery-section,
	.home-gallery-section .wp-block-cover__inner-container {
		overflow: visible !important;
	}

	/* Make carousel full width - break out of container using negative margins */
	.home-gallery-section .wp-block-kindling-carousel {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-1 * (100vw - 100%) / 2) !important;
		margin-right: calc(-1 * (100vw - 100%) / 2) !important;
	}

	/* Remove padding from carousel slides so images are edge-to-edge */
	.home-gallery-section .carousel-slide {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Ensure figure and image fill full width */
	.home-gallery-section .carousel-slide figure,
	.home-gallery-section .carousel-slide img {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Indicator dots - 30px margin-top */
	.home-gallery-section .splide__pagination {
		margin-top: 30px !important;
	}
}

/* Footer mobile - 430px centering overrides
   These rules override the 480px left-aligned layout to center items at 430px
   Uses higher specificity selectors to override 480px rules */
@media (max-width: 430px) {

	/* Override 480px left-align to center the main grid children */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-style-kindling-grid-system {
		align-items: center !important;
	}

	/* Center each grid child column */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-style-kindling-grid-system>.wp-block-group {
		align-items: center !important;
		align-self: center !important;
	}

	/* Award logos row - center the row AND the logos inside */
	/* Override 480px rule that uses direct child selector: > .wp-block-group */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-style-kindling-grid-system>.wp-block-group.is-content-justification-center {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-self: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-left: -30px !important;
	}

	/* Social links - center instead of left */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-social-links {
		align-self: center !important;
		margin-left: 0 !important;
		margin-right: auto !important;
		justify-content: center !important;
		margin-top: 15px;
	}

	/* Social link item - remove left margin from 480px */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-social-links .wp-social-link {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* LinkedIn and phone - make horizontal row and centered */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-style-kindling-grid-system>.wp-block-group.is-vertical {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 20px !important;
	}

	/* Phone link group - center */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-group.is-content-justification-right.is-nowrap {
		justify-content: center !important;
	}

	/* Policy links list - center instead of space-between */
	.wp-block-group.has-white-color.has-theme-02-background-color .wp-block-list {
		justify-content: center !important;
		gap: 20px !important;
	}

	/* Copyright text - centered */
	.wp-block-group.has-white-color.has-theme-02-background-color p.has-white-color {
		text-align: center !important;
	}
}

/* Operations mobile fixes - 781px and below */
@media (max-width: 781px) {

	/* Intro section - 30px margin below the intro image */
	.single-operations .operations-intro-image,
	.single-operations .wp-block-cover+.wp-block-group .wp-block-image:first-child,
	.single-operations .operations-intro-section .wp-block-image {
		margin-bottom: 30px !important;
	}

	/* Text sections - 15px padding left/right */
	.single-operations .page-intro-section .wp-block-columns>.wp-block-column:last-child,
	.single-operations .page-intro-section .wp-block-column .wp-block-group,
	.single-operations .operations-intro-section,
	.single-operations .operations-text-section,
	.single-operations .operations-contact-section .wp-block-column:first-child {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Image Quad / Our Solutions cards - 30px margin-bottom on each card */
	.single-operations .solutions-card-new,
	.single-operations .our-solutions-section .wp-block-column {
		margin-bottom: 30px !important;
	}

	/* Leadership Team - images full width edge-to-edge on mobile */
	.single-operations .leadership-section .team-member-card,
	.single-operations .leadership-section .wp-block-column,
	.single-operations .leadership-grid .wp-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Breakout technique for full-width edge-to-edge images */
	.single-operations .leadership-section .team-member-card__photo-wrapper,
	.single-operations .leadership-section figure.wp-block-image,
	.single-operations .leadership-grid figure.wp-block-image {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
	}

	.single-operations .leadership-section .team-member-card__photo-wrapper img,
	.single-operations .leadership-section figure.wp-block-image img,
	.single-operations .leadership-grid figure.wp-block-image img,
	.single-operations .leadership-grid img {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Form + Image section - image full width */
	.single-operations .partner-contact-section .partner-contact-image-column,
	.single-operations .partner-contact-section .contact-image-column,
	.single-operations .operations-contact-section .wp-block-column:last-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.single-operations .partner-contact-section .partner-contact-image-column img,
	.single-operations .partner-contact-section .contact-image-column img,
	.single-operations .operations-contact-section .wp-block-column:last-child img {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ============================================
	   OPERATIONS CPT - Mobile Submit Button Size Reduction
	   30% reduction - REQUIRED: !important for Gravity Forms
	   ============================================ */
	.single-operations .operations-contact-section .gform_wrapper .gform_button,
	.single-operations .operations-contact-section .gform_wrapper input[type="submit"],
	.single-operations .operations-contact-section .gform_wrapper .gform_footer input[type="submit"] {
		/* 30% reduction from desktop values (24px -> 17px, 261px -> 183px) */
		font-size: var(--wp--custom--fontSize--md-sm) !important;
		padding: 5px 13px !important;
		width: auto !important;
		min-width: 183px !important;
		line-height: 22px !important;
		letter-spacing: 1px !important;
		border-radius: var(--wp--custom--border--rounded-lg-xl) !important;
	}

	/* ==========================================================================
	   INTRO SECTION IMAGES - Mobile Full Width + Margin Bottom
	   Applies to all Hero Page intro patterns on mobile
	   REQUIRED: !important to override WP Column and Image block inline styles
	   ========================================================================== */

	/* Intro section images - full viewport width - remove column padding */
	.about-intro-section .wp-block-columns>.wp-block-column:first-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child,
	.service-areas-section .wp-block-columns>.wp-block-column:first-child,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child,
	.page-intro-section .wp-block-columns>.wp-block-column:first-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Image container - full width breakout + 30px margin-bottom */
	.about-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
	.service-areas-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image,
	.page-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
		margin-bottom: 30px !important;
	}

	/* Image itself - full width */
	.about-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.service-areas-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img,
	.page-intro-section .wp-block-columns>.wp-block-column:first-child .wp-block-image img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
}

/* ==========================================================================
   OPERATIONS CPT - Dropdown Z-Index Fix
   Fix navigation dropdown being hidden behind hero cover on desktop
   ========================================================================== */

/* Ensure the navigation submenu dropdown appears above the hero cover */
.single-operations .wp-block-navigation__submenu-container {
	z-index: 100002 !important;
}

/* Note: .single-operations .operations-hero z-index rules consolidated to line ~21028 */

/* Ensure the navigation block itself has high z-index */
.single-operations nav.wp-block-navigation.hero-navigation-block {
	z-index: 100001 !important;
}

/* Ensure header stays above hero */
/* REQUIRED: !important to override WP template part default z-index for proper stacking above hero */
.single-operations header.wp-block-template-part {
	z-index: 100000 !important;
	position: relative;
}

/* ==========================================================================
   OPERATIONS CPT - Large Map Position Right
   Move the map to the right side/edge of viewport
   ========================================================================== */

/* Operations CPT - Map image positioned to the right edge */
/* REQUIRED: !important to override WP Image block default positioning for right-edge map placement */
.single-operations .operations-map-section .operations-map-image {}

/* Ensure map container allows absolute positioning */
/* Reduced from 800px after removing Leadership Team pattern */
/* REQUIRED: !important to override WP Group block default positioning for map container */
.single-operations .operations-map-section .operations-map-container {
	position: relative !important;
	min-height: 400px !important;
}

@media screen and (min-width: 768px) {

	/* Operations map section - allow overflow for right-positioned map */
	/* REQUIRED: !important to override WP section default overflow for right-edge map positioning */
	/* Also sets padding-bottom (reduced after removing Leadership Team pattern) */
	/* z-index: 1 establishes stacking context so contact section (z-index: 2) sits above */
	.single-operations .operations-map-section {
		overflow: visible !important;
		padding-bottom: 80px !important;
		position: relative !important;
		z-index: 1 !important;
	}
}


/* Operations Contact Section - z-index to sit above overflowing map */
/* REQUIRED: !important to override WP default stacking for proper layering above map overflow */
/* Using multiple selectors for redundancy in case body class isn't available */
.single-operations .partner-contact-section,
.single-operations .form-image-section,
.operations-map-section+.partner-contact-section,
.operations-map-section+.form-image-section,
.has-droplet-bg.partner-contact-section,
.has-droplet-bg.form-image-section {
	position: relative !important;
	z-index: 2 !important;
}

/* ==========================================================================
   OPERATIONS CPT - Hide Map Disclaimer
   Remove the disclaimer text from Operations CPTs only
   ========================================================================== */

/* Hide only the disclaimer paragraph on Operations CPT pages (direct child of section) */
/* Do NOT hide the description inside .operations-map-text-content */
/* REQUIRED: !important to override WP paragraph display for hiding disclaimer on Operations pages */
.single-operations .operations-map-section>p.has-text-align-center {
	display: none !important;
}

/* ==========================================================================
   OPERATIONS CPT - Desktop Carousel Flush Left
   Remove margin-left on carousel to make it flush with viewport edge
   REQUIRED: !important to override Kindling carousel default margin for flush-left positioning
   ========================================================================== */
@media (min-width: 1024px) {

	.single-operations .carousel-text-section .wp-block-kindling-carousel,
	.single-operations .carousel-text-section .kindling-carousel-container {
		margin-left: 0 !important;
	}
}

/* ==========================================================================
   OPERATIONS CPT - Carousel Dots Centered on Track
   Dots container matches track width so dots center under images
   Note: High specificity to override Splide's default styles
   REQUIRED: !important to override Splide library default pagination positioning
   ========================================================================== */
.single-operations .carousel-text-section .splide.kindling-carousel-container .splide__pagination.splide__pagination--ltr {
	width: calc(100% - 60px) !important;
	left: 0 !important;
	right: auto !important;
}

/* ==========================================================================
   OPERATIONS CPT - Mobile Map Fix (must come AFTER desktop rules above)
   Reset absolute positioning to allow normal stacking at mobile viewports
   REQUIRED: !important to override desktop absolute positioning and restore mobile-friendly stacked layout
   ========================================================================== */
@media (max-width: 781px) {

	/* Merged: reset positioning + 30px edge margins + order/text alignment
	   REQUIRED: !important to override desktop absolute positioning and restore mobile-friendly stacked layout */
	.single-operations .operations-map-section .operations-map-image {
		position: static !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		display: flex !important;
		justify-content: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		order: 1 !important;
		margin-bottom: 0 !important;
		text-align: center !important;
	}

	/* Map image - full width on mobile */
	.single-operations .operations-map-section .operations-map-image img {
		width: 170% !important;
		margin-left: -170px;
		position: relative;
		max-width: none !important;
		height: auto !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	.single-operations .operations-map-section .operations-map-container {
		min-height: auto !important;
	}

	/* NOTE: .operations-map-section padding/overflow merged to line ~18173 */

	/* Operations map text - 30px edge padding */
	.single-operations .operations-map-section .operations-map-text-content {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	/* Operations carousel+text section - carousel flush left, text has right padding */
	/* Note: Section has inline padding:0 from DB, so target columns instead */
	.single-operations .carousel-text-section .wp-block-columns {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Text column (second column) - apply edge padding for readability */
	.single-operations .carousel-text-section .wp-block-columns>.wp-block-column:last-child {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* Mobile: Carousel dots match track width (100vw) since track fills viewport at mobile */
	/* The parent .splide is wider (415px) due to container overflow, but track is exactly viewport width */
	.single-operations .carousel-text-section .splide.kindling-carousel-container .splide__pagination.splide__pagination--ltr {
		width: 100vw !important;
		right: auto !important;
	}

	/* Operations map separator - left-align with heading */
	.single-operations .operations-map-section .wp-block-separator,
	.single-operations .operations-map-section hr {
		margin-left: 0 !important;
	}

	/* Image Quad (facility grid) - separator 30px margin-bottom */
	.single-operations .service-areas-facility-grid .wp-block-separator,
	.single-operations .service-areas-facility-grid hr {
		margin-bottom: 30px !important;
	}

}

/* ==========================================================================
   ABOUT US - Timeline Duplicate Fix
   Hide the pattern-timeline carousel on mobile/tablet to prevent duplicate
   timeline display. Keep only the horizontal company-timeline.
   REQUIRED: !important to override pattern block display for duplicate prevention.
   ========================================================================== */

/* Hide duplicate pattern-timeline carousel on tablet and mobile */
@media (max-width: 1024px) {
	.page-id-13 .pattern-timeline {
		display: none !important;
	}
}

/* Note: .company-timeline-section z-index merged into main declaration above */
/* Note: .company-timeline .timeline-track z-index already in main declaration */
/* Note: .company-timeline .timeline-items z-index merged to line 722 */

/* ==========================================================================
   Intro Pattern - Hide image on mobile
   REQUIRED: !important to override WP Column/Image block display for mobile
   content simplification (hide hero images, duplicate carousels, reduce separators).
   ========================================================================== */
@media (max-width: 781px) {

	/* REMOVED: Single Operations hero carousel dots - hidden per design decision */
	.single-operations body:has(.hero-cover-section) .hero-carousel-dots,
	body.single-operations:has(.hero-cover-section) .hero-carousel-dots {
		display: none !important;
		/* Red dots removed */
	}

	/* Hide the image column in all intro sections on mobile */
	/* NOTE: service-areas-intro-section excluded - it has text first, carousel second (opposite layout) */
	.about-intro-section .wp-block-columns>.wp-block-column:first-child,
	.solutions-intro-section .wp-block-columns>.wp-block-column:first-child,
	.partner-intro-section .wp-block-columns>.wp-block-column:first-child,
	.operations-intro-section .wp-block-columns>.wp-block-column:first-child,
	.lifeguard-intro-section .wp-block-columns>.wp-block-column:first-child,
	.page-intro-section .wp-block-columns>.wp-block-column:first-child,
	.page-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child,
	.operations-intro-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:first-child {
		display: none !important;
	}

	.page-intro-section .is-style-kindling-grid-system.wp-container-core-group-is-layout-38152dc2>.wp-block-kindling-grid-item:first-child {
		display: block !important;
	}

	/* service-areas-intro-section: Hide the carousel (last column), keep text (first column) visible */
	.service-areas-section .wp-block-columns>.wp-block-column:last-child {
		display: none !important;
	}

	/* Image Quad - reduce separator margin-bottom from 72px to 36px on mobile */
	.service-areas-facility-grid .wp-block-separator {
		margin-bottom: 36px !important;
	}
}

/* ==========================================================================
   TABLET LAYOUT & SPACING FIXES (768px - 1023px)
   Footer centering, accordion spacing, button consistency, heading optimization
   REQUIRED: !important declarations override WP block inline styles and competing
   mobile media query rules for tablet-specific layout, sizing, and alignment.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

	/* Footer award badges - center alignment
	   REQUIRED: !important to override mobile flex-start rules from line 15351 */
	.wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex:has(> .wp-block-image) {
		justify-content: center !important;
	}

	/* Footer award images - prevent flex grow and full-width to allow centering */
	.wp-block-group.has-theme-02-background-color:not(.solutions-section):not(.image-accordion-section) .wp-block-image {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 120px !important;
	}

	/* Footer CTA buttons - consistent max-width */
	footer .wp-block-buttons .wp-block-button,
	footer .footer-button-careers,
	footer .footer-button-connect {
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Our Solutions accordion section spacing */
	.image-accordion-section+.image-accordion-section {
		margin-top: 24px;
	}

	/* Operations quote heading size optimization */
	/* REQUIRED: !important to override max-width:781px mobile rules that also apply at 768px */
	.single-operations .has-theme-06-background-color h2.wp-block-heading,
	.single-operations h2.wp-block-heading[style*="font-style:italic"],
	.single-operations .wp-block-cover h2.wp-block-heading {
		font-size: clamp(28px, 5vw, 36px) !important;
		line-height: 1.2 !important;
	}

	/* Operations Map Section - Tablet layout (text above, map below centered) */
	.single-operations .operations-map-section {
		padding-bottom: 40px !important;
	}

	.single-operations .operations-map-section .operations-map-container {
		display: flex !important;
		flex-direction: column !important;
		min-height: auto !important;
	}

	/* Text content - left aligned, full width */
	.single-operations .operations-map-section .operations-map-text-content {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 30px !important;
		margin-bottom: 32px !important;
		text-align: left !important;
	}

	.single-operations .operations-map-section .operations-map-text-content h2,
	.single-operations .operations-map-section .operations-map-text-content p {
		text-align: left !important;
	}

	/* Map image - centered and full width */
	.single-operations .operations-map-section .operations-map-image {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		margin: 0 auto !important;
	}

	.single-operations .operations-map-section .operations-map-image img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* Operations Map - remove edge margins on tablet for full-width map */
	.single-operations .operations-map-section .operations-map-image {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}
}

/* ==========================================================================
   About Us - Safety at a Glance Stats Section
   ========================================================================== */

/* Center the heading and separator group */
.about-stats-section>.wp-block-group:first-child {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Center the separator and fix height
   REQUIRED: !important needed to override WP-generated container class (wp-container-content-*)
   which applies flexSize from block JSON as height */
.about-stats-section .wp-block-separator {
	margin-left: auto;
	margin-right: auto;
	width: 224px;
	height: 4px !important;
	min-height: 4px !important;
	max-height: 4px !important;
}

/* Disclaimer text - ensure single line at large viewports */
.about-stats-disclaimer {
	white-space: nowrap;
	max-width: 100%;
}

/* Responsive: Allow disclaimer to wrap on smaller screens */
@media (max-width: 1200px) {
	.about-stats-disclaimer {
		white-space: normal;
	}
}

/* ==========================================================================
   Salesforce Web-to-Case Forms
   Styling to match existing Gravity Forms appearance
   ========================================================================== */
.salesforce-web-to-case {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.salesforce-web-to-case .form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.salesforce-web-to-case label {
	font-size: var(--wp--custom--fontSize--base-sm);
	font-weight: 600;
	color: var(--wp--preset--color--theme-06);
	font-family: var(--wp--preset--font-family--inter);
}

.salesforce-web-to-case input[type="text"],
.salesforce-web-to-case input[type="email"],
.salesforce-web-to-case input[type="tel"],
.salesforce-web-to-case select,
.salesforce-web-to-case textarea {
	min-height: 44px;
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	border: 1px solid #d1d5db;
	border-radius: var(--wp--custom--border--rounded-small);
	background-color: var(--wp--preset--color--white);
	color: #1f2937;
	font-family: var(--wp--preset--font-family--inter);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
	box-sizing: border-box;
}

.salesforce-web-to-case input:focus,
.salesforce-web-to-case select:focus,
.salesforce-web-to-case textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--theme-02);
	box-shadow: 0 0 0 3px rgba(26, 78, 162, 0.1);
}

.salesforce-web-to-case textarea {
	min-height: 120px;
	resize: vertical;
}

.salesforce-web-to-case select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234E4B48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	cursor: pointer;
}

.salesforce-web-to-case .form-submit {
	margin-top: 4px;
}

.salesforce-web-to-case input[type="submit"] {
	display: inline-flex;
	width: auto;
	min-width: 180px;
	padding: 12px 32px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	border-radius: var(--wp--custom--border--rounded-small);
	border: none;
	cursor: pointer;
	text-align: center;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--theme-02);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	text-transform: none;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.salesforce-web-to-case input[type="submit"]:hover {
	background-color: #153a7a;
	transform: translateY(-1px);
}

.salesforce-web-to-case input[type="submit"]:active {
	transform: translateY(0);
}

/* Validation styling for required fields */
.salesforce-web-to-case input:invalid:not(:placeholder-shown),
.salesforce-web-to-case select:invalid,
.salesforce-web-to-case textarea:invalid:not(:placeholder-shown) {
	border-color: var(--wp--preset--color--theme-05);
}

/* ==========================================================================
   Salesforce Forms (New Pattern-based Forms)
   Used by kindling/salesforce-partner-form and kindling/salesforce-operations-form
   ========================================================================== */
.salesforce-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 600px;
	width: 100%;
}

/* Partner form - 40px gap between inputs */
.salesforce-form.partner-form {
	gap: 40px;
}

.salesforce-form .form-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.salesforce-form .form-row-half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.salesforce-form .form-field {
	display: flex;
	flex-direction: column;
}

.salesforce-form input[type="text"],
.salesforce-form input[type="email"],
.salesforce-form input[type="tel"],
.salesforce-form select,
.salesforce-form textarea {
	min-height: 48px;
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	border: 1px solid #d1d5db;
	border-radius: var(--wp--custom--border--rounded-small, 8px);
	background-color: var(--wp--preset--color--white, #fff);
	color: #1f2937;
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
	box-sizing: border-box;
}

.salesforce-form input::placeholder,
.salesforce-form textarea::placeholder {
	color: #4E4B48 !important;
	opacity: 1 !important;
}

.salesforce-form input::-webkit-input-placeholder,
.salesforce-form textarea::-webkit-input-placeholder {
	color: #4E4B48 !important;
	opacity: 1 !important;
}

.salesforce-form input::-moz-placeholder,
.salesforce-form textarea::-moz-placeholder {
	color: #4E4B48 !important;
	opacity: 1 !important;
}

.salesforce-form input:-ms-input-placeholder,
.salesforce-form textarea:-ms-input-placeholder {
	color: #4E4B48 !important;
	opacity: 1 !important;
}

.salesforce-form input:focus,
.salesforce-form select:focus,
.salesforce-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--theme-02, #1a4ea2);
	box-shadow: 0 0 0 3px rgba(26, 78, 162, 0.1);
}

.salesforce-form textarea {
	min-height: 120px;
	resize: vertical;
}

.salesforce-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234E4B48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
	color: #9ca3af;
}

.salesforce-form select:valid {
	color: #1f2937;
}

.salesforce-form select option {
	color: #1f2937;
}

.salesforce-form select option[value=""] {
	color: #9ca3af;
}

.salesforce-form .form-submit {
	margin-top: 8px;
}

.salesforce-form button[type="submit"] {
	display: inline-flex;
	width: 100%;
	max-width: 261px;
	padding: 7px 19px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5;
	border-radius: 54px;
	border: 2px solid var(--wp--preset--color--theme-02, #1a4ea2);
	cursor: pointer;
	text-align: center;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--theme-02, #1a4ea2);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	text-transform: uppercase;
	letter-spacing: 1.44px;
	transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
}

.salesforce-form button[type="submit"]:hover {
	background-color: var(--wp--preset--color--theme-04) !important;
	color: var(--wp--preset--color--theme-02) !important;
	border-color: var(--wp--preset--color--theme-04);
	transform: translateY(-1px);
}

.salesforce-form button[type="submit"]:active {
	transform: translateY(0);
}

/* Validation styling for required fields */
.salesforce-form input:invalid:not(:placeholder-shown),
.salesforce-form select:invalid,
.salesforce-form textarea:invalid:not(:placeholder-shown) {
	border-color: var(--wp--preset--color--theme-05, #d22730);
}

/* Mobile responsive - stack half rows on small screens */
@media (max-width: 600px) {
	.salesforce-form .form-row-half {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   TABLET MARKUP.IO FIXES (768px)
   Fixes for issues identified in markup.io January 2026 tablet review
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

	/* #152 - About Us: Safety at a Glance stats being cut off on right
	   Stats section needs horizontal scroll or wrapping to show all 4 stats */
	.about-stats-section .wp-block-columns,
	.safety-stats-section .wp-block-columns {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
	}

	.about-stats-section .wp-block-column,
	.safety-stats-section .wp-block-column {
		flex: 0 0 calc(50% - 12px);
		min-width: 140px;
	}

	/* About Us stats - larger numbers at tablet viewport (768-1023px) */
	/* Higher specificity needed to override .is-style-section-2 rules */
	.about-stats-section.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-number,
	.about-stats-section.is-style-section-2 .wp-block-kindling-metric-counter .metric-counter-suffix {
		font-size: 68px !important;
		font-weight: 800 !important;
		line-height: 75px !important;
		color: var(--wp--preset--color--theme-01) !important;
		text-align: center;
		text-transform: uppercase;
	}

	/* #153 - About Us: Timeline "2005" cut off on left
	   Increase left padding on timeline container to show full year */
	.company-timeline {
		padding-left: 40px;
	}

	.company-timeline-section {
		padding-left: 40px !important;
	}

	/* #150 - Footer: Phone icon not aligned with phone number text
	   Ensure icon and text are inline together */
	.footer-phone-container,
	.site-footer .wp-block-group:has(.wp-block-outermost-icon-block) {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.site-footer .wp-block-outermost-icon-block {
		flex-shrink: 0;
	}

	/* Footer phone wrapper - ensure inline layout */
	body .wp-block-group.has-theme-02-background-color .wp-block-group.is-layout-flex:has(.wp-block-outermost-icon-block) {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	/* #151 - About Us: Adjust padding in Project Zero section
	   Reduce excessive whitespace between carousel and Safety at a Glance */
	.page-id-13 .project-zero-section,
	.page-id-13 .carousel-text-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	/* Reduce carousel fixed height at tablet to prevent large empty space */
	.page-id-13 .project-zero-carousel .carousel-slides {
		height: auto;
		min-height: 350px;
		max-height: 450px;
	}

	.page-id-13 .project-zero-carousel .carousel-slide {
		position: relative;
		height: auto;
	}

	.page-id-13 .project-zero-carousel .carousel-slide:not(.is-active) {
		display: none;
	}

	.page-id-13 .project-zero-carousel .carousel-slide.is-active {
		display: block;
	}

	.page-id-13 .project-zero-carousel .carousel-slide img {
		width: 100%;
		height: auto;
		min-height: 350px;
		max-height: 450px;
		object-fit: cover;
	}

	/* Project Zero carousel dots - reduce margin-top */
	.page-id-13 .project-zero-carousel-dots {
		margin-top: 24px;
	}

	/* Stack columns vertically with reduced spacing */
	.page-id-13 .carousel-text-section .wp-block-columns {
		flex-direction: column;
		gap: 32px;
	}

	.page-id-13 .carousel-text-section .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	/* #156 - Partner With Us: "THE VALUE OF PARTNERSHIP" heading too small
	   h2 with headline-large style should be larger than h3 headings (28px) */
	h2.wp-block-heading.is-style-type-style-headline-large {
		font-size: 36px !important;
	}

	/* Footer tablet fixes */
	/* Make Careers and Let's Connect buttons horizontal */
	footer .wp-block-buttons.is-vertical,
	[role="contentinfo"] .wp-block-buttons.is-vertical {
		flex-direction: row;
		gap: 16px;
		justify-content: center;
	}

	/* Hide the standalone white phone icon - keep only the one with phone number */
	footer .wp-block-outermost-icon-block,
	[role="contentinfo"] .wp-block-outermost-icon-block {
		display: none;
	}

	/* Center the LinkedIn, phone number, and copyright section */
	/* Target groups with right justification class and override WordPress container styles */
	footer .wp-block-group.is-vertical,
	footer .wp-block-group.is-content-justification-right,
	footer .wp-block-group.is-layout-flex.is-content-justification-right,
	[role="contentinfo"] .wp-block-group.is-vertical,
	[role="contentinfo"] .wp-block-group.is-content-justification-right,
	[role="contentinfo"] .wp-block-group.is-layout-flex.is-content-justification-right {
		align-items: center !important;
		justify-content: center !important;
		width: 100%;
	}

	/* Center phone number text - override has-text-align-right */
	footer .wp-block-group p,
	footer .wp-block-group p.has-text-align-right,
	[role="contentinfo"] .wp-block-group p,
	[role="contentinfo"] .wp-block-group p.has-text-align-right {
		text-align: center !important;
	}

	/* Center the social links - override WordPress container styles */
	footer .wp-block-social-links,
	footer .wp-block-social-links.is-content-justification-right,
	footer .wp-block-social-links.is-layout-flex,
	footer .wp-block-social-links.wp-block-social-links-is-layout-flex,
	footer .wp-block-social-links[class*="wp-container-core-social-links"],
	[role="contentinfo"] .wp-block-social-links,
	[role="contentinfo"] .wp-block-social-links.is-content-justification-right,
	[role="contentinfo"] .wp-block-social-links.is-layout-flex,
	[role="contentinfo"] .wp-block-social-links.wp-block-social-links-is-layout-flex,
	[role="contentinfo"] .wp-block-social-links[class*="wp-container-core-social-links"] {
		justify-content: center !important;
		align-items: center !important;
		width: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Center the last column group that contains LinkedIn/phone/copyright */
	/* Force vertical stacking and center alignment */
	footer .wp-block-column:last-child .wp-block-group,
	footer .wp-block-group.wp-block-group-is-layout-flex,
	footer .wp-block-group.is-vertical,
	[role="contentinfo"] .wp-block-column:last-child .wp-block-group,
	[role="contentinfo"] .wp-block-group.wp-block-group-is-layout-flex,
	[role="contentinfo"] .wp-block-group.is-vertical {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Ensure inner groups in footer also center */
	footer .wp-block-group .wp-block-group,
	[role="contentinfo"] .wp-block-group .wp-block-group {
		align-items: center !important;
	}

	/* Make footer links horizontal instead of stacked */
	footer .wp-block-list.is-style-no-bullets,
	[role="contentinfo"] .wp-block-list.is-style-no-bullets {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: center;
	}

	footer .wp-block-list.is-style-no-bullets li,
	[role="contentinfo"] .wp-block-list.is-style-no-bullets li {
		margin: 0;
	}

	/* Footer award logos - make horizontal at tablet */
	footer .wp-block-group.is-content-justification-center.is-layout-flex,
	[role="contentinfo"] .wp-block-group.is-content-justification-center.is-layout-flex {
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: 24px;
	}
}

/* #153 continued - Timeline fix also applies at mobile max-width: 781px */
@media (max-width: 781px) {

	/* Increase left padding on timeline to prevent "2005" cutoff */
	.company-timeline {
		padding-left: 40px;
		scroll-padding-left: 40px;
	}

	.company-timeline-section {
		padding-left: 40px !important;
	}

	/* Adjust header padding to match */
	body .company-timeline-section .wp-block-columns.alignwide {
		padding-left: 0;
	}
}

/* ==========================================================================
   Mobile Read More Links - Underline for Consistency
   Task #38: "The Read More's should be underlined for consistency throughout mobile"
   Targets standalone text links (not buttons) that function as Read More links
   ========================================================================== */
@media (max-width: 768px) {

	/* Intro section (Your Pool is Our Priority) Read More link */
	body.home .has-texture-bg>.wp-block-group a:not(.wp-block-button__link),
	body.home .has-texture-bg .wp-block-columns a:not(.wp-block-button__link) {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* Service Areas Read More link (not the list items) */
	body.home .service-areas-section>.wp-block-group>a:not(.wp-block-button__link),
	body.home .service-areas-section .wp-block-cover__inner-container>a:not(.wp-block-button__link) {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* Become a Lifeguard & Partner With Us CTA Read More links */
	body.home .wp-block-cover .wp-block-column a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* ==========================================================================
   Mobile Headline Size Consistency
   Task #37: "Your Pool is Our Priority" should match "Our Solutions" size
   REQUIRED: !important to override inline clamp() style from WP database
   ========================================================================== */
@media (max-width: 768px) {

	/* Tablet: Intro section heading */
	body.home .has-texture-bg h2.wp-block-heading {
		font-size: 35px !important;
		line-height: 1.2 !important;
		margin-bottom: 15px !important;
	}
}



/* ==========================================================================
   Task #47: Aquatics Pool Borders on Mobile - Our Solutions Page
   Shows pool tile decoration below accordion images on mobile
   REQUIRED: !important to override display:none from mobile reset rules
   ========================================================================== */
@media (max-width: 767px) {

	/* Show the pool border pseudo-element on mobile */
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg::before,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right::before {
		display: block !important;
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 93%;
		width: 100%;
		height: 15px;
		background: url(/wp-content/uploads/2025/12/pool-bg.png) center / cover no-repeat;
		z-index: 2;
	}

	/* Add margin below image to make space for the pool border */
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg .wp-block-image,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right .wp-block-image {
		margin-bottom: 20px !important;
		position: relative;
		z-index: 1;
	}

	/* Ensure the grid item has relative positioning for the pseudo-element */
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right {
		position: relative;
		overflow: visible;
		z-index: 1;
	}

	@media screen and (min-width: 768px) {

		/* Add margin-top to the text section that follows the image to reveal the pool border */
		/* The pool border extends 40px below the image (20px offset + some visible overlap) */
		.page-id-15 .image-accordion-section .is-style-kindling-grid-system>.wp-block-kindling-grid-item:not(.has-offset-pool-bg):not(.has-offset-pool-bg-right) {
			margin-top: 40px !important;
		}
	}

	/* Task #46: Fix accordion arrow overlap with text on mobile */
	/* Arrow is 26px wide, need minimum 30px padding-right to prevent overlap */
	.page-id-15 .solutions-accordion h3.wp-block-heading,
	.page-id-15 .solutions-accordion .accordion-item {
		padding-right: 35px !important;
	}

	/* Ensure text doesn't overflow into arrow space */
	.page-id-15 .solutions-accordion h3.wp-block-heading {
		max-width: calc(100% - 35px);
	}
}

/* ==========================================================================
   Task #24: Partner With Us - Fix intro copy color to match site standard
   ========================================================================== */
/* The intro body paragraphs use black (#000) but should use theme-06 (#4E4B48)
   to match the form section intro and maintain consistency across the site */
.page-id-21 .page-intro-section .wp-block-column p:not(.eyebrow-text) {
	color: var(--wp--preset--color--theme-06);
}

/* ==========================================================================
   Task #19: Service Areas - Fix water background pattern break
   ========================================================================== */
/* Make water ripple background continuous across both sections by using
   background-attachment: fixed so the pattern doesn't restart in each section */
.page-id-17 .has-water-ripple-bg::before {
	background-attachment: fixed;
}

/* ==========================================================================
   Task #20: Service Areas - Fix map section copy size to match body copy
   ========================================================================== */
/* REQUIRED: Override inline style from WordPress database content - The "For more
   than 40 years..." text has inline clamp(14px-16px) but should match intro text
   at 22px. Using !important because inline styles have highest specificity. */
.page-id-17 .service-areas-counter-overlay>p.has-theme-06-color {
	font-size: clamp(14.642px, 0.915rem + ((1vw - 4.25px) * 0.725), 22px) !important;
	line-height: 1.45 !important;
}


/* ==========================================================================
   Task #22: Service Areas - Reduce empty space between sections
   ========================================================================== */
/* Tighten the gap between facility grid and map section by reducing padding.
   Both sections have ~112px padding which creates too much whitespace. */
.page-id-17 .service-areas-facility-grid {
	padding-bottom: 48px !important;
}

@media screen and (min-width: 768px) {
	.page-id-17 .service-areas-facility-grid {
		padding-bottom: 160px !important;
	}
}

.page-id-17 .service-areas-map-section {
	padding-top: 48px !important;
}

/* ==========================================================================
   Operations Pages - Body Copy Styling Fixes
   ========================================================================== */
@media screen and (min-width: 768px) {

	/* Communities We Serve section - Update paragraph text to standard body copy
   REQUIRED: Override inline style from synced pattern (16px -> 20px, theme-06 -> #000) */
	.single-operations .operations-map-section .operations-map-text-content p,
	.operations-map-section .operations-map-text-content p {
		font-family: var(--wp--preset--font-family--inter) !important;
		font-size: var(--wp--preset--font-size--large) !important;
		font-weight: 400 !important;
		line-height: 30px !important;
		color: #000 !important;
	}
}

/* Let's Connect section - Update intro paragraph to standard body copy
   REQUIRED: Override inline style from page content (theme-06 -> #000) */
.single-operations .operations-contact-section .wp-block-group>p.has-theme-06-color,
.operations-contact-section .wp-block-group>p.has-theme-06-color {
	color: #000 !important;
}

/* ==========================================================================
   Operations Pages - Phone Number Styling
   ========================================================================== */

/* Phone number above Let's Connect heading */
.operations-phone-wrapper {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 24px;
}

.operations-phone-icon {
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--theme-02);
	fill: var(--wp--preset--color--theme-02);
	flex-shrink: 0;
	position: relative;
	top: 4px;
}

.operations-phone-number {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(16px, 0.875rem + ((1vw - 4.25px) * 0.591), 20px);
	font-weight: 400;
	line-height: 30px;
	margin: 0;
	text-align: left;
}

.operations-phone-number a {
	color: var(--wp--preset--color--theme-02);
	text-decoration: none;
	transition: color 0.2s ease;
}

.operations-phone-number a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Operations Pages - Salesforce Form Select Dropdown Styling
   ========================================================================== */

/* "Get In Touch For" dropdown - match input field styling */
.salesforce-form.operations-form select,
.operations-contact-section .salesforce-form select {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	line-height: 30px;
	color: #4e4b48;
	background-color: transparent;
	border: none;
	border-bottom: 3px solid #4e4b48;
	border-radius: 0;
	padding: 12px 30px 12px 0;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234e4b48' d='M6 8.825L1.175 4 2.35 2.825 6 6.475l3.65-3.65L10.825 4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	cursor: pointer;
}

.salesforce-form.operations-form select:focus,
.operations-contact-section .salesforce-form select:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--theme-02);
}

.salesforce-form.operations-form select option,
.operations-contact-section .salesforce-form select option {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	color: #4e4b48;
}

/* Operations Form - 40px gaps between form rows */
.salesforce-form.operations-form .form-row,
.operations-contact-section .salesforce-form .form-row {
	margin-bottom: 40px;
}

.salesforce-form.operations-form .form-row:last-child,
.operations-contact-section .salesforce-form .form-row:last-child,
.salesforce-form.operations-form .form-submit,
.operations-contact-section .salesforce-form .form-submit {
	margin-bottom: 0;
}

/* ==========================================================================
   Legal Pages - Accessibility, Privacy Policy, Terms of Use
   Figma Reference: node-id=69-780
   ========================================================================== */

/* Legal page body copy - Inter 20px, line-height 30px, black */
.accessibility-page p,
body.page-template-default.page-id-3 .wp-block-group p,
body.page-template-default.page-id-811 .wp-block-group p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 30px;
	color: #000;
}

/* Legal page section headings (h2.h3 nested in paragraphs) */
/* Privacy Policy and Terms of Use use <h2 class="h3"> inside <p> tags */
body.page-template-default.page-id-3 h2.h3,
body.page-template-default.page-id-811 h2.h3 {
	font-family: var(--wp--preset--font-family--sansation);
	font-size: 24px;
	font-weight: 700;
	line-height: 34px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--theme-02);
	margin-top: 30px;
	margin-bottom: 20px;
}

/* Bold text within legal page body copy */
.accessibility-page p strong,
body.page-template-default.page-id-3 p strong,
body.page-template-default.page-id-811 p strong {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
}

/* Legal page lists - consistent styling */
body.page-template-default.page-id-3 .wp-block-list,
body.page-template-default.page-id-811 .wp-block-list {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 30px;
	color: #000;
	padding-left: 30px;
}

body.page-template-default.page-id-3 .wp-block-list li,
body.page-template-default.page-id-811 .wp-block-list li {
	margin-bottom: 10px;
}

/* Legal page yellow separator/underline width */
.accessibility-page .separator-224,
body.page-template-default.page-id-3 .separator-224,
body.page-template-default.page-id-811 .separator-224 {
	width: 224px;
	height: 4px;
	border: none;
}

/* Legal page paragraph spacing */
.accessibility-page .wp-block-column p,
body.page-template-default.page-id-3 .wp-block-group p,
body.page-template-default.page-id-811 .wp-block-group p {
	margin-bottom: 20px;
}

/* Last modified text styling */
.accessibility-page p em,
body.page-template-default.page-id-3 p em,
body.page-template-default.page-id-811 p em {
	font-style: italic;
}

/* ==========================================================================
   MOBILE UI REDESIGN - TAC/ACG Pattern Implementation
   Reference: amenitycollective.com mobile pattern
   - Bottom navigation bar with Menu (left) and Partner With Us (right)
   - Announcement banner at top (disappears on scroll)
   - Horizontal logo instead of star icon
   ========================================================================== */

@media (max-width: 1024px) {

	/* ==========================================================================
	   Mobile Header Logo Bar - Fixed at viewport top (ACG pattern)
	   Breakpoint 1024px includes tablets
	   ========================================================================== */
	.mobile-header-bar {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--wp--preset--color--theme-02);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		z-index: 999998;
		height: 70px;
		padding: 10px 20px;
	}

	.mobile-header-logo-link {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mobile-header-logo {
		height: 45px;
		width: auto;
		max-width: 200px;
		fill: #ffffff;
	}

	.mobile-header-logo path,
	.mobile-header-logo polygon,
	.mobile-header-logo rect {
		fill: #ffffff;
	}

	/* Add padding to body for mobile header bar (top) and bottom nav (bottom) */
	body {
		padding-top: 0 !important;
		padding-bottom: 60px !important;
	}

	/* Hide desktop header elements on mobile */
	.hero-top-bar,
	.site-header-small,
	header.wp-block-template-part>.wp-block-group:first-child {
		display: none !important;
	}

	/* ==========================================================================
	   Bottom Navigation Bar - Fixed at viewport bottom
	   ========================================================================== */
	.mobile-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		background-color: var(--wp--preset--color--white);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
		z-index: 999999;
		height: 60px;
	}

	/* Menu button - left side */
	.mobile-bottom-nav .mobile-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		flex: 1;
		padding: 12px 20px;
		background: transparent;
		border: none;
		cursor: pointer;
		font-family: var(--wp--preset--font-family--inter);
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--wp--preset--color--theme-06);
	}

	.mobile-bottom-nav .mobile-menu-btn:hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	/* Hamburger icon in bottom nav */
	.mobile-bottom-nav .menu-icon {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 20px;
		height: 14px;
	}

	.mobile-bottom-nav .menu-icon span {
		display: block;
		width: 100%;
		height: 2px;
		background-color: var(--wp--preset--color--theme-06);
		border-radius: 1px;
	}

	/* Let's Connect button - right side - American Pool blue */
	.mobile-bottom-nav .partner-link {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 12px 20px;
		background-color: var(--wp--preset--color--theme-02);
		border: none;
		text-decoration: none;
		font-family: var(--wp--preset--font-family--inter);
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--wp--preset--color--white);
	}

	.mobile-bottom-nav .partner-link:hover {
		background-color: #153d7a;
	}

	/* ==========================================================================
	   Announcement Banner - Position below mobile header bar
	   REQUIRED: !important to override existing bottom positioning
	   ========================================================================== */
	#announcement-banner,
	.announcement-banner {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		box-shadow: none !important;
		z-index: 999999 !important;
	}

	/* Add extra top padding when banner is visible */
	body:has(#announcement-banner:not([style*="display: none"]):not([style*="display:none"])),
	body:has(.announcement-banner:not([style*="display: none"]):not([style*="display:none"])) {
		padding-top: 0 !important;
		/* Header bar (70px) + Banner (~60px) */
	}

	/* Hide banner on scroll - via JS class */
	#announcement-banner.scrolled-hidden,
	.announcement-banner.scrolled-hidden {
		transform: translateY(-100%);
		opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	/* ==========================================================================
	   Mobile Logo - Show horizontal version instead of star icon
	   ========================================================================== */
	/* Override star icon to show horizontal logo */
	.hero-logo {
		width: 200px !important;
		height: 50px !important;
		background-image: url('/wp-content/uploads/2025/11/american-pool-logo.svg') !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: left center !important;
	}

	.hero-logo a {
		width: 200px !important;
		height: 50px !important;
	}

	.hero-logo svg {
		display: none !important;
	}

	/* Interior pages logo */
	.site-header-small .site-header-small-logo {
		width: 180px !important;
		height: 45px !important;
		background-image: url('/wp-content/uploads/2025/11/american-pool-logo.svg') !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: left center !important;
	}

	.site-header-small .site-header-small-logo a {
		width: 180px !important;
		height: 45px !important;
	}

	.site-header-small .site-header-small-logo svg,
	.site-header-small .site-header-small-logo img:not([src*="small-star"]) {
		display: none !important;
	}

	/* ==========================================================================
	   Hide current fixed hamburger - Menu is now in bottom nav
	   REQUIRED: !important and high specificity to override all other hamburger rules
	   ========================================================================== */
	.mobile-nav-toggle,
	#mobile-nav-toggle,
	.hero-mobile-nav-wrapper,
	.hero-mobile-nav-wrapper .mobile-nav-toggle,
	.hero-top-bar .mobile-nav-toggle,
	.hero-top-bar #mobile-nav-toggle,
	body .hero-top-bar .mobile-nav-toggle,
	body .hero-top-bar #mobile-nav-toggle,
	body .mobile-nav-toggle,
	body #mobile-nav-toggle {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* ==========================================================================
	   Gallery Carousel Dots - Better mobile styling
	   ========================================================================== */
	/* Carousel dots container */
	.splide__pagination {
		display: flex !important;
		justify-content: center;
		gap: 12px;
		padding: 20px 0;
	}

	/* Individual dots */
	.splide__pagination__page {
		width: 12px !important;
		height: 12px !important;
		border-radius: var(--wp--custom--border--rounded-full) !important;
		background-color: transparent !important;
		opacity: 1 !important;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.splide__pagination__page.is-active {
		background-color: var(--wp--preset--color--theme-02) !important;
		transform: scale(1.1);
	}

	/* Ensure dots are visible against any background */
	.has-theme-02-background-color .splide__pagination__page {
		border-color: var(--wp--preset--color--white) !important;
	}

	.has-theme-02-background-color .splide__pagination__page.is-active {
		background-color: var(--wp--preset--color--white) !important;
	}

	/* ==========================================================================
	   Form Styling - Fix indentation and sizing issues
	   ========================================================================== */


	#gform_fields_1 input {
		margin-bottom: 20px !important;
	}

	#input_1_2,
	#input_1_4,
	#input_1_5 {
		padding: 0 !important;
	}

	body #gform_wrapper_1 {
		margin-bottom: 0 !important;
	}

	/* Salesforce forms on mobile */
	.salesforce-form,
	.operations-form,
	.gform_wrapper {
		padding: 0 15px !important;
		margin: 0 !important;
	}

	@media screen and (max-width: 430px) {

		.salesforce-form,
		.operations-form,
		.gform_wrapper {
			padding: 0 !important;
			margin: 30px 0 0 0 !important;
		}
	}

	/* Form field container - remove indentation */
	.salesforce-form .form-row,
	.operations-form .form-row,
	.salesforce-form input,
	.salesforce-form textarea,
	.salesforce-form select,
	.operations-form input,
	.operations-form textarea,
	.operations-form select {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		font-size: var(--wp--preset--font-size--medium) !important;
		/* Prevent iOS zoom on focus */
		box-sizing: border-box;
		margin-bottom: 0px;
		gap: 20px;
	}

	/* Form labels */
	.salesforce-form label,
	.operations-form label {
		font-size: 14px !important;
		font-weight: 500;
		color: var(--wp--preset--color--theme-06);
		margin-bottom: 4px;
	}

	/* Form input styling */
	.salesforce-form input[type="text"],
	.salesforce-form input[type="email"],
	.salesforce-form input[type="tel"],
	.salesforce-form textarea,
	.operations-form input[type="text"],
	.operations-form input[type="email"],
	.operations-form input[type="tel"],
	.operations-form textarea {
		border: none !important;
		border-bottom: 3px solid #4E4B48 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	.salesforce-form input:focus,
	.salesforce-form textarea:focus,
	.operations-form input:focus,
	.operations-form textarea:focus {
		outline: none !important;
		border-bottom-color: var(--wp--preset--color--theme-02) !important;
	}

	/* Submit button - proper sizing */
	.salesforce-form button[type="submit"],
	.salesforce-form input[type="submit"],
	.operations-form button[type="submit"],
	.operations-form input[type="submit"] {
		width: auto !important;
		min-width: 200px;
		padding: 14px 32px !important;
		margin-top: 20px;
		font-size: 14px !important;
	}

	/* Contact page form section */
	.operations-contact-section,
	.partner-form-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Fix Let's Connect section form container */
	.operations-contact-section .wp-block-column:has(.salesforce-form),
	.partner-form-section .wp-block-column:has(.salesforce-form) {
		padding: 20px 15px !important;
	}

	/* ==========================================================================
	   Trusted Staffing section - fix narrow text column
	   ========================================================================== */
	.trusted-staffing-section .wp-block-columns,
	[class*="trusted-staffing"] .wp-block-columns {
		flex-direction: column !important;
	}

	.trusted-staffing-section .wp-block-column,
	[class*="trusted-staffing"] .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Fix list items in Trusted Staffing section */
	.trusted-staffing-section ul li,
	[class*="trusted-staffing"] ul li {
		max-width: 100% !important;
	}

	/* ==========================================================================
	   American Pool Mobile Menu - Brand Colors
	   Blue background, white logo, white separators, white nav links
	   ========================================================================== */

	/* Override mobile navigation panel background to American Pool blue */
	.mobile-navigation {
		background-color: var(--wp--preset--color--theme-02) !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* When open, mobile nav should be above the header bar */
	.mobile-navigation[aria-hidden="false"] {
		z-index: 999999 !important;
	}

	/* Close button - "CLOSE X" style in top right */
	.mobile-nav-close {
		position: absolute !important;
		top: 20px !important;
		right: 20px !important;
		left: auto !important;
		display: flex !important;
		align-items: center;
		gap: 8px;
		background: transparent !important;
		border: none !important;
		color: var(--wp--preset--color--white) !important;
		font-family: var(--wp--preset--font-family--sansation), sans-serif;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
		padding: 0 !important;
		z-index: 10;
	}

	.mobile-nav-close .close-text {
		color: var(--wp--preset--color--white);
	}

	.mobile-nav-close svg {
		width: 20px;
		height: 20px;
		stroke: var(--wp--preset--color--white);
	}

	.mobile-nav-close:hover {
		opacity: 0.8;
	}

	/* Logo header section */
	.mobile-nav-logo-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80px 30px 0;
		text-align: center;
	}

	.mobile-nav-logo-link {
		display: block;
	}

	.mobile-nav-logo {
		width: auto;
		height: 100px;
		max-width: 100px;
		margin-bottom: 15px;
	}

	.mobile-nav-site-title {
		display: block;
		color: var(--wp--preset--color--white) !important;
		font-family: var(--wp--preset--font-family--sansation), sans-serif;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 2px;
		text-decoration: none;
		margin-bottom: 15px;
		opacity: 0.9;
	}

	.mobile-nav-site-title:hover {
		opacity: 0.8;
	}

	/* White separator line */
	.mobile-nav-separator {
		width: 90%;
		max-width: 300px;
		height: 1px;
		border: none;
		background-color: rgba(255, 255, 255, 0.3);
		margin: 0 auto 15px;
	}

	/* Mobile navigation inner - adjust padding, keep content compact at top */
	.mobile-navigation-inner {
		padding: 20px 30px 40px !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: auto;
		flex: 0 0 auto;
	}

	/* Navigation container - center items */
	.mobile-navigation .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 0 !important;
		width: 100%;
	}

	/* Nav items - centered, white text */
	.mobile-navigation .wp-block-navigation-item {
		text-align: center !important;
		width: auto !important;
	}

	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-navigation-item__content {
		color: var(--wp--preset--color--white) !important;
		font-family: var(--wp--preset--font-family--sansation), sans-serif !important;
		font-size: var(--wp--preset--font-size--medium) !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 1.5px !important;
		padding: 8px 20px !important;
		text-align: center !important;
	}

	.mobile-navigation .wp-block-navigation-item a:hover,
	.mobile-navigation .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--theme-04) !important;
	}

	/* Hide the cloned button groups from desktop nav */
	.mobile-navigation .wp-block-buttons {
		display: none !important;
	}

	/* CTA buttons container */
	.mobile-nav-cta-buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 10px;
	}

	.mobile-nav-cta-buttons .mobile-nav-separator {
		margin-bottom: 15px;
	}

	/* CTA link buttons */
	.mobile-nav-cta-link {
		display: block;
		color: var(--wp--preset--color--white) !important;
		font-family: var(--wp--preset--font-family--sansation), sans-serif;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1.5px;
		text-decoration: none;
		padding: 12px 20px;
		text-align: center;
	}

	.mobile-nav-cta-link:hover {
		color: var(--wp--preset--color--theme-04) !important;
	}

	/* Submenu styling for dark background */
	.mobile-navigation .wp-block-navigation__submenu-container {
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding-left: 0 !important;
		position: relative !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	/* Prevent Operations and other submenus from shifting left on expand */
	.mobile-navigation .wp-block-navigation-item.has-child {
		position: relative !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
	}

	.mobile-navigation .wp-block-navigation-item.has-child.open-on-click>.wp-block-navigation__submenu-container {
		position: relative !important;
		left: 0 !important;
		transform: none !important;
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Submenu items - centered */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		text-align: center !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
	}

	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
		color: rgba(255, 255, 255, 0.8) !important;
		font-size: 14px !important;
		padding: 8px 20px !important;
		text-align: center !important;
		display: inline-block !important;
	}

	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
		color: var(--wp--preset--color--theme-04) !important;
	}

	/* Submenu caret/toggle icon - white for dark background */
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle,
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--white) !important;
	}

	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle svg,
	.mobile-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon svg {
		fill: var(--wp--preset--color--white) !important;
		stroke: var(--wp--preset--color--white) !important;
	}
}

/* ============================================
   MOBILE FIXES - 480px and below
   ============================================ */
@media (max-width: 480px) {

	/* ------------------------------------------
	   #1: Footer buttons - explicit border-radius and border
	   Ensure 54px pill shape and #1C8ECE border
	   ------------------------------------------ */
	body .footer-button-careers .wp-block-button__link,
	body .footer-button-connect .wp-block-button__link {
		border-radius: 54px !important;
		border: 2px solid #1C8ECE !important;
	}

	/* Careers button - transparent bg with border */
	body .footer-button-careers .wp-block-button__link {
		background: transparent !important;
		background-color: transparent !important;
	}

	/* Let's Connect - dark blue bg with same border */
	body .footer-button-connect .wp-block-button__link {
		background-color: var(--wp--preset--color--theme-02) !important;
	}

	/* ------------------------------------------
	   #2: Mobile menu submenu collapse fix
	   Properly collapse submenu when closed
	   ------------------------------------------ */
	.mobile-navigation .wp-block-navigation__submenu-container {
		max-height: 0 !important;
		overflow: hidden !important;
		transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* When open, allow submenu to expand */
	.mobile-navigation .wp-block-navigation-item.has-child.open-on-click>.wp-block-navigation__submenu-container {
		max-height: 500px !important;
		overflow: visible !important;
		padding-top: 8px !important;
		padding-left: 0px !important;
	}

	/* Parent item - no extra gap when submenu is closed */
	.mobile-navigation .wp-block-navigation-item.has-child:not(.open-on-click) {
		margin-bottom: 0 !important;
	}

	/* ------------------------------------------
	   #2b: Careers nav item spacing fix
	   Ensure dynamically injected Careers item has
	   consistent spacing with other navigation items
	   ------------------------------------------ */
	.mobile-navigation .wp-block-navigation__container>.wp-block-navigation-link {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Ensure all top-level nav items have the same vertical alignment */
	.mobile-navigation .wp-block-navigation__container>.wp-block-navigation-item {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		min-height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Apply consistent padding to nav links for touch targets */
	.mobile-navigation .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
		padding: 10px 20px !important;
	}

	/* ------------------------------------------
	   #3: Mobile menu close button fix
	   Ensure close button is clickable
	   ------------------------------------------ */
	.mobile-nav-close {
		z-index: 100001 !important;
		pointer-events: auto !important;
		cursor: pointer !important;
		touch-action: manipulation !important;
		-webkit-tap-highlight-color: transparent !important;
		min-width: 80px !important;
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* ------------------------------------------
	   #4: Sitewide p tag - 16px on mobile
	   Override clamp font sizes for paragraphs
	   ------------------------------------------ */
	p,
	.wp-block-paragraph,
	.entry-content p {
		font-size: var(--wp--preset--font-size--medium) !important;
	}

	/* ------------------------------------------
	   #5: About page Carousel + Text - full width
	   ------------------------------------------ */
	.carousel-text-section,
	.carousel-text-section .kindling-carousel-container,
	.carousel-text-section .wp-block-kindling-carousel,
	.carousel-text-section .splide,
	.carousel-text-section .splide__track,
	.carousel-text-section .splide__list {
		margin-left: -30px !important;
		margin-right: -30px !important;
		width: calc(100% + 60px) !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Reset inner splide elements */
	.carousel-text-section .splide__slide {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Dots should still have some spacing from edge */
	.carousel-text-section .splide__pagination {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* ------------------------------------------
   #6: Fix alignfull/alignwide padding rule
   Only apply 30px padding on tablet, not mobile
   ------------------------------------------ */
@media (min-width: 481px) and (max-width: 1279px) {

	.entry-content .wp-block-group.alignfull,
	.entry-content .wp-block-group.alignwide {
		padding-left: 30px;
		padding-right: 30px;
	}

	/* Nested content shouldn't double-pad */
	.entry-content .wp-block-group.alignfull .wp-block-paragraph,
	.entry-content .wp-block-group.alignfull .wp-block-heading,
	.entry-content .wp-block-group.alignfull .wp-block-list,
	.entry-content .wp-block-group.alignfull .wp-block-buttons,
	.entry-content .wp-block-group.alignwide .wp-block-paragraph,
	.entry-content .wp-block-group.alignwide .wp-block-heading,
	.entry-content .wp-block-group.alignwide .wp-block-list,
	.entry-content .wp-block-group.alignwide .wp-block-buttons {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   MOBILE FIXES - January 2026
   Collection of mobile viewport fixes for various patterns and sections
   ========================================================================== */

@media (max-width: 781px) {

	/* ------------------------------------------
	   #1: About Us - Timeline text overflow fix
	   Ensure timeline paragraph text wraps correctly
	   ------------------------------------------ */
	.company-timeline-section .timeline-text-wrapper p,
	.company-timeline-section p,
	body .company-timeline-section .wp-block-columns.alignwide p {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		max-width: 100%;
	}

	/* Timeline section container - prevent horizontal overflow */
	.company-timeline-section {
		overflow-x: hidden;
		max-width: 100vw;
		padding-left: 30px !important;
		padding-right: 30px !important;
		box-sizing: border-box;
	}

	/* Timeline text wrapper max width - force fit within container */
	body .company-timeline-section .timeline-text-wrapper {
		max-width: 100% !important;
		width: 100% !important;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}

	/* Force all children of timeline to respect container bounds */
	.company-timeline-section>*,
	.company-timeline-section .wp-block-group,
	.company-timeline-section .wp-block-columns {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Force grid items in timeline to respect container - critical fix */
	.company-timeline-section .wp-block-kindling-grid-item {
		max-width: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	/* Ensure grid system respects container bounds */
	/* Override WordPress-generated grid layout classes */
	.company-timeline-section .is-style-kindling-grid-system,
	.company-timeline-section .is-style-kindling-grid-system.is-layout-grid,
	.company-timeline-section .wp-block-group.is-layout-grid,
	.company-timeline-section [class*="wp-container-core-group-is-layout"] {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		max-width: 100% !important;
	}

	/* Timeline columns alignment */
	body .company-timeline-section .wp-block-columns.alignwide {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ------------------------------------------
	   #2: Our Solutions - Hide offset pool bg on mobile
	   Hide background image decoration on accordion images
	   ------------------------------------------ */
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg::before,
	.page-id-15 .image-accordion-section .wp-block-kindling-grid-item.has-offset-pool-bg-right::before {}

	/* ------------------------------------------
	   #3: Large BG Overlay (Blue) - Mobile responsive
	   80px vertical padding, not 70vh min-height
	   ------------------------------------------ */
	.large-bg-overlay-section.wp-block-cover,
	.large-bg-overlay-blue.wp-block-cover {
		min-height: auto !important;
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	/* Image needs object-fit cover */
	.large-bg-overlay-section .wp-block-cover__image-background,
	.large-bg-overlay-blue .wp-block-cover__image-background {
		object-fit: cover !important;
	}

	/* Separator centered and max-width 100px */
	.large-bg-overlay-section .wp-block-separator,
	.large-bg-overlay-section hr,
	.large-bg-overlay-blue .wp-block-separator,
	.large-bg-overlay-blue hr {
		width: 200px !important;
		max-width: 200px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Remove padding from text section */
	.large-bg-overlay-section .large-bg-overlay-content,
	.large-bg-overlay-blue .large-bg-overlay-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Button padding 11px 20px */
	.large-bg-overlay-section .wp-block-button__link,
	.large-bg-overlay-blue .wp-block-button__link {
		padding: 11px 20px !important;
	}

	/* ------------------------------------------
	   #4: Service Areas - Image quad 80px vertical padding
	   ------------------------------------------ */
	.service-areas-facility-grid,
	.page-id-17 .service-areas-facility-grid,
	.operations-facility-grid {
		padding: 30px 20px !important;
	}

	/* ------------------------------------------
	   #5: Operations/NY - Heading and separators centered
	   ------------------------------------------ */
	.single-operations .solutions-section-cover h2.wp-block-heading,
	.single-operations .solutions-section-cover .wp-block-separator,
	.single-operations .solutions-section-cover hr,
	.single-operations .solutions-card-new h3.wp-block-heading,
	.single-operations .solutions-card-new .wp-block-separator,
	.single-operations .solutions-card-new hr {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* ------------------------------------------
	   #6: * Intro pattern - Exclude from entry-content padding
	   The intro sections already have their own padding rules
	   ------------------------------------------ */
	.entry-content .operations-intro-section .wp-block-paragraph,
	.entry-content .operations-intro-section .wp-block-heading,
	.entry-content .operations-intro-section .wp-block-list,
	.entry-content .operations-intro-section .wp-block-buttons,
	.entry-content .page-intro-section .wp-block-paragraph,
	.entry-content .page-intro-section .wp-block-heading,
	.entry-content .page-intro-section .wp-block-list,
	.entry-content .page-intro-section .wp-block-buttons,
	.entry-content .about-intro-section .wp-block-paragraph,
	.entry-content .about-intro-section .wp-block-heading,
	.entry-content .about-intro-section .wp-block-list,
	.entry-content .about-intro-section .wp-block-buttons,
	.entry-content .solutions-intro-section .wp-block-paragraph,
	.entry-content .solutions-intro-section .wp-block-heading,
	.entry-content .solutions-intro-section .wp-block-list,
	.entry-content .solutions-intro-section .wp-block-buttons {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ------------------------------------------
	   #7: $ Our Solutions - 45px line height normal
	   ------------------------------------------ */
	.solutions-section-cover h2.wp-block-heading {
		line-height: 45px !important;
	}

	/* ------------------------------------------
	   #8: $ Carousel + Text - Indicator dots centered
	   Text section 30px horizontal padding
	   ------------------------------------------ */
	@media (min-width: 1440px) {

		/* Carousel text section - constrain width and add padding */
		.carousel-text-section {
			max-width: 100vw !important;
			overflow-x: hidden !important;
			box-sizing: border-box !important;
		}

	}




	/* Splide carousel within section - constrain to viewport */
	.carousel-text-section .splide,
	.carousel-text-section .kindling-carousel-container {
		max-width: 100% !important;
		width: 100% !important;
		left: 0 !important;
		margin-left: 0 !important;
		min-height: unset !important;
		padding-bottom: 0 !important;
	}

	/* Pagination dots centered */
	.carousel-text-section .splide__pagination {
		justify-content: center !important;
		text-align: center !important;
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
		position: relative !important;
		margin: 20px auto !important;
	}

	.carousel-text-section .alignwide {
		max-width: 100% !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
		box-sizing: border-box !important;
	}

	/* Grid items inside carousel text section */
	.carousel-text-section .wp-block-kindling-grid-item {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Text content inside carousel section */
	.carousel-text-section .wp-block-group p {
		max-width: 100% !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* Text section 30px horizontal padding - columns fallback */
	.carousel-text-section .wp-block-columns>.wp-block-column:last-child {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	/* ------------------------------------------
	   #9: * Image Quad - 80px vertical padding, 30px margin-bottom on separator
	   ------------------------------------------ */
	.service-areas-expertise-section {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	.service-areas-expertise-section .wp-block-separator,
	.service-areas-expertise-section hr {
		margin-bottom: 30px !important;
	}

	/* ------------------------------------------
	   #10: * Large Map - 80px padding-top
	   ------------------------------------------ */
	.operations-map-section,
	.single-operations .operations-map-section {
		padding-top: 40px !important;
	}

	/* ------------------------------------------
	   #11: Form + Image - Operations form styles
	   Match desktop styles, remove margin-bottom 40px
	   ------------------------------------------ */
	.single-operations .form-image-section .gform_wrapper,
	.single-operations .salesforce-form.operations-form {
		margin-bottom: 0 !important;
	}

	/* Form field consistent spacing */
	.single-operations .form-image-section .gform_wrapper .gfield,
	.single-operations .salesforce-form.operations-form .form-row {
		margin-bottom: 0 !important;
	}

	/* Remove extra margin from last field */
	.single-operations .form-image-section .gform_wrapper .gfield:last-child,
	.single-operations .salesforce-form.operations-form .form-row:last-child {
		margin-bottom: 0 !important;
	}



	/* ------------------------------------------
	   GLOBAL: Text sections - centered headings/separators
	   30px horizontal padding on sides
	   ------------------------------------------ */

	/* Text sections horizontal padding */
	.wp-block-group .wp-block-group:not(.alignfull):not(.alignwide) {
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
	}

	.wp-container-core-group-is-layout-2383ff3b,
	.operations-contact-section .wp-block-group>p,
	.partner-contact-section .wp-block-group>p {
		margin-bottom: 0 !important;
	}

	/* padding delete */
	.wp-container-core-group-is-layout-9deb822d .wp-block-group,
	.wp-block-group .wp-block-group.wp-container-core-group-is-layout-3b26c480,
	.wp-container-core-group-is-layout-38152dc2 .wp-container-core-group-is-layout-fc67a129,
	.wp-block-group .wp-block-group.wp-container-core-group-is-layout-78187653,
	.wp-block-group .wp-block-group.wp-container-core-group-is-layout-1026f38c,
	.wp-block-group .wp-block-group.wp-container-core-group-is-layout-0e1cd66e .wp-block-group,
	.wp-block-group .wp-block-group.wp-container-core-group-is-layout-81d5c4b5 .wp-block-group,
	.wp-block-group .wp-block-group.wp-container-core-group-is-layout-2273bbf1,
	.wp-block-group .wp-block-group.wp-container-core-group-is-layout-052d1e8d,
	.wp-container-core-group-is-layout-2273bbf1 .wp-container-core-group-is-layout-e0082cf6,
	.wp-container-core-buttons-is-layout-fe9cc265 .wp-container-core-group-is-layout-23441af8,
	.wp-container-core-group-is-layout-40beb301,
	.wp-container-core-group-is-layout-772b349f,
	.wp-container-core-group-is-layout-931b3edc,
	.wp-container-core-group-is-layout-e0082cf6,
	.wp-container-core-group-is-layout-c5bbea69,
	.wp-container-core-group-is-layout-81d5c4b5,
	.wp-container-core-group-is-layout-3379e089,
	.operations-map-container,
	.wp-block-group .wp-block-group.solutions-accordion {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.wp-container-core-group-is-layout-38152dc2 .wp-container-core-group-is-layout-fc67a129 p {
		padding-right: 0 !important;
	}

	body.single-operations .wp-block-group.wp-container-core-group-is-layout-1e822f78 {
		padding-top: 0 !important;
		padding-bottom: 40px !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	.wp-container-core-group-is-layout-3379e089 {
		gap: 20px;
	}



	/* Center separators in text sections - use align-self for flex containers */
	.carousel-text-section .wp-block-separator,
	.carousel-text-section .wp-block-separator.separator-224,
	.carousel-text-section hr.wp-block-separator.is-style-wide.separator-224,
	.carousel-text-section hr,
	.large-bg-overlay-section .wp-block-separator,
	.large-bg-overlay-section hr,
	.large-bg-overlay-blue .wp-block-separator,
	.large-bg-overlay-blue hr,
	.project-zero-section .wp-block-separator,
	.project-zero-section hr,
	.safety-section .wp-block-separator,
	.safety-section hr,
	.become-lifeguard-section .wp-block-separator,
	.become-lifeguard-section hr {
		margin-left: auto !important;
		margin-right: auto !important;
		align-self: center !important;
	}

	.carousel-text-section .wp-block-separator,
	.carousel-text-section .wp-block-separator.separator-224,
	.carousel-text-section hr.wp-block-separator.is-style-wide.separator-224,
	.carousel-text-section hr {
		margin-left: 0 !important;
		margin-top: 0 !important;
	}

	/* ------------------------------------------
	   FOOTER: Mobile button styles
	   Border radius 54px, border 2px solid #1C8ECE
	   ------------------------------------------ */
	footer .wp-block-button__link,
	.wp-site-blocks>footer .wp-block-button__link,
	footer.wp-block-template-part .wp-block-button__link,
	footer .wp-block-button.is-style-outline .wp-block-button__link,
	footer .footer-button-careers .wp-block-button__link,
	footer .footer-button-connect .wp-block-button__link,
	body footer .wp-block-button.is-style-outline>a.wp-block-button__link {
		border-radius: 54px !important;
		border: 2px solid #1C8ECE !important;
	}

	/* ------------------------------------------
	   CONTACT PAGE (page-id-25) - Mobile intro section
	   Center heading/separators, add margin to first p
	   ------------------------------------------ */


	body.page-id-25 .form-image-section .wp-block-separator,
	body.page-id-25 .partner-contact-section .wp-block-separator,
	body.page-id-25 .form-image-section .separator-224,
	body.page-id-25 .partner-contact-section .separator-224 {
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* Contact page intro - first paragraph margin-bottom 30px */
	body.page-id-25 .form-image-section .wp-block-group p:first-of-type,
	body.page-id-25 .partner-contact-section .wp-block-group p:first-of-type {
		margin-bottom: 30px !important;
	}

	/* Contact page - reduce excess padding on form column */
	body.page-id-25 .form-image-section .form-content-column {
		padding: 40px 30px !important;
	}

	/* ------------------------------------------
	   OPERATIONS FORM - Mobile cleanup
	   Remove margin-bottom 40px, consistent spacing
	   ------------------------------------------ */
	.single-operations .operations-contact-section .gform_wrapper {
		margin-bottom: 0 !important;
	}

	.single-operations .operations-contact-section .gfield {
		margin-bottom: 16px !important;
	}

	.single-operations .operations-contact-section .gfield:last-child {
		margin-bottom: 0 !important;
	}

	.single-operations .operations-contact-section .gform_footer {
		margin-top: 20px !important;
		margin-bottom: 0 !important;
	}

	/* ------------------------------------------
	   HOME GALLERY SECTION - Mobile
	   Full width carousel with 30px margin bottom
	   Break out of all parent padding constraints
	   ------------------------------------------ */
	.home-gallery-section,
	.home-gallery-section .wp-block-cover__inner-container {
		overflow: visible !important;
	}

	.home-gallery-section .wp-block-kindling-carousel {
		position: relative !important;
		left: 50% !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		margin-bottom: 30px !important;
		overflow: hidden !important;
	}

	/* Remove all inner padding from carousel components */
	.home-gallery-section .wp-block-kindling-carousel,
	.home-gallery-section .kindling-carousel-container,
	.home-gallery-section .splide,
	.home-gallery-section .splide__track,
	.home-gallery-section .splide__list {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Ensure slides are edge-to-edge */
	.home-gallery-section .splide__slide {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

}

/* End @media (max-width: 781px) */

/* ==========================================================================
   DESKTOP FORM STYLES (1440px+)
   ========================================================================== */
@media screen and (min-width: 1440px) {


	.form-image-section .gform_wrapper {
		margin: 0 !important;
		padding: 0 !important;
	}

	.form-image-section .gform_wrapper .gform_body {
		margin-bottom: 0 !important;
	}

	.form-image-section .gform_wrapper .gform_footer {
		margin-top: 20px !important;
		padding: 0 !important;
	}

	/* Salesforce form consistent styling */
	.form-image-section .salesforce-form {
		margin: 30px 0 0 !important;
	}

	.form-image-section .salesforce-form input,
	.form-image-section .salesforce-form select,
	.form-image-section .salesforce-form textarea {
		margin-bottom: 16px !important;
	}

	.form-image-section .salesforce-form input:last-of-type,
	.form-image-section .salesforce-form select:last-of-type,
	.form-image-section .salesforce-form textarea:last-of-type {
		margin-bottom: 0 !important;
	}

	/* ------------------------------------------
	   FORMS: Input border-bottom styling
	   ------------------------------------------ */
	.form-image-section input[type="text"],
	.form-image-section input[type="email"],
	.form-image-section input[type="tel"],
	.form-image-section input[type="number"],
	.form-image-section input[type="url"],
	.form-image-section select,
	.form-image-section textarea,
	.gform_wrapper input[type="text"],
	.gform_wrapper input[type="email"],
	.gform_wrapper input[type="tel"],
	.gform_wrapper input[type="number"],
	.gform_wrapper input[type="url"],
	.gform_wrapper select,
	.gform_wrapper textarea {
		border-bottom: 3px solid #4E4B48 !important;
	}
}

@media (max-width: 430px) {

	.form-image-section input[type="text"],
	.form-image-section input[type="email"],
	.form-image-section input[type="tel"],
	.form-image-section input[type="number"],
	.form-image-section input[type="url"],
	.form-image-section select,
	.form-image-section textarea,
	.gform_wrapper input[type="text"],
	.gform_wrapper input[type="email"],
	.gform_wrapper input[type="tel"],
	.gform_wrapper input[type="number"],
	.gform_wrapper input[type="url"],
	.gform_wrapper select,
	.gform_wrapper textarea {
		margin-bottom: 0px !important;
	}
}

:root :where(.single-operations .wp-container-core-group-is-layout-bc835bda .wp-block-kindling-grid-item.is-style-grid-item-span-full-to-half--8) {
	grid-column: span 5;
}

/* ==========================================================================
   MOBILE MENU SCROLL FIX - Small phones (480px and below)
   Allow scrolling in mobile menu when Operations submenu expands
   ========================================================================== */
@media (max-width: 480px) {

	/* Make mobile navigation panel scrollable */
	.mobile-navigation {
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}

	/* Move close button higher */
	.mobile-nav-close {
		top: 10px !important;
	}

	/* Reduce logo header padding to save vertical space */
	.mobile-nav-logo-header {
		padding: 35px 30px 0 !important;
	}

	/* Smaller logo */
	.mobile-nav-logo {
		height: 120px !important;
		max-width: 120px !important;
		margin-bottom: 30px !important;
	}

	/* Hide site title to save space */
	.mobile-nav-site-title {
		display: none !important;
	}

	/* Reduce separator margin */
	.mobile-nav-separator {
		margin: 0 auto 8px !important;
	}

	/* Tighter navigation inner padding */
	.mobile-navigation-inner {
		padding: 10px 30px 30px !important;
	}

	/* Tighter nav item spacing */
	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-navigation-item__content {
		padding: 6px 20px !important;
	}

	/* Tighter submenu item spacing */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
		padding: 6px 20px !important;
		font-size: 13px !important;
	}

	/* Ensure submenu doesn't get cut off */
	.mobile-navigation .wp-block-navigation-item.has-child.open-on-click>.wp-block-navigation__submenu-container {
		max-height: none !important;
		overflow: visible !important;
	}

	/* CTA buttons section - tighter spacing */
	.mobile-nav-cta-buttons {
		margin-top: 8px !important;
	}

	.mobile-nav-cta-buttons .mobile-nav-separator {
		margin-bottom: 10px !important;
	}

	.mobile-nav-cta-link {
		padding: 10px 20px !important;
		font-size: 14px !important;
	}
}

/* ==========================================================================
   MOBILE MENU SCROLL FIX - Very small phones (375px and below)
   Even tighter spacing for iPhone SE and similar small screens
   ========================================================================== */
@media (max-width: 375px) {

	/* Move close button even higher */
	.mobile-nav-close {
		top: 8px !important;
		right: 15px !important;
	}

	/* Even smaller logo header - minimal top padding */
	.mobile-nav-logo-header {
		padding: 25px 20px 0 !important;
	}

	/* Smaller logo for tiny screens */
	.mobile-nav-logo {
		height: 70px !important;
		max-width: 70px !important;
		margin-bottom: 8px !important;
	}

	/* Reduce separator size */
	.mobile-nav-separator {
		margin: 0 auto 6px !important;
	}

	/* Tighter navigation inner */
	.mobile-navigation-inner {
		padding: 8px 20px 25px !important;
	}

	/* Even tighter nav item spacing */
	.mobile-navigation .wp-block-navigation-item a,
	.mobile-navigation .wp-block-navigation-item__content {
		padding: 5px 15px !important;
		font-size: 14px !important;
	}

	/* Tighter submenu items */
	.mobile-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
		padding: 4px 15px !important;
		font-size: var(--wp--preset--font-size--small) !important;
	}

	/* Fix: Hide submenus in mobile nav to correct spacing (Operations gap) */
	#mobile-navigation .wp-block-navigation__submenu-container,
	#mobile-navigation .wp-block-navigation-submenu {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* CTA links even smaller */
	/* CTA links match primary nav */
	.mobile-navigation .mobile-nav-cta-link,
	.mobile-nav-cta-link {
		display: block;
		font-family: 'Sansation', sans-serif !important;
		font-size: 16.29px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.6px !important;
		color: #ffffff;
		text-decoration: none;
		margin-bottom: 24px;
		padding-left: 0 !important;
	}
}