/* ==========================================================================
   Cypress Hills — decorative styles for the Elementor build.
   Content, colours, type sizes and spacing are set in Elementor; this file
   only covers what Elementor (free) has no control for: font width,
   pseudo-element accents, layered/absolute layouts, and animations.
   ========================================================================== */

:root {
	--ch-navy: #262A78;
	--ch-ink: #0F1130;
	--ch-green: #55B847;
	--ch-green-dark: #2F7A28;
	--ch-green-light: #8FD67F;
	--ch-cream: #F4F2EC;
	--ch-line: #C8C4B8;
	--ch-text: #45475A;
}

body {
	font-family: 'Roboto', sans-serif;
	color: var(--ch-ink);
	background: var(--ch-cream);
	-webkit-font-smoothing: antialiased;
}

/* Brand type: Source Serif 4 headings are set per widget in Elementor; Roboto is the body face. */
.ch-green { color: var(--ch-green); }
.ch-nowrap .elementor-heading-title { white-space: nowrap; }
.elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p { text-wrap: pretty; }

/* Section kicker with skewed bar */
.ch-kicker .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ch-kicker .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 44px;
	height: 7px;
	background: var(--ch-green);
	transform: skewX(-12deg);
}

/* Readable line lengths */
.ch-mw-38 { max-width: 38ch; }
.ch-mw-40 { max-width: 40ch; }
.ch-mw-44 { max-width: 44ch; }
.ch-mw-52 { max-width: 52ch; }
.ch-mw-28 { max-width: 28ch; }
.ch-mw-28, .ch-mw-38, .ch-mw-40, .ch-mw-44, .ch-mw-52 { width: 100%; }
.ch-mw-28 p:last-child, .ch-mw-38 p:last-child, .ch-mw-40 p:last-child,
.ch-mw-44 p:last-child, .ch-mw-52 p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Pill button with round green arrow (button widget + icon) */
.ch-pill-btn .elementor-button { gap: 14px; }
.ch-pill-btn .elementor-button-text { white-space: nowrap; }
@media (max-width: 480px) { .ch-pill-btn .elementor-button-text { white-space: normal; } }
.ch-pill-btn .elementor-button-content-wrapper { align-items: center; gap: 14px; }
.ch-pill-btn .elementor-button-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ch-green);
	color: var(--ch-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.ch-pill-btn .elementor-button-icon svg { width: 16px; height: 16px; fill: var(--ch-ink); }
/* The arrow circle never shrinks; long labels wrap beside it instead of squeezing it into an oval. */
.ch-pill-btn .elementor-button-icon { flex: 0 0 42px; min-width: 42px; }
.ch-pill-btn .elementor-button-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
	.ch-pill-btn .elementor-button { max-width: 100%; }
	.ch-pill-btn .elementor-button-text { text-align: left; font-size: 12px !important; letter-spacing: .06em !important; line-height: 1.3 !important; }
	/* When a label wraps: two even lines (no lone last word) and a pill that hugs the text, so the
	   arrow sits right after it instead of across a gap. 17em ≈ the longest balanced line. */
	.ch-pill-btn .elementor-button { width: auto !important; display: inline-flex !important; }
	.ch-pill-btn .elementor-button-content-wrapper { justify-content: flex-start; }
	.ch-pill-btn .elementor-button-text { flex: 0 1 auto; max-width: 17em; text-wrap: balance; }
}

/* Image widgets that fill their box (the widget box itself is sized by its layout class) */
.ch-fill .elementor-widget-container,
.ch-fill img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}
.ch-fill img { object-fit: cover; display: block; }
.ch-cmp-img, .ch-svc-img { width: 100% !important; height: 100%; }

/* --------------------------------------------------------------------------
   Header (UAE template)
   -------------------------------------------------------------------------- */
/* Header floats over the photo hero on every Elementor page; plain pages get a navy bar. */
.elementor-page #masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
}
body:not(.elementor-page) #masthead { background: var(--ch-navy); }
.ch-header-pill {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.ch-header-pill .hfe-nav-menu__layout-horizontal .sub-menu {
	border-radius: 0 0 40px 0;
	box-shadow: 0 24px 50px rgba(15, 17, 48, .28);
	padding: 10px;
	min-width: 240px;
}
.ch-header-pill .hfe-nav-menu__layout-horizontal .sub-menu a.hfe-sub-menu-item {
	border-radius: 8px;
	font-weight: 700;
}
.ch-header-pill .hfe-nav-menu__layout-horizontal .sub-menu a.hfe-sub-menu-item::after {
	content: "→";
	margin-left: auto;
	padding-left: 14px;
	color: var(--ch-green);
	font-weight: 800;
}
.ch-header-pill .hfe-nav-menu .menu-item > a.hfe-menu-item { border-radius: 999px; }
.ch-header-pill .hfe-nav-menu__layout-horizontal .sub-arrow i,
.ch-header-pill .hfe-nav-menu__layout-horizontal .sub-arrow svg { transition: transform .25s; }
.ch-header-pill .hfe-nav-menu__layout-horizontal .menu-item-has-children:hover > .hfe-has-submenu-container .sub-arrow i,
.ch-header-pill .hfe-nav-menu__layout-horizontal .menu-item-has-children:focus-within > .hfe-has-submenu-container .sub-arrow i,
.ch-header-pill .hfe-nav-menu__layout-horizontal .menu-item-has-children:hover > .hfe-has-submenu-container .sub-arrow svg { transform: rotate(180deg); }
.ch-header-pill .hfe-nav-menu__layout-horizontal .hfe-has-submenu-container { background: transparent; }
.ch-header-pill .hfe-nav-menu__layout-horizontal .hfe-has-submenu-container > a.hfe-menu-item { gap: 6px; }
.ch-header-pill .hfe-nav-menu-icon,
.ch-header-pill .hfe-nav-menu__toggle { color: #FFFFFF; }
/* Let the menu shrink so the Contact Us button stays in the pill; only Home is highlighted. */
/* The nav+button row takes only the space left after the logo, and can shrink. */
.ch-header-pill > .e-con { flex: 1 1 0% !important; width: auto !important; min-width: 0 !important; justify-content: flex-end; }
.ch-header-pill .elementor-widget-navigation-menu { flex: 0 1 auto !important; width: auto !important; min-width: 0; max-width: 100%; }
.ch-header-pill .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal,
.ch-header-pill .elementor-widget-navigation-menu .hfe-nav-menu { min-width: 0; }
.ch-header-pill .elementor-widget-button { flex: 0 0 auto !important; width: auto !important; }
.ch-header-pill .hfe-nav-menu .menu-item > a.hfe-menu-item,
.ch-header-pill .hfe-nav-menu .menu-item > .hfe-has-submenu-container > a.hfe-menu-item { background-color: transparent !important; }
.ch-header-pill .hfe-nav-menu .menu-item > a.hfe-menu-item:hover,
.ch-header-pill .hfe-nav-menu .menu-item > .hfe-has-submenu-container > a.hfe-menu-item:hover,
.ch-header-pill .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
.ch-header-pill .hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item,
.ch-header-pill .hfe-nav-menu > li.current-menu-item > .hfe-has-submenu-container > a.hfe-menu-item { background-color: rgba(255, 255, 255, .18) !important; }
.ch-header-pill .hfe-nav-menu .sub-menu li.current-menu-item > a.hfe-sub-menu-item { background-color: #E8F5E4 !important; color: var(--ch-green-dark) !important; }
.ch-header-pill .hfe-nav-menu .sub-menu a.hfe-sub-menu-item { background-color: #FFFFFF !important; }
.ch-header-pill .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover { background-color: var(--ch-cream) !important; }
.ch-header-logo img { height: 46px !important; width: auto !important; max-width: none !important; }
@media (max-width: 767px) { .ch-header-logo img { height: 38px !important; } }
.ch-header-pill .hfe-nav-menu .current-menu-item > a.hfe-menu-item { background: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   Hero slider (each .ch-slide is an Elementor container: photo + text panel)
   -------------------------------------------------------------------------- */
.ch-hero {
	position: relative;
	height: clamp(480px, min(42vw, calc(100vh - 170px)), 720px);
	overflow: hidden;
	border-bottom-right-radius: clamp(110px, 14vw, 230px);
}
.ch-hero > .ch-slide {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	margin: 0 !important;
	z-index: 1;
	clip-path: inset(0 100% 0 0);
	pointer-events: none;
}
.ch-hero > .ch-slide.is-prev { z-index: 2; clip-path: inset(0 0 0 0); }
.ch-hero > .ch-slide.is-current {
	z-index: 3;
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
	transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1);
}
body:not(.ch-js) .ch-hero > .ch-slide:first-child { z-index: 3; clip-path: none; pointer-events: auto; }
.ch-hero > .ch-slide::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 160px;
	background: linear-gradient(180deg, rgba(15, 17, 48, .55), rgba(15, 17, 48, 0));
	z-index: 5;
	pointer-events: none;
}
.ch-slide > .ch-slide-img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	transform: scale(1.1);
}
.ch-slide > .ch-slide-img .elementor-widget-container,
.ch-slide > .ch-slide-img img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}
.ch-slide.is-current > .ch-slide-img { transform: scale(1); transition: transform 8s linear; }
.ch-slide > .ch-slide-panel {
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 0;
	width: clamp(300px, 32%, 480px) !important;
	z-index: 10;
	transform: translateX(-101%);
	padding-left: clamp(24px, 4vw, 72px) !important;
	padding-right: clamp(24px, 4vw, 72px) !important;
	transition: transform .5s cubic-bezier(.77, 0, .18, 1);
}
.ch-slide.is-panel > .ch-slide-panel,
body:not(.ch-js) .ch-slide:first-child > .ch-slide-panel {
	transform: translateX(0);
	transition: transform .9s cubic-bezier(.77, 0, .18, 1);
}
.ch-slide-panel > .ch-slide-kicker,
.ch-slide-panel > .ch-slide-cta {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .2s ease, transform .2s ease;
}
/* Negative insets leave room for the italic overhang once revealed. */
.ch-slide-panel > .ch-slide-title { clip-path: inset(0 -30% 100% 0); transition: clip-path .2s ease; }
.ch-slide.is-panel .ch-slide-kicker { opacity: 1; transform: none; transition: opacity .5s ease .55s, transform .6s ease .55s; }
.ch-slide.is-panel .ch-slide-title { clip-path: inset(-20% -30% -20% 0); transition: clip-path .9s cubic-bezier(.77, 0, .18, 1) .7s; }
.ch-slide.is-panel .ch-slide-cta { opacity: 1; transform: none; transition: opacity .5s ease 1.2s, transform .6s ease 1.2s; }
body:not(.ch-js) .ch-slide:first-child .ch-slide-panel > * { opacity: 1; transform: none; clip-path: none; }
.ch-slide-title .elementor-heading-title { text-wrap: balance; }
.ch-slide-cta .elementor-button { white-space: nowrap; }

/* Counter + arrows under the slider */
.ch-hero-count, .ch-hero-arrows { width: auto !important; flex: 0 0 auto !important; }
.ch-hero-count .elementor-heading-title { font-variant-numeric: tabular-nums; }
.ch-hero-bar {
	position: relative;
	flex: none !important;
	width: 110px !important;
	height: 2px;
	background: var(--ch-line);
	overflow: hidden;
}
.ch-hero-bar::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--ch-progress, 14.2857%);
	background: var(--ch-navy);
	transition: width .6s ease;
}
.ch-hero-arrow { flex: none !important; }
.ch-hero-arrow .elementor-button {
	position: relative;
	width: 58px;
	height: 58px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ch-hero-arrow .elementor-button-content-wrapper { justify-content: center; }
.ch-hero-ring {
	position: absolute;
	left: -4px;
	top: -4px;
	width: 64px;
	height: 64px;
	transform: rotate(-90deg);
	pointer-events: none;
}
.ch-hero-ring circle {
	fill: none;
	stroke: var(--ch-navy);
	stroke-width: 2;
	stroke-dasharray: 176;
	stroke-dashoffset: 176;
	animation: chring var(--ch-ring, 7000ms) linear forwards;
}

/* In the Elementor editor, show every slide one under another so each is editable. */
.elementor-editor-active .ch-hero { height: auto; }
.elementor-editor-active .ch-hero > .ch-slide {
	position: relative !important;
	height: clamp(480px, min(42vw, calc(100vh - 170px)), 720px);
	clip-path: none;
	pointer-events: auto;
}
.elementor-editor-active .ch-slide > .ch-slide-img { transform: none; }
.elementor-editor-active .ch-slide > .ch-slide-panel { transform: none; }
.elementor-editor-active .ch-slide-panel > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }

