/* Keystone – small scoped styles for things Elementor controls can't express. */

/* Utilities */
.mt-auto { margin-top: auto; }
.ks-mb0 p:last-child { margin-bottom: 0; }
.ks-nowrap .elementor-heading-title { white-space: nowrap; }
.ks-balance .elementor-heading-title { text-wrap: balance; }
html { scroll-behavior: smooth; }
.elementor-element[id] { scroll-margin-top: 120px; }

/* Eyebrow label: short rule before the text */
.ks-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.ks-eyebrow .elementor-heading-title::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }

/* Faint grid pattern on dark sections (hero, how it works, booking) */
.ks-grid-bg::after {
	content: ""; position: absolute; inset: 0 0 25% 0; pointer-events: none;
	background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
	background-size: 56px 56px; background-position: center top;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
}
.ks-grid-bg > .e-con-inner { position: relative; z-index: 1; }

/* Card lift transition */
.ks-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; }

/* Service card price */
.ks-price strong { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 700; color: var(--e-global-color-primary); }

/* About checklist: two-column grid with rules */
.ks-grid-list .elementor-icon-list-items.elementor-icon-list-items {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px;
}
.ks-grid-list .elementor-icon-list-items .elementor-icon-list-item.elementor-icon-list-item {
	margin: 0; padding: 16px 0; border-top: 1px solid #D9DFE7;
}

/* Hero slider: segmented progress bars instead of dots */
.ks-hero-carousel .swiper-pagination.swiper-pagination { display: flex; gap: 6px; width: 100%; left: 0; transform: none; }
.ks-hero-carousel .swiper-pagination .swiper-pagination-bullet { flex: 1; height: 4px; width: auto; border-radius: 0; margin: 0; opacity: 1; background: rgba(255,255,255,.2); }
.ks-hero-carousel .swiper-pagination .swiper-pagination-bullet-active { background: var(--e-global-color-secondary); }

/* Reviews carousel: pill-shaped dots */
.ks-reviews-carousel .swiper-pagination .swiper-pagination-bullet { width: 14px; height: 6px; border-radius: 3px; opacity: 1; background: rgba(255,255,255,.25); transition: all .3s; }
.ks-reviews-carousel .swiper-pagination .swiper-pagination-bullet-active { width: 34px; background: var(--e-global-color-secondary); }