@media (max-width: 767px) {
	.ch-slide > .ch-slide-panel { width: min(88%, 340px) !important; }
	.ch-hero-arrow .elementor-button { width: 50px; height: 50px; }
	.ch-hero-ring { width: 56px; height: 56px; }
}

/* --------------------------------------------------------------------------
   About collage + spinning badge
   -------------------------------------------------------------------------- */
.ch-collage {
	position: relative;
	aspect-ratio: 1 / .95;
	max-width: 640px;
}
.ch-collage > .ch-collage-a,
.ch-collage > .ch-collage-b,
.ch-collage > .ch-badge { position: absolute !important; margin: 0 !important; }
.ch-collage-a {
	left: 0;
	top: 0;
	width: 72% !important;
	height: 78%;
	overflow: hidden;
	border-bottom-right-radius: clamp(90px, 10vw, 150px);
}
.ch-collage-b {
	right: 0;
	bottom: 0;
	width: 52% !important;
	height: 54%;
	overflow: hidden;
	border-top-left-radius: clamp(70px, 8vw, 120px);
	outline: 10px solid #FFFFFF;
}
.ch-badge {
	right: 4%;
	top: 6%;
	width: clamp(120px, 13vw, 170px) !important;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 16px 40px rgba(15, 17, 48, .25);
	z-index: 3;
}
.ch-badge > .elementor-widget-text-path {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	margin: 0 !important;
}
.ch-badge > .elementor-widget-text-path .elementor-widget-container,
.ch-badge > .elementor-widget-text-path .e-text-path,
.ch-badge > .elementor-widget-text-path svg { width: 100% !important; height: 100%; max-width: none !important; }
.ch-badge > .elementor-widget-text-path svg { animation: chspin 18s linear infinite; transform-origin: 50% 50%; scale: .74; overflow: visible; }
.ch-badge > .elementor-widget-heading { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   What We Do — chip marquee
   -------------------------------------------------------------------------- */
.ch-marquee { overflow: hidden; }
.ch-marq-track {
	width: max-content !important;
	max-width: none !important;
	flex-wrap: nowrap !important;
	animation: chmarq 46s linear infinite;
	will-change: transform;
}
.ch-marq-track--rev { animation: chmarqR 52s linear infinite; }
.elementor-editor-active .ch-marq-track { animation: none; }
.ch-chip { flex: none !important; width: auto !important; }
.ch-chip .elementor-heading-title { white-space: nowrap; }
.ch-chip-img,
.ch-chip-img .elementor-widget-container { width: 48px !important; height: 48px; flex: none; }
.ch-chip-img img { width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Sketch / finished yard compare
   -------------------------------------------------------------------------- */
.ch-compare {
	position: relative;
	aspect-ratio: 16 / 9;
	max-height: 78vh;
	overflow: hidden;
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
}
.ch-compare > .ch-cmp-img {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
}
.ch-compare > .ch-cmp-after { clip-path: inset(0 0 0 50%); }
.ch-compare > .ch-cmp-label {
	position: absolute !important;
	top: 24px;
	z-index: 3;
	width: auto !important;
	margin: 0 !important;
	pointer-events: none;
}
.ch-compare > .ch-cmp-label--l { left: 24px; }
.ch-compare > .ch-cmp-label--r { right: 24px; }
.ch-cmp-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 0;
	z-index: 4;
	pointer-events: none;
}
.ch-cmp-handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1.5px;
	width: 3px;
	background: #FFFFFF;
	box-shadow: 0 0 12px rgba(15, 17, 48, .35);
}
.ch-cmp-handle span {
	position: absolute;
	top: 50%;
	left: -34px;
	margin-top: -34px;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(15, 17, 48, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ch-navy);
	font-size: 20px;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   Services — image + numbered list
   -------------------------------------------------------------------------- */
.ch-svc-media { position: relative; overflow: hidden; }
.ch-svc-media > .ch-svc-img {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .6s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ch-svc-media > .ch-svc-img:first-of-type,
.ch-js .ch-svc-media > .ch-svc-img.is-active { opacity: 1; transform: scale(1); }
.ch-js .ch-svc-media > .ch-svc-img:not(.is-active) { opacity: 0; transform: scale(1.08); }
.ch-svc-media > .ch-svc-label {
	position: absolute !important;
	left: 24px;
	bottom: 24px;
	z-index: 3;
	width: auto !important;
	margin: 0 !important;
	pointer-events: none;
}
.ch-svc-item { cursor: pointer; }
.ch-svc-item .ch-svc-num .elementor-heading-title { transition: color .3s; font-variant-numeric: tabular-nums; }
.ch-svc-item .ch-svc-name .elementor-heading-title { transition: color .3s; }
.ch-svc-item .ch-svc-body { transition: transform .4s cubic-bezier(.2, .7, .2, 1); flex: 1 1 auto !important; min-width: 0; width: auto !important; }
.ch-svc-item .ch-svc-num, .ch-svc-item .ch-svc-arrow { flex: none !important; }
.ch-js .ch-svc-item .ch-svc-desc {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .4s ease, opacity .4s ease;
}
.ch-js .ch-svc-item.is-active .ch-svc-desc { max-height: 90px; opacity: 1; }
.ch-js .ch-svc-item.is-active .ch-svc-body { transform: translateX(12px); }
.ch-js .ch-svc-item.is-active .ch-svc-num .elementor-heading-title { color: var(--ch-green-dark) !important; }
.ch-js .ch-svc-item.is-active .ch-svc-name .elementor-heading-title { color: var(--ch-navy) !important; }
.ch-svc-arrow .elementor-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ch-line);
	transition: all .3s;
}
.ch-svc-arrow .elementor-icon i,
.ch-svc-arrow .elementor-icon svg { transform: rotate(-45deg); }
.ch-js .ch-svc-item.is-active .ch-svc-arrow .elementor-icon {
	background: var(--ch-green);
	border-color: var(--ch-green);
	color: var(--ch-ink);
	fill: var(--ch-ink);
}
.ch-js .ch-svc-item.is-active .ch-svc-arrow .elementor-icon svg { fill: var(--ch-ink); }