/* Before / after compare (enhanced by custom.js; without JS both photos simply stack) */
.ks-compare.is-ready { position: relative; aspect-ratio: 16 / 8; min-height: 260px; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; }
.ks-compare.is-ready > .elementor-element { position: absolute; inset: 0; margin: 0; width: 100%; }
.ks-compare.is-ready img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.ks-compare.is-ready .ks-compare__before { clip-path: inset(0 calc(100% - var(--ks-pos, 50%)) 0 0); }
.ks-compare__line { position: absolute; top: 0; bottom: 0; left: var(--ks-pos, 50%); width: 3px; margin-left: -1.5px; background: var(--e-global-color-secondary); pointer-events: none; z-index: 2; }
.ks-compare button.ks-compare__handle {
	position: absolute; top: 50%; left: var(--ks-pos, 50%); transform: translate(-50%, -50%); z-index: 3;
	width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--e-global-color-secondary);
	background: var(--e-global-color-primary); color: #fff; font: 700 15px/1 Montserrat, sans-serif; cursor: ew-resize;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); padding: 0;
}
.ks-compare button.ks-compare__handle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ZIP checker */
.ks-zip { display: flex; gap: 8px; }
.ks-zip__label { flex: 1; min-width: 0; }
.ks-zip-wrap .ks-zip input { width: 100%; height: 54px; border: 0; border-radius: 6px; padding: 0 16px; font-size: 16px; color: var(--e-global-color-primary); background: #fff; }
.ks-zip input:focus { outline: 3px solid var(--e-global-color-secondary); outline-offset: 1px; }
.ks-zip-wrap .ks-zip button { height: 54px; padding: 0 24px; background: var(--e-global-color-secondary); color: #061224; border: 0; border-radius: 6px; font-weight: 700; font-size: 15px; cursor: pointer; }
.ks-zip-wrap .ks-zip button:hover, .ks-zip-wrap .ks-zip button:focus { background: #E6A619; color: #061224; }
.ks-zip__msg { margin-top: 16px; font-size: 14px; font-weight: 600; line-height: 1.5; padding: 12px 14px; border-radius: 6px; color: #fff; background: #1C7A4E; }
.ks-zip__msg.is-error { background: #A3261E; }

/* Contact Form 7 booking form */
.ks-booking .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.ks-booking .ks-form__row { display: flex; flex-wrap: wrap; gap: 16px; }
.ks-booking .ks-form__field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--e-global-color-primary); }
.ks-booking .wpcf7-form-control-wrap { display: block; }
.ks-booking.ks-booking .wpcf7 input:not([type="submit"]):not([type="checkbox"]), .ks-booking.ks-booking .wpcf7 select, .ks-booking.ks-booking .wpcf7 textarea {
	width: 100%; border: 1px solid #CBD3DE; border-radius: 3px; padding: 0 14px; font: 400 15px Montserrat, sans-serif; color: var(--e-global-color-primary); background-color: #fff;
}
.ks-booking.ks-booking .wpcf7 input:not([type="submit"]):not([type="checkbox"]), .ks-booking.ks-booking .wpcf7 select { height: 52px; }
.ks-booking.ks-booking .wpcf7 textarea { padding: 12px 14px; resize: vertical; min-height: 110px; }
.ks-booking.ks-booking .wpcf7 select { padding-right: 44px; }
.ks-booking input:focus, .ks-booking select:focus, .ks-booking textarea:focus { outline: 2px solid var(--e-global-color-secondary); outline-offset: 1px; border-color: var(--e-global-color-navy2); }
.ks-booking .wpcf7 input.ks-form__submit {
	width: 100%; height: 58px; background: var(--e-global-color-secondary); color: #061224; border: 0; border-radius: 3px; font: 700 16px Montserrat, sans-serif; cursor: pointer;
}
.ks-booking .wpcf7 input.ks-form__submit:hover, .ks-booking .wpcf7 input.ks-form__submit:focus { background: #E6A619; color: #061224; }
.ks-booking .ks-form__note { margin: 0; font-size: 12px; color: var(--e-global-color-muted); text-align: center; }
.ks-booking .wpcf7-spinner { position: absolute; }
.ks-booking .wpcf7-not-valid-tip { font-size: 12px; font-weight: 600; margin-top: 4px; color: #A3261E; }
.ks-booking .wpcf7-response-output { margin: 0 !important; padding: 12px 14px !important; border-radius: 4px; font-size: 14px; line-height: 1.5; }
.ks-booking .wpcf7 form.sent .wpcf7-response-output { border-color: #1C7A4E; background: #E6F4EC; color: #1C7A4E; }

/* Header nav dropdown width */
.ks-nav .sub-menu { min-width: 260px; padding: 8px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ks-lift, .ks-lift:hover { transition: none; transform: none !important; }
}

/* FAQ: question and answer share one card; round icon chip */
.ks-faq .e-n-accordion-item { background: #fff; border: 1px solid var(--e-global-color-border); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.ks-faq .e-n-accordion-item[open] { border-color: var(--e-global-color-primary); box-shadow: 0 14px 30px rgba(10,28,51,.08); }
.ks-faq .e-n-accordion-item-title-icon > span { width: 32px; height: 32px; border-radius: 50%; background: var(--e-global-color-altbg); display: flex; align-items: center; justify-content: center; }
.ks-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon > span { background: var(--e-global-color-secondary); }

/* Custom select arrow: applies to every Contact Form 7 select, and to any select inside an element with class "ks-select".
   Change the arrow colour/size here in one place. */
.wpcf7-form select.wpcf7-select,
.ks-select select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	padding-right: 44px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230A1C33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 14px;
	cursor: pointer;
}
.wpcf7-form select.wpcf7-select::-ms-expand { display: none; }

/* Grid helper: add class "ks-grid-1col-xs" to any grid container to drop it to one column on small phones (≤480px). */
@media (max-width: 480px) {
	.elementor-element.e-con.ks-grid-1col-xs.ks-grid-1col-xs { --e-con-grid-template-columns: repeat(1, 1fr); --e-con-grid-template-rows: none; }
}


/* Booking form: full-width fields sit directly in the vertical form, so they must not grow (flex-basis would become height). */
.ks-booking .wpcf7-form > .ks-form__field { flex: none; }
/* "Urgent" checkbox (Contact page form) */
.ks-booking .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.ks-booking .wpcf7-checkbox label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--e-global-color-text); cursor: pointer; }
.ks-booking .wpcf7-checkbox input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--e-global-color-primary); }

/* Check-list grid: explicit columns (an auto-fit grid inside a flex column gets measured too tall on some widths). */
@media (max-width: 480px) {
	.ks-grid-list .elementor-icon-list-items.elementor-icon-list-items { grid-template-columns: minmax(0, 1fr); }
}