/* --------------------------------------------------------------------------
   Recent work — expanding photo accordion (script picks the active panel)
   -------------------------------------------------------------------------- */
.ch-work-acc { height: min(72vh, 640px); }
.ch-work-acc > .ch-work-card {
	position: relative;
	flex: 1 1 0% !important;
	width: auto !important;
	min-width: 0;
	overflow: hidden;
	border-radius: 8px;
	text-decoration: none;
	transition: flex .8s cubic-bezier(.65, 0, .25, 1), border-radius .8s ease;
}
.ch-work-acc > .ch-work-card.is-active { flex: 4 1 0% !important; border-radius: 8px 8px 120px 8px; }
.ch-work-card > .ch-work-img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	transform: scale(1.12);
	transition: transform 1.2s ease;
}
.ch-work-card > .ch-work-img .elementor-widget-container,
.ch-work-card > .ch-work-img img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.ch-work-card.is-active > .ch-work-img { transform: scale(1); }
.ch-work-card > .ch-work-shade { position: absolute !important; inset: 0; width: 100% !important; pointer-events: none; }
.ch-work-card > .ch-work-num {
	position: absolute !important;
	top: 24px;
	left: 24px;
	width: 40px !important;
	height: 40px;
	margin: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .4s;
	z-index: 2;
}
.ch-work-card > .ch-work-num .elementor-heading-title { transition: color .4s; }
.ch-work-card.is-active > .ch-work-num { background: var(--ch-green); }
.ch-work-card.is-active > .ch-work-num .elementor-heading-title { color: var(--ch-ink) !important; }
.ch-work-card > .ch-work-vtitle {
	position: absolute !important;
	left: 24px;
	bottom: 28px;
	width: auto !important;
	margin: 0 !important;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transition: opacity .4s;
	pointer-events: none;
	z-index: 2;
}
.ch-work-card > .ch-work-vtitle .elementor-heading-title { white-space: nowrap; }
.ch-work-card.is-active > .ch-work-vtitle { opacity: 0; }
.ch-work-card > .ch-work-body {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	max-width: 560px;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .5s ease 0s, transform .6s ease 0s;
	pointer-events: none;
	z-index: 2;
}
.ch-work-card.is-active > .ch-work-body { opacity: 1; transform: none; transition-delay: .35s; }
.ch-work-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: var(--ch-green);
	z-index: 3;
}
.ch-work-card.is-running .ch-work-bar { width: 100%; transition: width 6s linear; }
.ch-tag .elementor-heading-title {
	display: inline-block;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(15, 17, 48, .35);
}
/* Phones, and the Elementor editor: panels stack and show their content. */
@media (max-width: 819px) {
	.ch-work-acc { height: auto; flex-direction: column !important; }
	.ch-work-acc > .ch-work-card,
	.ch-work-acc > .ch-work-card.is-active { flex: 0 0 auto !important; min-height: 440px; border-radius: 8px; }
}
.elementor-editor-active .ch-work-acc { height: auto; flex-direction: column !important; }
.elementor-editor-active .ch-work-acc > .ch-work-card { flex: 0 0 auto !important; min-height: 440px; }
@media (max-width: 819px) {
	.ch-work-card > .ch-work-img { transform: none; }
	.ch-work-card > .ch-work-vtitle { display: none; }
	.ch-work-card > .ch-work-body { opacity: 1; transform: none; }
	.ch-work-card > .ch-work-num { background: var(--ch-green); }
	.ch-work-card > .ch-work-num .elementor-heading-title { color: var(--ch-ink) !important; }
}
.elementor-editor-active .ch-work-card > .ch-work-img { transform: none; }
.elementor-editor-active .ch-work-card > .ch-work-vtitle { display: none; }
.elementor-editor-active .ch-work-card > .ch-work-body { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.ch-step-circle {
	position: relative;
	width: 210px !important;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(15, 17, 48, .25);
	transition: box-shadow .8s ease, transform .9s cubic-bezier(.45, 0, .2, 1);
}
/* Progress ring (SVG added by the script): faint track + green arc that draws in, as in the design. */
.ch-step-ring {
	position: absolute;
	left: -14px;
	top: -14px;
	width: calc(100% + 28px);
	height: calc(100% + 28px);
	transform: rotate(-90deg);
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}
.ch-step-ring circle { fill: none; }
.ch-step-ring .ch-ring-track { stroke: rgba(255, 255, 255, .14); stroke-width: 1.6; }
.ch-step-ring .ch-ring-arc {
	stroke: var(--ch-green);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	opacity: 0;
}
.ch-step.is-on .ch-step-ring .ch-ring-arc { opacity: 1; animation: chdraw 2400ms cubic-bezier(.45, 0, .2, 1) both; }
.ch-step-circle > .elementor-widget { position: relative; z-index: 1; }
.ch-step-circle > .ch-step-num { position: absolute !important; z-index: 2; }
.ch-step-img { width: 78% !important; }
.ch-step-img img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 50%;
	animation: chbob 3.2s ease-in-out infinite;
	filter: grayscale(.7) opacity(.75);
	transition: filter .8s ease;
}
.ch-step-num {
	position: absolute !important;
	left: 50%;
	bottom: -23px;
	transform: translateX(-50%);
	width: 46px !important;
	height: 46px;
	margin: 0 !important;
	border-radius: 50%;
	border: 3px solid var(--ch-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .7s ease;
}
.ch-step-title { margin-top: 22px !important; }
.ch-step-title .elementor-heading-title,
.ch-step-desc { transition: color .8s ease, opacity .8s ease; }
.ch-js .ch-process .ch-step:not(.is-on) .ch-step-title .elementor-heading-title { color: #8A8DB8 !important; }
.ch-js .ch-process .ch-step:not(.is-on) .ch-step-desc { opacity: .3; }
.ch-js .ch-process .ch-step:not(.is-on) .ch-step-num { background-color: #FFFFFF !important; }
.ch-process .ch-step.is-on .ch-step-img img,
body:not(.ch-js) .ch-step-img img { filter: none; }
.ch-process .ch-step.is-current .ch-step-circle {
	transform: translateY(-12px);
	box-shadow: 0 18px 40px rgba(15, 17, 48, .45);
}
.ch-process .ch-step.is-current .ch-step-img img { animation-duration: 1.4s; }
.ch-process .ch-step:nth-child(2) .ch-step-img img { animation-delay: -.6s; }
.ch-process .ch-step:nth-child(3) .ch-step-img img { animation-delay: -1.2s; }
.ch-process .ch-step:nth-child(4) .ch-step-img img { animation-delay: -1.8s; }

/* --------------------------------------------------------------------------
   Awards, contact form, footer
   -------------------------------------------------------------------------- */
.ch-award img { filter: drop-shadow(0 18px 30px rgba(15, 17, 48, .18)); }

.ch-form-card .mf-input,
.ch-form-card input.mf-input,
.ch-form-card textarea.mf-input {
	font-family: inherit;
	font-size: 16px;
	padding: 16px 18px;
	height: auto;
	border: 1px solid #D9D5CA;
	border-radius: 4px;
	background: #FBFAF7;
	color: var(--ch-ink);
	box-shadow: none;
	outline: none;
}
.ch-form-card .mf-input:focus { border-color: var(--ch-navy); background: #FFFFFF; }
.ch-form-card .mf-input::placeholder { color: #6B6E85; }
.ch-form-card .mf-input-wrapper { margin: 0; }
.ch-form-card .metform-btn,
.ch-form-card .mf-btn-wraper .metform-btn {
	width: 100%;
	font-family: inherit;
	background: var(--ch-green) !important;
	color: var(--ch-ink) !important;
	border: none !important;
	padding: 18px !important;
	border-radius: 999px !important;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s;
}
.ch-form-card .metform-btn:hover { background: #4AA63D !important; color: var(--ch-ink) !important; }

/* Footer (brand kit SiteFooter): 5-column grid on wide screens, 2 then 1 column below. */
.ch-footer a { transition: color .2s, background .2s, border-color .2s, transform .2s; }
.ch-footer-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 44px clamp(24px, 3vw, 56px);
	align-items: start;
}
.ch-footer-grid > .e-con { width: auto !important; min-width: 0; }
.ch-footer-brand { max-width: 380px; }
.ch-footer-social .elementor-social-icon { width: 38px; height: 38px; }
@media (max-width: 1179px) {
	.ch-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ch-footer-grid > .ch-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
	.ch-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Header: compact logo/link spacing, and the green round menu button + white menu card on small screens. */
@media (max-width: 1079px) {
	.ch-header-logo img { height: 38px !important; }
	.ch-header-pill .hfe-nav-menu .menu-item > a.hfe-menu-item { padding-left: 11px !important; padding-right: 11px !important; }
}
.ch-header-pill .hfe-nav-menu__toggle {
	width: 48px;
	height: 48px;
	border-radius: 50% !important;
	padding: 0 !important;
	justify-content: center;
	align-items: center;
}
@media (max-width: 1024px) {
	.ch-header-pill .hfe-nav-menu__layout-horizontal.menu-is-active,
	.ch-header-pill nav.hfe-dropdown {
		background: #FFFFFF !important;
		border-radius: 24px 24px 48px 24px;
		box-shadow: 0 24px 50px rgba(15, 17, 48, .28);
		padding: 14px;
		margin-top: 18px;
	}
	.ch-header-pill nav.hfe-dropdown a.hfe-menu-item { color: var(--ch-navy) !important; font-size: 17px; font-weight: 800; border-radius: 8px; }
	.ch-header-pill nav.hfe-dropdown a.hfe-sub-menu-item { color: var(--ch-text) !important; font-size: 14px; font-weight: 600; padding-left: 28px !important; }
	.ch-header-pill nav.hfe-dropdown a:hover { background: var(--ch-cream) !important; color: var(--ch-green-dark) !important; }
}
@media (max-width: 767px) { .ch-header-logo img { height: 36px !important; } }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes chspin { to { transform: rotate(360deg); } }
@keyframes chdraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes chring { from { stroke-dashoffset: 176; } to { stroke-dashoffset: 0; } }
@keyframes chmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes chmarqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes chbob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-6px) rotate(-1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ch-marq-track,
	.ch-badge > .elementor-widget-text-path svg,
	.ch-step-img img { animation: none !important; }
	.ch-hero > .ch-slide, .ch-slide > .ch-slide-img, .ch-slide > .ch-slide-panel,
	.ch-slide-panel > * { transition: none !important; }
}

/* Keep the desktop menu on one line, and let nested rows shrink so fixed-size buttons stay inside. */
@media (min-width: 1025px) {
	.ch-header-pill .hfe-nav-menu { flex-wrap: nowrap !important; }
	.ch-header-pill .hfe-nav-menu a.hfe-menu-item { white-space: nowrap; }
}
.ch-header-logo { flex: 0 0 auto !important; width: auto !important; }
.e-con.e-con-full > .e-con.e-con-full { min-width: 0; }
.ch-pill-btn { flex: 0 0 auto !important; }

/* Process: four equal columns from tablet up (as in the design), so the gaps never push a step onto a new row. */
@media (min-width: 768px) {
	.ch-process .ch-step { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
}


/* ==========================================================================
   Inner pages (brand kit): photo hero, CTA, collage ball, rotating features,
   services tiles/rows, values, gallery, contact cards and form.
   ========================================================================== */

/* Page hero: photo eases out of a zoom while the navy panel slides in. */
.ch-page-hero {
	position: relative;
	min-height: clamp(480px, min(42vw, calc(100vh - 110px)), 720px);
	overflow: hidden;
	border-bottom-right-radius: clamp(110px, 14vw, 230px);
}
.ch-page-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 160px;
	background: linear-gradient(180deg, rgba(15, 17, 48, .55), rgba(15, 17, 48, 0));
	pointer-events: none;
	z-index: 1;
}
.ch-page-hero > .ch-ph-img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	animation: chHeroZoom 2.6s cubic-bezier(.2, .7, .2, 1) both;
}
.ch-page-hero > .ch-ph-img .elementor-widget-container,
.ch-page-hero > .ch-ph-img img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.ch-page-hero > .ch-ph-panel {
	position: relative;
	z-index: 10;
	width: clamp(320px, 38%, 560px) !important;
	min-height: inherit;
	animation: chPanelIn 1s cubic-bezier(.77, 0, .18, 1) .25s both;
}
@media (max-width: 767px) { .ch-page-hero > .ch-ph-panel { width: min(100%, 420px) !important; } }
@keyframes chHeroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes chPanelIn { from { transform: translateX(-101%); } to { transform: none; } }
.elementor-editor-active .ch-page-hero > * { animation: none !important; }
.ch-crumbs p { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.ch-crumbs a { color: #C9CBE0; text-decoration: none; }
.ch-crumbs a:hover { color: #FFFFFF; }
.ch-crumbs .is-current { color: #FFFFFF; }

/* CTA buttons */
.ch-pill-btn--green .elementor-button-icon { background: var(--ch-ink); color: #FFFFFF; }
.ch-pill-btn--green .elementor-button-icon svg { fill: #FFFFFF; }
.ch-cta-actions { width: auto !important; }
.ch-cta-copy { max-width: 720px; }
.ch-text-link .elementor-button { border-radius: 0; }

/* Readable widths */
.ch-mw-34 { max-width: 34ch; }
.ch-mw-46 { max-width: 46ch; }
.ch-mw-54 { max-width: 54ch; }
.ch-mw-34, .ch-mw-46, .ch-mw-54 { width: 100%; }
.ch-mw-34 p:last-child, .ch-mw-46 p:last-child, .ch-mw-54 p:last-child { margin-bottom: 0; }
.ch-inline-link {
	color: var(--ch-navy);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--ch-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.ch-inline-link:hover { color: var(--ch-green-dark); }

/* Image boxes with a fixed ratio and one big rounded corner */
.ch-media { overflow: hidden; }
.ch-media .elementor-widget-container, .ch-media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.ch-ar-5-4 { aspect-ratio: 5 / 4; }
.ch-ar-16-10 { aspect-ratio: 16 / 10; }
.ch-half { width: 50% !important; flex: 1 1 50%; }
@media (max-width: 1024px) { .ch-half { width: 100% !important; } }
.ch-r-br { border-bottom-right-radius: clamp(100px, 11vw, 180px); overflow: hidden; }
.ch-r-bl { border-bottom-left-radius: clamp(100px, 11vw, 180px); overflow: hidden; }

/* Detail-page collage: bigger photos, smaller ball badge with a white core */
.ch-collage--svc { aspect-ratio: 1 / .95; max-width: 660px; }
.ch-collage--svc .ch-collage-a { width: 74% !important; height: 80%; }
.ch-collage--svc .ch-collage-b { height: 52%; }
.ch-collage--svc .ch-badge { right: 6%; top: 8%; width: clamp(110px, 11vw, 150px) !important; }
.ch-ball-core {
	position: absolute !important;
	inset: 30%;
	width: auto !important;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: inset -6px -6px 0 rgba(15, 17, 48, .08);
}

/* Rotating feature cells ("tour quality") */
.ch-opts {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	border-top: 1px solid var(--ch-line);
	border-bottom: 1px solid var(--ch-line);
	border-left: 1px solid var(--ch-line);
	gap: 0 !important;
}
.ch-opts > .ch-opt {
	position: relative;
	width: auto !important;
	overflow: hidden;
	border-right: 1px solid var(--ch-line);
	transition: background-color .6s cubic-bezier(.2, .7, .2, 1), border-radius .6s cubic-bezier(.2, .7, .2, 1);
}
.ch-opt::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 3px;
	width: 0;
	background: var(--ch-green);
}
.ch-opt.is-active { background: var(--ch-navy); border-bottom-right-radius: 40px; }
.ch-opt.is-active::after { width: 100%; transition: width var(--ch-cycle, 2s) linear; }
.ch-opt .elementor-heading-title, .ch-opt p { transition: color .6s; }
.ch-opt.is-active .ch-opt-title .elementor-heading-title { color: #FFFFFF !important; }
.ch-opt.is-active .ch-opt-desc { color: #C9CBE0 !important; }
.ch-opt.is-active .ch-opt-num .elementor-heading-title { color: var(--ch-green) !important; }
.ch-opt-text { width: auto !important; flex: 1 1 auto; min-width: 0; }
.ch-opt-num { flex: none !important; }

/* Pill tags that light up one at a time */
.ch-pill-tag .elementor-heading-title {
	display: inline-block;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--ch-cream);
	border: 1px solid #E2DFD6;
	transition: all .4s;
}
.ch-chips > .ch-pill-tag.is-active .elementor-heading-title { background: var(--ch-green); border-color: var(--ch-green); color: var(--ch-ink) !important; }
@media (min-width: 1025px) { .ch-sticky { position: sticky !important; top: 120px; align-self: flex-start; } }
.ch-quote { border-left: 4px solid var(--ch-green); padding: 6px 0 6px 22px; }

/* Services: tiles that jump to each service, then alternating rows */
.ch-tiles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px !important; }
.ch-tiles > .ch-tile {
	position: relative;
	display: block;
	width: auto !important;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	text-decoration: none;
	outline: 3px solid transparent;
	outline-offset: -3px;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), outline-color .5s, border-radius .5s;
}
.ch-tile > .ch-tile-img { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ch-tile > .ch-tile-img .elementor-widget-container, .ch-tile > .ch-tile-img img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.ch-tile > .ch-tile-shade { position: absolute !important; inset: 0; width: 100% !important; background: linear-gradient(180deg, rgba(15, 17, 48, .35) 0%, rgba(15, 17, 48, 0) 30%, rgba(15, 17, 48, .92) 100%); pointer-events: none; }
.ch-tile > .ch-tile-num {
	position: absolute !important;
	left: 18px; top: 18px;
	width: 44px !important; height: 44px;
	margin: 0 !important;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(15, 17, 48, .45);
	display: flex; align-items: center; justify-content: center;
	transition: all .5s;
	z-index: 2;
}
.ch-tile > .ch-tile-foot { position: absolute !important; left: 20px; right: 20px; bottom: 20px; width: auto !important; z-index: 2; }
.ch-tile-arrow { flex: none !important; }
.ch-tile-arrow .elementor-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--ch-green); display: flex; align-items: center; justify-content: center; }
.ch-tiles > .ch-tile:hover, .ch-tiles > .ch-tile.is-active { transform: translateY(-10px); outline-color: var(--ch-green); }
.ch-tiles > .ch-tile.is-active { border-bottom-right-radius: 64px; }
.ch-tile.is-active > .ch-tile-img { transform: scale(1.08); }
.ch-tile.is-active > .ch-tile-num { background: var(--ch-green); border-color: var(--ch-green); }
.ch-tile.is-active > .ch-tile-num .elementor-heading-title { color: var(--ch-ink) !important; }
.ch-svc-row { scroll-margin-top: 120px; }
.ch-row-media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.ch-row-media > .ch-abs { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; }
.ch-row-num {
	position: absolute !important;
	left: 24px; top: 24px;
	width: 64px !important; height: 64px;
	margin: 0 !important;
	border-radius: 50%;
	background: var(--ch-green);
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
}

/* About: values that light up in turn */
.ch-values { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 48px clamp(32px, 4vw, 64px) !important; }
.ch-values > .ch-value { width: auto !important; transition: border-color .5s; }
.ch-values > .ch-value.is-active { border-top-color: var(--ch-green) !important; }
.ch-value-num .elementor-heading-title { transition: color .5s; }
.ch-value.is-active .ch-value-num .elementor-heading-title { color: var(--ch-green) !important; }

/* Light process (About): navy text, cream number borders, faint rings */
.ch-process--light .ch-step-num { border-color: var(--ch-cream); }
.ch-process--light .ch-step-ring .ch-ring-track { stroke: rgba(38, 42, 120, .14); }
.ch-process--light .ch-step-circle { box-shadow: 0 6px 16px rgba(15, 17, 48, .08); }
.ch-process--light .ch-step.is-current .ch-step-circle { box-shadow: 0 18px 40px rgba(15, 17, 48, .18); }
.ch-js .ch-process--light .ch-step:not(.is-on) .ch-step-title .elementor-heading-title { color: #A8A498 !important; }
.ch-js .ch-process--light .ch-step:not(.is-on) .ch-step-desc { opacity: .4; }

/* Projects gallery (Elementor Basic Gallery + lightbox) */
.ch-gallery-count .ch-count-n { font-family: 'Source Serif 4', serif; font-size: 32px; color: var(--ch-navy); margin-right: 10px; vertical-align: -6px; }
.ch-gallery .gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 !important; }
.ch-gallery .gallery-item { position: relative; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.ch-gallery .gallery-icon a { display: block; position: relative; overflow: hidden; border-radius: 8px; cursor: zoom-in; }
.ch-gallery .gallery-icon img { width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 0 !important; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .3s; }
.ch-gallery .gallery-icon a:hover img { transform: scale(1.04); filter: brightness(1.06); }
.ch-gallery .gallery-icon a::after {
	content: "+";
	position: absolute;
	right: 12px; bottom: 12px;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--ch-green);
	color: var(--ch-ink);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 700;
	box-shadow: 0 8px 20px rgba(15, 17, 48, .25);
}
.ch-gallery .gallery-caption { display: none; }
@media (max-width: 1099px) { .ch-gallery .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ch-gallery .gallery { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* Contact: cards and the full form */
.ch-phone-card { text-decoration: none; transition: background-color .2s; }
.ch-phone-card:hover { background-color: #1C1F5C !important; }
.ch-call-now .elementor-heading-title::after {
	content: "→";
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; margin-left: 12px;
	border-radius: 50%;
	background: var(--ch-green); color: var(--ch-ink);
	font-size: 16px; letter-spacing: 0;
	vertical-align: middle;
}
.ch-town .elementor-heading-title { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--ch-cream); }
.ch-form-card--page { box-shadow: 0 30px 60px rgba(15, 17, 48, .08); }
.ch-form-card--page .mf-input-label { font-size: 13px; font-weight: 600; color: var(--ch-text); margin-bottom: 8px; }
.ch-form-card--page .mf-input,
.ch-form-card--page textarea.mf-input { border-radius: 8px; padding: 15px 16px; }
.ch-form-card--page textarea.mf-input { min-height: 120px; resize: vertical; }
.ch-field-grid { display: grid !important; grid-template-columns: 1fr; gap: 16px !important; }
@media (min-width: 640px) { .ch-field-grid { grid-template-columns: 1fr 1fr; } }
.ch-field-grid > .elementor-element { width: auto !important; }
.ch-interests .mf-input-label { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.ch-interests .mf-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-interests .mf-checkbox-option { display: inline-block !important; margin: 0 !important; padding: 0 !important; }
.ch-interests .mf-checkbox-option label { margin: 0; cursor: pointer; }
.ch-interests .mf-checkbox-option input { position: absolute; opacity: 0; pointer-events: none; }
.ch-interests .mf-checkbox-option input + span {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid #D9D5CA;
	background: #FFFFFF;
	color: var(--ch-navy);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: all .2s;
}
.ch-interests .mf-checkbox-option input + span::before { display: none !important; }
.ch-interests .mf-checkbox-option input:checked + span { background: var(--ch-navy); border-color: var(--ch-navy); color: #FFFFFF; }
.ch-interests .mf-checkbox-option input:focus-visible + span { outline: 2px solid var(--ch-green); outline-offset: 2px; }
.ch-form-card--page .metform-btn { width: auto !important; display: inline-flex !important; align-items: center; gap: 14px; padding: 8px 8px 8px 28px !important; }
/* Arrow chip drawn as a background image so it renders the same whatever icon markup MetForm outputs. */
.ch-form-card--page .metform-btn i,
.ch-form-card--page .metform-btn svg { display: none !important; }
.ch-form-card.ch-form-card--page .mf-btn-wraper .metform-btn,
.ch-form-card.ch-form-card--page .mf-btn-wraper .metform-btn:hover {
	min-height: 58px;
	padding: 8px 66px 8px 28px !important;
	background: var(--ch-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%230F1130'/%3E%3Cpath d='M14 21h14M23 15l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 42px 42px !important;
}
.ch-form-card.ch-form-card--page .mf-btn-wraper .metform-btn:hover { background-color: #4AA63D !important; }
.ch-interests .mf-input-label { display: block !important; float: none !important; width: auto !important; line-height: 1.5 !important; margin: 0 !important; padding-bottom: 12px; }
.ch-interests .mf-input-wrapper { display: block !important; }
.ch-interests .mf-checkbox { margin: 0 !important; position: static !important; }

/* --------------------------------------------------------------------------
   Mobile pass
   -------------------------------------------------------------------------- */
/* The closed menu card must not add height to the header pill; only the open one gets padding. */
@media (max-width: 1024px) {
	.ch-header-pill nav.hfe-dropdown:not(.menu-is-active) { padding: 0 !important; margin-top: 0 !important; box-shadow: none !important; }
	.ch-header-pill .elementor-widget-navigation-menu { align-self: center; }
}
/* Footer links keep their own colour on pages Elementor doesn't render (404, archives). */
.ch-footer .elementor-heading-title a,
.ch-footer .elementor-heading-title a:visited { color: inherit; }
@media (max-width: 639px) {
	/* Services tiles: two per row instead of ten full-screen cards. */
	.ch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
	.ch-tile > .ch-tile-num { left: 10px; top: 10px; width: 34px !important; height: 34px; }
	.ch-tile > .ch-tile-foot { left: 12px; right: 12px; bottom: 12px; }
	.ch-tile > .ch-tile-foot .elementor-heading-title { font-size: 15px !important; line-height: 1.15 !important; }
	.ch-tile-arrow .elementor-icon { width: 28px; height: 28px; }
	.ch-tile-arrow .elementor-icon svg, .ch-tile-arrow .elementor-icon i { font-size: 12px; width: 12px; height: 12px; }
	.ch-tiles > .ch-tile:hover, .ch-tiles > .ch-tile.is-active { transform: none; }
	.ch-tiles > .ch-tile.is-active { border-bottom-right-radius: 36px; }
	/* Projects gallery: two per row. */
	.ch-gallery .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ch-gallery .gallery-icon a::after { transform: scale(.8); right: 6px; bottom: 6px; }
}
/* Narrow phones (≤ 379px): the slider counter + arrows row needs ~360px, so shrink it to fit 320px. */
@media (max-width: 379px) {
	.ch-hero-count { gap: 8px !important; }
	.ch-hero-bar { width: 48px !important; }
	.ch-hero-arrows { gap: 8px !important; }
	.ch-hero-arrow .elementor-button { width: 46px; height: 46px; }
	.ch-hero-ring { width: 52px; height: 52px; left: -3px; top: -3px; }
	/* Longest slide button ("Creative outdoor services") must stay inside the navy panel. */
	.ch-slide-cta .elementor-button { font-size: 12px !important; letter-spacing: .06em !important; padding: 13px 16px !important; }
}
/* Safety net: nothing may widen the page sideways (clip, unlike hidden, keeps position: sticky working). */
html, body { max-width: 100%; }
body { overflow-x: clip; }
/* Header on phones/tablets: the hidden 240px sub-menu panels hang ~90px past the right edge, which widens
   the page and makes phones zoom out. Clipping the header sideways removes that without touching the menu;
   clip (not hidden) keeps the open ☰ card free to extend downwards. body's clip alone doesn't stop the
   mobile zoom-out, because it is propagated to the viewport. */
@media (max-width: 1024px) {
	#masthead, .ehf-header #masthead, header.site-header { overflow-x: clip; }
}
/* Sketch / finished-yard labels: together they need ~410px, so on phones shrink them and cap each at
   half the slider (minus the handle) so a long label wraps instead of running into the other one. */
@media (max-width: 767px) {
	.ch-compare > .ch-cmp-label { top: 12px; max-width: calc(50% - 22px); z-index: 5; }
	.ch-compare > .ch-cmp-label--l { left: 12px; }
	.ch-compare > .ch-cmp-label--r { right: 12px; }
	.ch-compare > .ch-cmp-label > .elementor-widget-container { padding: 7px 11px !important; }
	.ch-compare > .ch-cmp-label:not(:has(> .elementor-widget-container)) { padding: 7px 11px !important; }
	.ch-compare > .ch-cmp-label .elementor-heading-title { font-size: 10px !important; letter-spacing: .08em !important; line-height: 1.25 !important; white-space: normal; }
	.ch-compare > .ch-cmp-label--r .elementor-heading-title { text-align: right; }
	.ch-cmp-handle span { width: 52px; height: 52px; left: -26px; margin-top: -26px; }
}
/* Home banner on phones: a slimmer navy panel (~64% instead of ~80%) so more of each photo shows. */
@media (max-width: 767px) {
	.ch-slide > .ch-slide-panel {
		width: min(64%, 270px) !important;
		padding-left: 18px !important;
		padding-right: 16px !important;
		gap: 16px !important;
		border-bottom-right-radius: 48px;
	}
	.ch-slide-panel > .ch-slide-kicker .elementor-heading-title { font-size: 10px !important; letter-spacing: .12em !important; line-height: 1.35 !important; }
	.ch-slide-panel > .ch-slide-title .elementor-heading-title { font-size: clamp(22px, 6.6vw, 28px) !important; line-height: 1.12 !important; }
	.ch-slide-panel > .ch-slide-cta .elementor-button {
		font-size: 11px !important;
		letter-spacing: .06em !important;
		line-height: 1.3 !important;
		padding: 11px 14px !important;
		white-space: normal;
		text-align: left;
	}
}
/* ☰ button: the green circle (.hfe-nav-menu-icon) sat at the top of its 48px toggle box, so it looked
   higher than the logo. Centre it in the box and give it a fixed round size.
   Only where the ☰ shows (≤ 1024px): on desktop the toggle must stay hidden. */
@media (max-width: 1024px) {
.ch-header-pill .hfe-nav-menu__toggle { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 0 auto !important; }
.ch-header-pill .elementor-widget-navigation-menu { margin-left: auto !important; }
.ch-header-pill .hfe-nav-menu__toggle .hfe-nav-menu-icon {
	width: 42px; height: 42px;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
}
/* ☰ menu card: one row height and one left edge for every item. The desktop dropdown panel padding
   (10px) left ~20px gaps under Services/Pools while collapsed, and items with an arrow sat 5px further in. */
@media (max-width: 1024px) {
	.ch-header-pill nav.hfe-dropdown li.menu-item { margin: 0 !important; padding: 0 !important; border: 0 !important; }
	.ch-header-pill nav.hfe-dropdown .hfe-has-submenu-container { margin: 0 !important; padding: 0 !important; }
	.ch-header-pill nav.hfe-dropdown > ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item,
	.ch-header-pill nav.hfe-dropdown > ul.hfe-nav-menu > li.menu-item > .hfe-has-submenu-container > a.hfe-menu-item {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		min-height: 46px;
		padding: 12px 14px !important;
		line-height: 1.2 !important;
	}
	.ch-header-pill nav.hfe-dropdown .sub-arrow,
	.ch-header-pill nav.hfe-dropdown .hfe-menu-toggle {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		width: 22px; height: 22px;
		display: inline-flex !important;
		align-items: center; justify-content: center;
	}
	.ch-header-pill nav.hfe-dropdown .sub-menu { padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-width: 0 !important; }
	.ch-header-pill nav.hfe-dropdown .sub-menu a.hfe-sub-menu-item { padding: 10px 14px 10px 28px !important; }
	.ch-header-pill nav.hfe-dropdown .sub-menu a.hfe-sub-menu-item::after { display: none; }
}
/* What We Do marquee on phones: smaller pills (~46px tall instead of ~68px). */
@media (max-width: 767px) {
	.ch-marquee .ch-marq-track { gap: 10px !important; }
	.ch-marquee .ch-chip { gap: 10px !important; padding: 6px 18px 6px 6px !important; }
	.ch-chip-img,
	.ch-chip-img .elementor-widget-container { width: 32px !important; height: 32px; }
	.ch-chip-img img { width: 32px !important; height: 32px !important; }
	.ch-chip .elementor-heading-title { font-size: 14px !important; line-height: 1.2 !important; }
}
/* How a project runs on phones: step circles ~20% smaller (170px instead of 210px). */
@media (max-width: 767px) {
	.ch-step-circle { width: 170px !important; }
	.ch-step-ring { left: -11px; top: -11px; width: calc(100% + 22px); height: calc(100% + 22px); }
	.ch-step-num { width: 40px !important; height: 40px; bottom: -20px; }
}
/* "Contact Us" menu item (class ch-menu-cta): only in the phone ☰ menu, as a green pill button.
   Tablet and desktop keep the Contact Us button in the header bar instead. */
@media (min-width: 1025px) {
	.ch-header-pill li.ch-menu-cta { display: none !important; }
}
@media (max-width: 1024px) {
	.ch-header-pill nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item.ch-menu-cta { padding: 10px 0 2px !important; }
	/* Selector outranks the older "menu links are transparent" and cream-hover rules. */
	.ch-header-pill nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item.ch-menu-cta > a.hfe-menu-item,
	.ch-header-pill nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item.ch-menu-cta.current-menu-item > a.hfe-menu-item {
		justify-content: center !important;
		min-height: 48px;
		border-radius: 999px !important;
		background-color: var(--ch-green) !important;
		color: var(--ch-ink) !important;
		font-weight: 800 !important;
		font-size: 14px !important;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
	.ch-header-pill nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item.ch-menu-cta > a.hfe-menu-item:hover { background-color: #7FD16F !important; color: var(--ch-ink) !important; }
}
/* Tablet header: Logo | ……… Contact Us | ☰  (the button sits before the menu toggle, both on the right). */
@media (min-width: 768px) and (max-width: 1024px) {
	.ch-header-pill .elementor-widget-button { order: -1; margin-left: auto !important; }
	/* The menu widget otherwise stretches ~450px with the ☰ at its far end; shrink it to the button. */
	.ch-header-pill .elementor-widget-navigation-menu { margin-left: 0 !important; flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important; }
	.ch-header-pill > .e-con { justify-content: flex-end !important; }
	/* With the widget only 48px wide, anchor the open ☰ card to the whole header bar instead. */
	.ch-header-pill { position: relative !important; }
	.ch-header-pill > .e-con,
	.ch-header-pill .elementor-widget-navigation-menu,
	.ch-header-pill .elementor-widget-navigation-menu > .elementor-widget-container,
	.ch-header-pill .hfe-nav-menu { position: static !important; }
	.ch-header-pill nav.hfe-dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		z-index: 50;
	}
}
/* Home banner on tablets: a slightly wider panel and a compact CTA so "Creative outdoor services"
   stays inside the navy card (it needed ~280px in a ~238px space). Wraps rather than overflows. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ch-slide > .ch-slide-panel { width: clamp(320px, 44%, 440px) !important; }
	.ch-slide-panel > .ch-slide-cta { max-width: 100%; }
	.ch-slide-panel > .ch-slide-cta .elementor-button {
		max-width: 100%;
		font-size: 12px !important;
		letter-spacing: .06em !important;
		line-height: 1.3 !important;
		padding: 13px 18px !important;
		white-space: normal;
		text-align: left;
	}
}
/* How a project runs on tablets (4 in a row): every description is the same width and centred under its
   circle, with balanced line breaks and a shared minimum height so the four blocks line up. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ch-process .ch-step { align-items: center !important; }
	.ch-process .ch-step-title { width: 100% !important; }
	.ch-process .ch-step-desc {
		width: 100% !important;
		max-width: 170px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		min-height: 4.65em;
	}
	.ch-process .ch-step-desc p { font-size: 14px !important; line-height: 1.55 !important; text-align: center; text-wrap: balance; }
}
/* Phone ☰ card: inset the Contact Us pill from the card edges so the card's curved corner doesn't clip it. */
@media (max-width: 1024px) {
	.ch-header-pill nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item.ch-menu-cta { padding: 12px 14px 16px !important; box-sizing: border-box; width: 100% !important; }
	.ch-header-pill nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item.ch-menu-cta > a.hfe-menu-item { width: 100% !important; box-sizing: border-box; border: 0 !important; margin: 0 !important; }
}
/* Banner eyebrow ("In Business Since 1994 | 35 Years …"): room between lines when it wraps. */
.ch-slide-panel > .ch-slide-kicker .elementor-heading-title { line-height: 1.6 !important; }
/* Desktop: banner + the counter/arrows row below it fill exactly one screen (no gap before the next section).
   --ch-hero-bar is that row's height (~108px). */
@media (min-width: 1025px) {
	.ch-hero { --ch-hero-bar: 108px; height: max(520px, calc(100vh - var(--ch-hero-bar))) !important; }
	@supports (height: 100svh) { .ch-hero { height: max(520px, calc(100svh - var(--ch-hero-bar))) !important; } }
}

/* --------------------------------------------------------------------------
   Golf — rotating full-bleed photos, contour lines, counter + thumbnail strip
   -------------------------------------------------------------------------- */
.ch-mw-48 { max-width: 48ch; width: 100%; }
.ch-golf { position: relative; overflow: hidden; min-height: min(94vh, 880px); color: #FFFFFF; }
@media (max-width: 759px) { .ch-golf { min-height: 780px; } }
.ch-golf > .ch-golf-media,
.ch-golf > .ch-golf-shade,
.ch-golf > .ch-golf-contours { position: absolute !important; inset: 0; width: 100% !important; margin: 0 !important; }
.ch-golf > .ch-golf-shade {
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(15, 17, 48, .92) 0%, rgba(15, 17, 48, .7) 38%, rgba(15, 17, 48, .15) 75%),
		linear-gradient(0deg, rgba(15, 17, 48, .85) 0%, rgba(15, 17, 48, 0) 40%) !important;
}
.ch-golf > .ch-golf-contours { z-index: 3; pointer-events: none; opacity: .75; mix-blend-mode: screen; }
.ch-golf-contours svg { width: 100%; height: 100%; display: block; }
@keyframes chcontour { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
.ch-golf-media > .ch-golf-img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	opacity: 0;
	transform: scale(1);
	transition: opacity 1.4s ease, transform 7s ease-out;
}
.ch-golf-media > .ch-golf-img:first-child,
.ch-js .ch-golf-media > .ch-golf-img.is-active { opacity: 1; }
.ch-js .ch-golf-media > .ch-golf-img:not(.is-active) { opacity: 0; }
.ch-golf-media > .ch-golf-img.is-run { transform: scale(1.03); }
.ch-golf-img .elementor-widget-container,
.ch-golf-img figure,
.ch-golf-img img { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0; }
.ch-golf-img img { object-fit: cover; display: block; }
.ch-golf-img figcaption { display: none !important; }
.ch-golf > .ch-golf-inner {
	position: relative;
	z-index: 4;
	max-width: 1440px;
	margin: 0 auto !important;
	min-height: min(94vh, 880px);
	pointer-events: none;
}
@media (max-width: 759px) { .ch-golf > .ch-golf-inner { min-height: 780px; } }
.ch-golf-top, .ch-golf-bottom { pointer-events: auto; }
.ch-golf-top { max-width: 640px; }
.ch-golf-top .elementor-heading-title { text-wrap: balance; }
.ch-golf-counter { width: auto !important; flex: 0 0 auto !important; }
.ch-golf-num .elementor-heading-title { font-variant-numeric: tabular-nums; }
/* Ghost pill button (outlined on dark), arrow in an outlined circle. */
.ch-pill-btn--ghost .elementor-button-icon { background: transparent; border: 1px solid currentColor; color: #FFFFFF; }
.ch-pill-btn--ghost .elementor-button-icon svg { fill: currentColor; }
.ch-pill-btn--ghost .elementor-button:hover .elementor-button-icon { color: var(--ch-ink); }
.ch-pill-btn--ghost .elementor-button-text { text-transform: none; }
/* Thumbnail strip (buttons built by the theme script from the photos above). */
.ch-golf-strip { width: auto !important; flex: 0 1 auto !important; flex-wrap: wrap !important; }
.ch-golf-thumb {
	position: relative;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #1A1E52;
	transition: width .6s cubic-bezier(.65, 0, .25, 1), border-color .4s;
}
.ch-golf-thumb.is-active { width: 132px; border-color: var(--ch-green); }
.ch-golf-thumb:focus-visible { outline: 2px solid var(--ch-green); outline-offset: 2px; }
.ch-golf-thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; transition: opacity .4s; }
.ch-golf-thumb.is-active .ch-golf-thumb-img, .ch-golf-thumb:hover .ch-golf-thumb-img { opacity: 1; }
.ch-golf-thumb-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--ch-green); }
.ch-golf-thumb.is-run .ch-golf-thumb-bar { width: 100%; transition: width 6s linear; }
@media (max-width: 759px) {
	.ch-golf-thumb { width: 52px; height: 56px; }
	.ch-golf-thumb.is-active { width: 92px; }
}
/* In the Elementor editor, show the photos one under another so each is easy to pick and replace. */
.elementor-editor-active .ch-golf-media { position: relative !important; display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px; inset: auto; height: 160px; }
.elementor-editor-active .ch-golf-media > .ch-golf-img { position: relative !important; inset: auto; width: 100% !important; height: 160px; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
	.ch-golf-media > .ch-golf-img, .ch-golf-thumb, .ch-golf-thumb-bar { transition: none !important; }
	.ch-golf-contours path { animation: none !important; }
}
/* Golf on phones: text runs full width over the photo, so darken the whole photo evenly. */
@media (max-width: 767px) {
	.ch-golf > .ch-golf-shade {
		background: linear-gradient(180deg, rgba(15, 17, 48, .88) 0%, rgba(15, 17, 48, .72) 55%, rgba(15, 17, 48, .9) 100%) !important;
	}
	.ch-golf-strip { gap: 6px !important; flex-wrap: nowrap !important; }
}
/* Narrow phones: keep the five thumbnails on one row and the caption on one line. */
@media (max-width: 379px) {
	.ch-golf-thumb { width: 42px; height: 50px; }
	.ch-golf-thumb.is-active { width: 70px; }
	.ch-golf-counter { gap: 12px !important; }
	.ch-golf-num .elementor-heading-title { font-size: 36px !important; }
	.ch-golf-cap .elementor-heading-title { font-size: 12px !important; letter-spacing: .08em !important; }
}
/* Dropdown items: the decorative "→" rendered as a tiny green mark inside the text; remove it. */
.ch-header-pill .sub-menu a.hfe-sub-menu-item::before,
.ch-header-pill .sub-menu a.hfe-sub-menu-item::after { content: none !important; display: none !important; }
/* Golf photos: no zoom (enlarging softens small photos) and a light sharpening + contrast lift. */
.ch-golf-media > .ch-golf-img.is-run { transform: none; }
.ch-golf--sharp .ch-golf-img img { filter: url(#ch-sharpen) contrast(1.06) saturate(1.05); image-rendering: auto; }

/* --------------------------------------------------------------------------
   Responsive pass (phones + tablets, whole site)
   -------------------------------------------------------------------------- */
/* Eyebrow labels that wrap onto two lines: room between the lines, bar aligned to the first line. */
.ch-kicker .elementor-heading-title { line-height: 1.45 !important; align-items: flex-start; }
.ch-kicker .elementor-heading-title::before { margin-top: .32em; }
/* Inner-page banners on tablets: a wider navy panel so long titles don't squeeze into 5-6 lines. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ch-page-hero > .ch-ph-panel { width: clamp(380px, 52%, 520px) !important; }
}
/* "How it works" cells: three items sit in one row on tablets instead of 2 + an empty box. */
@media (min-width: 600px) {
	.ch-opts:has(> .ch-opt:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Home "Recent work" on small tablets (600-819px): two cards per row instead of four tall stacked cards. */
@media (min-width: 600px) and (max-width: 819px) {
	.ch-work-acc { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; }
	.ch-work-acc > .ch-work-card,
	.ch-work-acc > .ch-work-card.is-active { min-height: 400px; width: auto !important; }
}
/* Services tiles on narrow phones: titles wrap beside a smaller arrow instead of running into it. */
@media (max-width: 379px) {
	.ch-tile > .ch-tile-foot { left: 10px; right: 8px; bottom: 10px; gap: 6px !important; }
	.ch-tile > .ch-tile-foot > .elementor-widget-heading { flex: 1 1 auto !important; min-width: 0; }
	.ch-tile > .ch-tile-foot .elementor-heading-title { font-size: 13px !important; line-height: 1.15 !important; overflow-wrap: anywhere; }
	.ch-tile-arrow .elementor-icon { width: 24px; height: 24px; }
	.ch-tile > .ch-tile-num { left: 8px; top: 8px; width: 30px !important; height: 30px; }
}

/* Tablets work like phones: Contact Us lives in the ☰ menu card, not in the header bar. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ch-header-pill .elementor-widget-button { display: none !important; }
	.ch-header-pill .elementor-widget-navigation-menu { margin-left: auto !important; }
}
/* Projects gallery: 3 per row from small tablets up (was 2 below 1100px). The last photo keeps the same
   tile size as the rest, even when it sits alone or in a short last row. */
@media (min-width: 640px) {
	.ch-gallery .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px; }
}
@media (min-width: 1100px) { .ch-gallery .gallery { gap: 20px; } }
/* Projects gallery: every wrapper around the photo fills its cell (a <picture> or lazy-load wrapper added by
   an image plugin is inline by default, which left the photo at its small natural size in some browsers). */
.ch-gallery .gallery-item,
.ch-gallery .gallery-icon,
.ch-gallery .gallery-icon > a,
.ch-gallery .gallery-icon picture,
.ch-gallery .gallery-icon span { display: block !important; width: 100% !important; max-width: none !important; float: none !important; }
.ch-gallery .gallery-icon img { width: 100% !important; max-width: none !important; height: auto !important; min-width: 100%; }
.ch-gallery .gallery-item { justify-self: stretch; align-self: start; }
/* Rotating feature cells on phones and tablets: the big number sits above the title instead of in its own
   column, so the text uses the full card width (it was squeezed to 2-3 words a line in the 3-up tablet row). */
@media (max-width: 1024px) {
	.ch-opts > .ch-opt,
	.ch-opts > .ch-opt > .e-con-inner { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 14px !important; }
	.ch-opt-num { order: -1; }
	.ch-opt-text { width: 100% !important; }
}
@media (min-width: 600px) and (max-width: 1024px) {
	.ch-opts > .ch-opt { padding: 28px 24px 32px !important; }
	.ch-opt-num .elementor-heading-title { font-size: 40px !important; }
}
/* Desktop header dropdowns (Services, Pools): an invisible bridge over the ~12px gap between the menu item
   and its panel, so moving the mouse down to the panel no longer closes it. The panel also opens on a tap
   (touch screens with the desktop menu, e.g. iPad Pro; see initMenuTouch) and for keyboard focus. */
@media (min-width: 1025px) {
	.ch-header-pill .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item-has-children > .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 24px;
	}
	.ch-header-pill .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item-has-children.ch-sub-open > .sub-menu,
	.ch-header-pill .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item-has-children:focus-within > .sub-menu {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.ch-header-pill .hfe-nav-menu__layout-horizontal li.ch-sub-open > .hfe-has-submenu-container .sub-arrow i,
	.ch-header-pill .hfe-nav-menu__layout-horizontal li.ch-sub-open > .hfe-has-submenu-container .sub-arrow svg { transform: rotate(180deg); }
	/* Services/Pools highlight is a rounded pill like the other items (it was a square box on their own pages). */
	.ch-header-pill .hfe-nav-menu > li > .hfe-has-submenu-container,
	.ch-header-pill .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item { border-radius: 999px !important; }
}
/* Contact grid: photo + info cards on the left (owners' photo on top, Phone and Hours side by side, then
   Service Area), form on the right. Both columns share one top and bottom edge on desktop. */
.ch-owner-photo { aspect-ratio: 16 / 10; border-radius: 8px 8px 64px 8px; }
.ch-owner-photo img { object-position: 50% 6%; } /* tops of both heads in frame, a little headroom */
.ch-contact-duo > .e-con { flex: 1 1 0 !important; min-width: 0; }
@media (min-width: 1025px) {
	.e-con:has(> .ch-form-card--page) { align-items: stretch !important; }
	.e-con:has(> .ch-form-card--page) > .e-con { align-self: stretch !important; }
	.e-con:has(> .ch-area-card) > .ch-area-card { flex-grow: 1 !important; }
}
/* Small laptops: Phone and Hours stack (the pair is too narrow side by side), and the form card is a
   little slimmer-padded. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.ch-contact-duo { flex-direction: column !important; }
	.ch-form-card--page { padding: 32px !important; }
}
@media (max-width: 1024px) {
	.ch-owner-photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
	.ch-owner-photo { aspect-ratio: 4 / 3; }
	.ch-contact-duo { flex-direction: column !important; }
}
/* Phone + Hours side by side (1280px and up): slimmer padding and a phone number sized to stay on one line. */
@media (min-width: 1280px) {
	.ch-contact-duo > .e-con { padding: 32px !important; }
	.ch-contact-duo .ch-phone-card .elementor-widget-heading:nth-child(2) .elementor-heading-title { font-size: clamp(22px, 1.85vw, 28px) !important; white-space: nowrap; }
}