/*
Theme Name: OceanWP Child – Power Automotive
Theme URI:
Template: oceanwp
Author: MetaWeb
Author URI: https://metaweb.net.au
Description: Child theme for Power Automotive and Mechanical Servicing. Layouts are built in Elementor; this file holds site-wide base styles and styles for shortcode/JS output only.
Version: 1.0.0
Text Domain: oceanwp-child
*/

/* ==========================================================================
   1. Tokens (mirrors the Elementor global variables so non-Elementor output
      such as shortcodes, forms and Trustindex can use the same values)
   ========================================================================== */
:root {
	--pa-orange: #E75301;
	--pa-orange-light: #FE6C1C;
	--pa-orange-tint: #FDF0E9;
	--pa-dark: #1A1A1A;
	--pa-dark-2: #2A2A2A;
	--pa-black: #000000;
	--pa-white: #FFFFFF;
	--pa-grey: #E8E8E8;
	--pa-text-muted: #555555;
	--pa-radius-sm: 10px;
	--pa-radius-md: 20px;
	--pa-radius-lg: 30px;
	--pa-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pa-font-heading: "Archivo", system-ui, sans-serif;
}

/* ==========================================================================
   2. Base / OceanWP resets
   ========================================================================== */
body {
	font-family: var(--pa-font-body);
	color: var(--pa-black);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* OceanWP wraps the Elementor header in #site-header – make the wrapper neutral. */
#site-header {
	background: transparent;
	border-bottom: 0;
}

/* Elementor pages handle their own spacing. */
.elementor-page #content-wrap,
.elementor-page #main #content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

img {
	height: auto;
	max-width: 100%;
}

/* Keyboard focus that is visible on light and dark sections. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--pa-orange-light);
	outline-offset: 3px;
}

/* Never allow horizontal page scroll from off-canvas elements. */
html,
body {
	overflow-x: clip;
}

.screen-reader-text:focus {
	clip: auto !important; /* WP core a11y pattern */
	background: var(--pa-white);
	color: var(--pa-black);
	padding: 12px 18px;
	z-index: 100000;
}

/* ==========================================================================
   3. Carousel controls (markup added by pa-site JS to every .pa-carousel)
   ========================================================================== */
.pa-carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 22px;
}

.pa-carousel-nav[hidden] {
	display: none;
}

.pa-carousel-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--pa-black);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.pa-carousel-nav__btn:hover:not(:disabled) {
	background: var(--pa-orange);
	border-color: var(--pa-orange);
	color: var(--pa-white);
}

.pa-carousel-nav__btn:disabled {
	opacity: .35;
	cursor: default;
}

.pa-carousel-nav__dots {
	display: flex;
	gap: 6px;
}

.pa-carousel-nav__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: rgba(0, 0, 0, .2);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

/* Larger hit-area without changing the visual dot. */
.pa-carousel-nav__dot {
	position: relative;
}

.pa-carousel-nav__dot::after {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

.pa-carousel-nav__dot[aria-current="true"] {
	width: 26px;
	background: var(--pa-orange);
}

/* Variant for dark sections: add class .pa-on-dark to the section. */
.pa-on-dark .pa-carousel-nav__btn {
	color: var(--pa-white);
}

.pa-on-dark .pa-carousel-nav__dot {
	background: rgba(255, 255, 255, .3);
}

.pa-on-dark .pa-carousel-nav__dot[aria-current="true"] {
	background: var(--pa-orange-light);
}

/* Hide native scrollbar on touch carousels (dots + buttons replace it). */
.pa-carousel {
	scrollbar-width: none;
}

.pa-carousel::-webkit-scrollbar {
	display: none;
}

/* ==========================================================================
   4. Shortcode output
   ========================================================================== */

/* [pa_hours] */
.pa-hours {
	margin: 0;
	display: grid;
	gap: 0;
}

.pa-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	font-size: 17px;
	line-height: 1.5;
}

.pa-hours__row:last-child {
	border-bottom: 0;
}

.pa-hours dt {
	font-weight: 600;
}

.pa-hours dd {
	margin: 0;
	text-align: right;
	font-weight: 300;
}

.pa-on-dark .pa-hours__row {
	border-color: rgba(255, 255, 255, .15);
	color: var(--pa-white);
}

/* [pa_contact_list] */
.pa-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.pa-contact-list__item {
	display: grid;
	gap: 2px;
	font-size: 18px;
	line-height: 1.5;
}

.pa-contact-list__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pa-orange);
}

.pa-contact-list a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(231, 83, 1, .45);
	text-underline-offset: 4px;
}

.pa-contact-list a:hover {
	color: var(--pa-orange);
}

.pa-pending {
	color: var(--pa-text-muted);
	font-style: italic;
	font-weight: 300;
}

.pa-on-dark .pa-contact-list__item,
.pa-on-dark .pa-pending {
	color: var(--pa-white);
}

/* [pa_map] */
.pa-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--pa-radius-md);
	overflow: hidden;
	background: var(--pa-grey);
}

.pa-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.pa-map--pending {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	text-align: center;
	background:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, .03) 0 12px, transparent 12px 24px),
		var(--pa-orange-tint);
	color: var(--pa-text-muted);
	font-size: 17px;
}

@media (max-width: 767px) {
	.pa-map {
		aspect-ratio: 4 / 3;
	}
}

/* [pa_service_list] */
.pa-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 48px;
}

.pa-list__item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.pa-list__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pa-orange);
	color: var(--pa-white);
	font-family: var(--pa-font-heading);
	font-weight: 600;
	font-size: 15px;
}

.pa-list--check .pa-list__marker::before {
	content: "";
	width: 14px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(-45deg);
}

.pa-list__title {
	margin: 4px 0 6px;
	font-family: var(--pa-font-heading);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	color: inherit;
}

.pa-list__text {
	margin: 0;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
}

@media (max-width: 1024px) {
	.pa-list {
		gap: 24px 32px;
	}
}

@media (max-width: 767px) {
	.pa-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.pa-list__title {
		font-size: 19px;
	}
}

.pa-on-dark .pa-list__item {
	border-color: rgba(255, 255, 255, .15);
	color: var(--pa-white);
}

/* [pa_nearby] */
.pa-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pa-pills li {
	padding: 10px 20px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 90px;
	font-size: 16px;
	font-weight: 500;
	background: var(--pa-white);
}

/* ==========================================================================
   5. Forms (Elementor atomic form) – consistent fields everywhere
   ========================================================================== */
.pa-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.pa-form select,
.pa-form textarea {
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	border: 1px solid #D6D6D6;
	border-radius: 8px;
	background: var(--pa-white);
	color: var(--pa-black);
	font-family: var(--pa-font-body);
	font-size: 16px; /* 16px stops iOS zoom on focus */
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.pa-form textarea {
	min-height: 150px;
	resize: vertical;
}

.pa-form input:focus,
.pa-form select:focus,
.pa-form textarea:focus {
	border-color: var(--pa-orange);
	box-shadow: 0 0 0 3px rgba(231, 83, 1, .18);
	outline: none;
}

.pa-form input:user-invalid,
.pa-form select:user-invalid,
.pa-form textarea:user-invalid {
	border-color: #C62828;
}

.pa-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E75301' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 44px;
}

.pa-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 15px;
}

/* ==========================================================================
   6. Trustindex Google Reviews – match site typography and colours
   ========================================================================== */
.pa-reviews .ti-widget {
	font-family: var(--pa-font-body) !important; /* Trustindex sets inline-priority fonts */
}

.pa-reviews .ti-widget .ti-review-item > .ti-inner,
.pa-reviews .ti-widget .ti-review-item .ti-inner {
	border-radius: var(--pa-radius-md) !important;
	border: 1px solid #EDEDED !important;
	background: var(--pa-white) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06) !important;
}

.pa-reviews .ti-widget .ti-name {
	font-family: var(--pa-font-heading) !important;
	font-weight: 600 !important;
}

.pa-reviews .ti-widget .ti-controls .ti-next,
.pa-reviews .ti-widget .ti-controls .ti-prev {
	background-color: var(--pa-orange) !important;
	border-radius: 50% !important;
}

.pa-reviews .ti-widget .ti-controls-line .dot.active {
	background: var(--pa-orange) !important;
}

/* ==========================================================================
   8. Figma motion (classes applied in Elementor; JS in functions.php)
   ========================================================================== */

/* Figma prototype easings: EASE_OUT / EASE_IN_AND_OUT */
:root {
	--pa-ease-out: cubic-bezier(0, 0, .58, 1);
	--pa-ease-in-out: cubic-bezier(.42, 0, .58, 1);
}

/* Ticker marquee – Figma "Group 221": 1030px every 10s, linear (103px/s at 1920) */
.pa-ticker-track.is-running {
	animation: pa-marquee var(--pa-marquee-time, 30s) linear infinite;
	will-change: transform;
}

@keyframes pa-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--pa-marquee-shift, 50%))); }
}

/* Rolling counter – Figma "Frame 3": 01+ → 05+, 0.5s pause then 1.5s ease-out per step.
   The Elementor Counter widget (class pa-counter) stays the source of the numbers;
   JS lays a strip of its values over it. */
.pa-counter .elementor-counter-number-wrapper.pa-roll-ready {
	position: relative;
}

.pa-counter .pa-roll-ready > span:not(.pa-roll-strip) {
	opacity: 0;
}

.pa-counter .pa-roll-strip {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	white-space: nowrap;
	transition: transform 1.5s var(--pa-ease-out);
	will-change: transform;
}

.pa-counter .pa-roll-strip > span {
	display: block;
}

/* Header – Figma "Frame 2": the bar and car slide in from the left,
   0.8s after load, 3s ease-out (html.pa-js is set in <head>) */
.pa-js .pa-hdr-slide {
	transform: translateX(-111vw);
}

.pa-js .pa-hdr-slide.is-in {
	transform: translateX(0);
	transition: transform 3s var(--pa-ease-out) .8s;
}

/* Service cards – Figma "Group 18413108" hover (0.3s ease-in-out):
   photo zooms, grey bar slides out from behind the icon block,
   icon block turns orange with a white icon, title moves right. */
.pa-card > :has(> .pa-card-ic) {
	isolation: isolate;
	overflow: hidden;
}

.pa-card > :has(> .pa-card-ic)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 14.93%;
	right: 0;
	z-index: 0;
	background: #e8e8e8;
	border-end-end-radius: 10px;
	transform: translateX(-100%);
	transition: transform .3s var(--pa-ease-in-out);
}

.pa-card .pa-card-ic {
	position: relative;
	z-index: 2;
}

.pa-card .pa-card-ic img {
	transition: filter .3s var(--pa-ease-in-out);
}

.pa-card .pa-card-ic + * {
	position: relative;
	z-index: 1;
	transform: translateX(calc(-41 * var(--pa-u)));
	transition: transform .3s var(--pa-ease-in-out);
}

.pa-card .pa-card-media img {
	transform-origin: 50% 77.6%;
	filter: grayscale(1);
	transition: transform .3s var(--pa-ease-in-out), filter .3s var(--pa-ease-in-out);
}

/* Photo is black and white at rest and returns to colour on hover (Figma Default variant).
   A filter is used instead of the luminosity blend so the change can animate. */
.elementor .pa-card .pa-card-media {
	mix-blend-mode: normal;
}

.pa-card:hover > :has(> .pa-card-ic)::before,
.pa-card:focus-visible > :has(> .pa-card-ic)::before {
	transform: translateX(0);
}

.pa-card:hover .pa-card-ic img,
.pa-card:focus-visible .pa-card-ic img {
	filter: brightness(0) invert(1);
}

.pa-card:hover .pa-card-ic + *,
.pa-card:focus-visible .pa-card-ic + * {
	transform: translateX(calc(58.5 * var(--pa-u)));
}

.pa-card:hover .pa-card-media img,
.pa-card:focus-visible .pa-card-media img {
	transform: scale(1.1575);
	filter: grayscale(0);
}

@media (max-width: 1024px) {
	.pa-card .pa-card-ic + *,
	.pa-card:hover .pa-card-ic + *,
	.pa-card:focus-visible .pa-card-ic + * {
		transform: none;
	}
}

/* Joel – Figma "Group 4": when the pointer reaches the lower half of the
   dark box the car drives down into place (0.3s ease-out, one way). */
.pa-drive-scene.is-driving .pa-drive-car {
	transform-origin: 50% 0;
	transform: translateY(calc(-427 * var(--pa-u))) scale(.888);
	transition: transform .3s var(--pa-ease-out);
}

.pa-drive-scene.is-driving.is-on .pa-drive-car {
	transform: none;
}

@media (max-width: 1024px) {
	.pa-drive-scene.is-driving .pa-drive-car {
		transform: none;
	}
}

/* Gallery – Figma "Group 1": three states driven by pointer zones
   (hidden at the anchor → stacked in the centre → 3×2 grid), 0.3s ease-out.
   JS writes the transforms; CSS supplies the timing. */
.pa-fly-scope.is-flying .pa-fly-tile {
	transform-origin: 50% 50%;
	transition: transform .3s var(--pa-ease-out), opacity .3s var(--pa-ease-out);
	will-change: transform, opacity;
}

.pa-fly-scope.is-flying .pa-words {
	opacity: 0;
	transition: opacity .3s var(--pa-ease-out);
}

.pa-fly-scope.is-flying.is-grid .pa-words {
	opacity: 1;
}

/* Figma Default state: no centre video and no gallery tiles until the
   pointer zone fires; hidden from first paint so nothing flashes. */
@media (min-width: 1025px) {
	.pa-js .pa-fly-anchor {
		opacity: 0;
	}

	.pa-js .pa-fly-scope:not(.is-flying) .pa-fly-tile,
	.pa-js .pa-fly-scope:not(.is-flying) .pa-words {
		opacity: 0;
	}
}

@media (max-width: 1024px) {
	.pa-fly-scope .pa-fly-tile {
		transform: none !important; /* JS writes inline transforms on desktop only */
		opacity: 1 !important;
		z-index: auto !important;
	}

	.pa-fly-scope.is-flying .pa-words {
		opacity: 1;
	}
}

/* Word line – Figma "Group 2": outlined / black / orange */
.pa-words i {
	font-style: normal;
	color: transparent;
	-webkit-text-stroke: 1px currentColor;
	-webkit-text-stroke-color: #000;
}

@media (prefers-reduced-motion: reduce) {
	.pa-ticker-track.is-running {
		animation: none;
	}

	.pa-js .pa-hdr-slide,
	.pa-drive-scene.is-driving .pa-drive-car {
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   9. Inner pages
   ========================================================================== */

/* Service and workshop pages use Theme Builder single templates – let them
   run edge to edge instead of inside OceanWP's boxed content wrapper. */
.single-service #content-wrap,
.single-location #content-wrap {
	width: 100%;
	max-width: none;
	padding: 0 !important; /* OceanWP sets padding on #main #content-wrap */
}

.single-service #primary,
.single-location #primary {
	width: 100%;
	float: none;
	padding: 0;
}

/* Post body (Theme Builder Post Content slot on service / workshop pages) */
.pa-prose {
	font-family: var(--pa-font-body);
	font-weight: 300;
	font-size: max(16px, calc(18 * var(--pa-u, 1px)));
	line-height: 1.85;
	color: var(--pa-black);
}

.pa-prose > :first-child,
.pa-prose .elementor-widget-container > :first-child {
	margin-top: 0;
}

.pa-prose h2 {
	margin: 1.6em 0 .6em;
	font-family: var(--pa-font-heading);
	font-weight: 400;
	font-size: max(28px, calc(44 * var(--pa-u, 1px)));
	line-height: 1.2;
	color: var(--pa-black);
}

.pa-prose h3 {
	margin: 1.4em 0 .5em;
	font-family: var(--pa-font-heading);
	font-weight: 600;
	font-size: max(20px, calc(26 * var(--pa-u, 1px)));
	line-height: 1.3;
	color: var(--pa-black);
}

.pa-prose p,
.pa-prose li {
	color: #222222;
}

.pa-prose p {
	margin: 0 0 1.1em;
}

.pa-prose a {
	color: var(--pa-orange);
	text-underline-offset: 3px;
}

.pa-prose ul:not([class]),
.pa-prose ol:not([class]) {
	margin: 0 0 1.2em;
	padding-left: 1.2em;
}

.pa-sec {
	margin-top: max(48px, calc(80 * var(--pa-u, 1px)));
}

.pa-sec > h2 {
	margin-top: 0;
	margin-bottom: max(20px, calc(32 * var(--pa-u, 1px)));
}

.pa-prose .pa-list__title {
	margin: 4px 0 6px;
	font-size: max(19px, calc(22 * var(--pa-u, 1px)));
}

.pa-prose .pa-list__text {
	margin: 0;
	font-size: max(15px, calc(17 * var(--pa-u, 1px)));
	line-height: 1.75;
}

/* Sidebar sticks beside long service copy on desktop */
@media (min-width: 1025px) {
	.pa-sticky {
		position: sticky;
		top: 30px;
	}
}

/* Service loop cards: description under the title bar */
.pa-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pa-card .pa-more {
	color: var(--pa-orange);
	font-weight: 600;
	transition: color .2s ease;
}

.pa-card:hover .pa-more,
.pa-card:focus-visible .pa-more {
	color: var(--pa-black);
}

/* Loops: carousel behaviour for the e-collection-loop layout on small screens */
.pa-loop-swipe .e-collection-loop-layout-base {
	padding: 0;
}

@media (max-width: 1024px) {
	.pa-loop-swipe .e-collection-loop-layout-base {
		display: flex !important; /* the loop layout is a grid by default */
		flex-wrap: nowrap;
		gap: 18px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.pa-loop-swipe .e-collection-loop-layout-base::-webkit-scrollbar {
		display: none;
	}

	.pa-loop-swipe .e-collection-loop-layout-base > * {
		flex: 0 0 calc(50% - 9px);
		min-width: 0;
		scroll-snap-align: start;
	}
}

@media (max-width: 767px) {
	.pa-loop-swipe .e-collection-loop-layout-base > * {
		flex-basis: 86%;
	}
}

/* Hero image placeholder text shown only to editors when no featured image */
.pa-hero-media img[src=""] {
	display: none;
}

/* ==========================================================================
   10. Footer – menus, phone rows, accordion (tablet / mobile)
   ========================================================================== */

/* WordPress menus in the footer columns (Elementor Nav Menu, vertical) */
.pa-foot-body .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
	padding: 0;
	font-family: var(--pa-font-body);
	font-weight: 300;
	font-size: max(15px, calc(18 * var(--pa-u, 1px)));
	line-height: 2.125;
	color: var(--pa-white);
	transition: color .2s ease;
}

.pa-foot-body .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.pa-foot-body .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus-visible,
.pa-foot-body .elementor-nav-menu--main .elementor-nav-menu a.elementor-item-active {
	color: var(--pa-orange-light);
}

.pa-foot-body .elementor-nav-menu--main .elementor-nav-menu a.elementor-item::before,
.pa-foot-body .elementor-nav-menu--main .elementor-nav-menu a.elementor-item::after {
	display: none;
}

.pa-foot-body .elementor-widget-nav-menu,
.pa-foot-body .elementor-nav-menu--main {
	width: 100%;
}

/* Accordion: JS adds .pa-foot-acc to the columns wrapper and a toggle button to each heading */
.pa-foot-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.pa-foot-toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .3s ease, color .2s ease;
}

.pa-foot-col.is-open .pa-foot-toggle::after {
	color: var(--pa-orange-light);
	transform: translateY(2px) rotate(-135deg);
}

.pa-foot-toggle:focus-visible {
	outline: 2px solid var(--pa-orange-light);
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	.pa-foot-acc {
		display: flex !important; /* overrides the Elementor grid used before JS runs */
		flex-direction: column !important;
		gap: 0 !important;
	}

	.pa-foot-acc > .pa-foot-col {
		width: 100%;
		padding: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, .14);
	}

	.pa-foot-acc > .pa-foot-col > .pa-foot-h {
		padding: 16px 0;
		line-height: 1.4;
	}

	.pa-foot-acc .pa-foot-body {
		overflow: hidden;
		gap: 4px;
		transition: height .35s ease, visibility 0s linear 0s;
	}

	.pa-foot-acc .pa-foot-body > :last-child {
		margin-bottom: 18px;
	}

	.pa-foot-acc .pa-foot-col:not(.is-open) .pa-foot-body {
		height: 0;
		visibility: hidden;
		transition: height .35s ease, visibility 0s linear .35s;
	}
}

/* ==========================================================================
   11. Call cards (Booking CTA component and sidebars)
   ========================================================================== */
.pa-call-card::after {
	content: "\2192" / "";
	margin-inline-start: auto;
	font-size: 22px;
	line-height: 1;
	color: var(--pa-orange-light);
	transition: transform .25s ease;
}

.pa-call-card:hover::after,
.pa-call-card:focus-within::after {
	transform: translateX(5px);
}

/* The number link covers the whole card so the full row is clickable */
.pa-call-num a {
	color: inherit;
	text-decoration: none;
}

.pa-call-num a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pa-call-num a:focus-visible {
	outline: none;
}

.pa-call-num a:focus-visible::before {
	outline: 2px solid var(--pa-orange-light);
	outline-offset: 3px;
}

/* ==========================================================================
   12. Service detail body
   ========================================================================== */

/* Opening heading: short orange rule above it */
.single-service .pa-prose > h2:first-child,
.single-service .pa-prose .elementor-widget-theme-post-content > h2:first-child {
	position: relative;
	margin-top: 0;
	padding-top: 26px;
	max-width: 22ch;
}

.single-service .pa-prose > h2:first-child::before,
.single-service .pa-prose .elementor-widget-theme-post-content > h2:first-child::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 4px;
	border-radius: 4px;
	background: var(--pa-orange);
}

.single-service .pa-prose > h2:first-child + p,
.single-service .pa-prose .elementor-widget-theme-post-content > h2:first-child + p {
	font-size: max(18px, calc(22 * var(--pa-u, 1px)));
	line-height: 1.7;
	color: var(--pa-black);
	font-weight: 400;
}

.pa-sec__eyebrow {
	margin: 0 0 10px !important;
	font-family: var(--pa-font-body);
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pa-orange) !important;
}

/* What's included – card grid */
.pa-sec--included .pa-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.pa-sec--included .pa-list__item {
	flex-direction: column;
	gap: 16px;
	padding: 26px 26px 28px;
	border: 1px solid #ECECEC;
	border-radius: 18px;
	background: #F7F7F7;
	transition: background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.pa-sec--included .pa-list__item:hover {
	background: var(--pa-white);
	border-color: rgba(231, 83, 1, .35);
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35);
	transform: translateY(-4px);
}

.pa-sec--included .pa-list__marker {
	width: 46px;
	height: 46px;
	background: var(--pa-orange-tint);
	color: var(--pa-orange);
	transition: background-color .3s ease, color .3s ease;
}

.pa-sec--included .pa-list__item:hover .pa-list__marker {
	background: var(--pa-orange);
	color: var(--pa-white);
}

.pa-sec--included .pa-list__title {
	margin: 0 0 6px;
}

/* Why it matters – dark numbered panel */
.pa-sec--benefits {
	position: relative;
	overflow: hidden;
	padding: max(32px, calc(56 * var(--pa-u, 1px)));
	border-radius: 24px;
	background: #111111;
	color: var(--pa-white);
}

.pa-sec--benefits::before {
	content: "";
	position: absolute;
	right: -160px;
	bottom: -220px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(254, 108, 28, .32) 0%, rgba(254, 108, 28, 0) 68%);
	pointer-events: none;
}

.pa-sec--benefits > * {
	position: relative;
}

.pa-prose .pa-sec--benefits h2,
.pa-prose .pa-sec--benefits .pa-list__title {
	color: var(--pa-white);
}

.pa-prose .pa-sec--benefits .pa-list__text {
	color: rgba(255, 255, 255, .72);
}

.pa-sec--benefits .pa-list {
	grid-template-columns: 1fr;
	gap: 0;
	counter-reset: none;
}

.pa-sec--benefits .pa-list__item {
	gap: 24px;
	align-items: baseline;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.pa-sec--benefits .pa-list__item:last-child {
	padding-bottom: 0;
}

.pa-sec--benefits .pa-list__marker {
	width: auto;
	height: auto;
	min-width: 2.4ch;
	border-radius: 0;
	background: none;
	color: transparent;
	-webkit-text-stroke: 1px var(--pa-orange-light);
	font-size: max(34px, calc(48 * var(--pa-u, 1px)));
	line-height: 1;
	transition: color .3s ease;
}

.pa-sec--benefits .pa-list__item:hover .pa-list__marker {
	color: var(--pa-orange-light);
}

@media (max-width: 767px) {
	.pa-sec--included .pa-list {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.pa-sec--included .pa-list__item {
		flex-direction: row;
		padding: 20px;
	}

	.pa-sec--benefits {
		border-radius: 18px;
		padding: 28px 22px;
	}

	.pa-sec--benefits .pa-list__item {
		gap: 16px;
	}
}

/* Booking sidebar on service pages (dark card) */
.pa-svc-aside {
	overflow: hidden;
	background: #111111 !important;
	border-color: #111111 !important;
	color: var(--pa-white);
}

.pa-svc-aside::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -180px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(254, 108, 28, .30) 0%, rgba(254, 108, 28, 0) 68%);
	pointer-events: none;
}

.pa-svc-aside > * {
	position: relative;
}

@media (max-width: 1024px) {
	.pa-svc-aside {
		position: relative;
	}
}

/* ==========================================================================
   13. Homepage hero carousel, map panes, counters, gallery hover
   ========================================================================== */

/* Hero: three slides in a scroll-snap track (pa-site JS adds arrows, dots, autoplay) */
.pa-hero-track::-webkit-scrollbar {
	display: none;
}

.pa-hero-track + .pa-carousel-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: max(26px, calc(56 * var(--pa-u, 1px)));
	z-index: 3;
	margin: 0;
}

.pa-hero-track + .pa-carousel-nav .pa-carousel-nav__btn {
	color: var(--pa-white);
	border-color: rgba(255, 255, 255, .55);
	background: rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.pa-hero-track + .pa-carousel-nav .pa-carousel-nav__btn:hover:not(:disabled) {
	background: var(--pa-orange);
	border-color: var(--pa-orange);
}

.pa-hero-track + .pa-carousel-nav .pa-carousel-nav__dot {
	background: rgba(255, 255, 255, .45);
}

.pa-hero-track + .pa-carousel-nav .pa-carousel-nav__dot[aria-current="true"] {
	background: var(--pa-orange-light);
}

@media (max-width: 767px) {
	.pa-hero-track + .pa-carousel-nav .pa-carousel-nav__btn {
		display: none;
	}
}

/* Map widget fills its frame; panes follow the workshop tabs */
.pa-gmap {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

.pa-gmap .elementor-widget-container,
.pa-gmap .elementor-custom-embed,
.pa-gmap iframe {
	display: block;
	width: 100%;
	height: 100% !important;
}

.pa-gmap iframe {
	filter: grayscale(.15);
}

.pa-panes-ready > .pa-map-pane {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease;
}

.pa-panes-ready > .pa-map-pane:not(.is-active) {
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}

/* Counter widgets used for numbers (stats, steps, benefit numbers) */
.elementor-widget-counter.pa-stat-counter .elementor-counter {
	display: block;
}

.elementor-widget-counter.pa-stat-counter .elementor-counter-number-wrapper {
	display: flex;
	justify-content: flex-start;
	font-family: var(--pa-font-heading);
	font-weight: 600;
	font-size: max(34px, calc(52 * var(--pa-u, 1px)));
	line-height: 1.05;
	color: var(--pa-orange);
}

.elementor-widget-counter.pa-stat-counter .elementor-counter-title {
	display: none;
}

.elementor-widget-counter.pa-step-counter .elementor-counter-number-wrapper {
	font-size: max(30px, calc(44 * var(--pa-u, 1px)));
}

.elementor-widget-counter.pa-ben-counter {
	flex: 0 0 auto;
	width: auto;
	min-width: 2.4ch;
}

.elementor-widget-counter.pa-ben-counter .elementor-counter-number-wrapper {
	font-size: max(34px, calc(48 * var(--pa-u, 1px)));
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--pa-orange-light);
}

/* Gallery page: zoom and shade on hover / keyboard focus */
a:has(> img.pa-tile) {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	border-radius: max(12px, calc(20 * var(--pa-u, 1px)));
}

a:has(> img.pa-tile) img.pa-tile {
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}

a:has(> img.pa-tile)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .6) 100%);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

a:has(> img.pa-tile):hover img.pa-tile,
a:has(> img.pa-tile):focus-visible img.pa-tile {
	transform: scale(1.08);
	filter: saturate(1.1);
}

a:has(> img.pa-tile):hover::before,
a:has(> img.pa-tile):focus-visible::before {
	opacity: 1;
}

/* Service template: hide list rows when a service has fewer items */
.pa-svc-item:has(.pa-item-h:empty),
.pa-ben-item:has(.pa-item-h:empty) {
	display: none;
}

/* Hero slides: slightly deeper shade so light photos keep the copy readable */
.elementor .pa-hero-dimmer {
	background-color: rgba(0, 0, 0, .42);
}

/* ==========================================================================
   14. Header: sticky bar, mobile top bar, mobile menu panel
   ========================================================================== */
.pa-hdr-stuck .elementor-element-7a781102 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 0;
	animation: pa-hdr-in .35s ease both;
}

.admin-bar.pa-hdr-stuck .elementor-element-7a781102 {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.pa-hdr-stuck .elementor-element-7a781102 {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar.pa-hdr-stuck .elementor-element-7a781102 {
		top: 0;
	}
}

body.pa-hdr-stuck .elementor .elementor-element-20bd0d21,
body.pa-hdr-stuck .elementor .elementor-element-589724e4 {
	display: none !important;
}

.pa-hdr-stuck .pa-hdr-slide {
	transform: none !important;
}

/* Sticky state only: no space above the bar (default header keeps its 29u top margin) */
body.pa-hdr-stuck .elementor .elementor-element-ebb8750 {
	margin-block-start: 0;
}

.pa-hdr-stuck .elementor-element-3f9f132c {
	background-color: rgba(17, 17, 17, .92) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
}

@keyframes pa-hdr-in {
	from { transform: translateY(-110%); }
	to { transform: none; }
}

/* Mobile/tablet menu panel opens below the bar instead of stretching it */
@media (max-width: 1024px) {
	.elementor .elementor-element-87402b9 {
		width: auto;
		flex: 0 0 auto;
		margin-left: auto;
		margin-right: 12px;
		justify-content: flex-end;
	}

	/* nav container + widget are static so the panel spans the whole bar */
	.elementor .elementor-element-87402b9,
	.elementor .elementor-element-9691e44 {
		position: static !important;
	}

	.elementor .elementor-element-3f9f132c {
		position: relative !important;
	}

	.elementor .elementor-element-9691e44 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute !important;
		top: calc(100% + 10px) !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		z-index: 1000;
		border-radius: 14px;
	}
}

/* Phones keep both workshop numbers in the top bar */
@media (max-width: 767px) {
	.elementor .elementor-element-20bd0d21 {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 8px 14px 0 !important;
		gap: 8px;
	}

	.elementor .elementor-element-463a5782,
	.elementor .elementor-element-36aa78d8 {
		gap: 6px !important;
		width: auto;
	}

	.elementor [data-id="6cfa4c15"],
	.elementor [data-id="7b62b945"] {
		display: none !important;
	}

	.elementor [data-id="455b3225"],
	.elementor [data-id="3cd01ee1"] {
		font-size: 12px !important;
		line-height: 1.4 !important;
	}
}

@media (max-width: 359px) {
	.elementor [data-id="455b3225"],
	.elementor [data-id="3cd01ee1"] {
		font-size: 10.5px !important;
	}
}

/* ==========================================================================
   15. Service page FAQ accordion (pa-site JS adds .pa-faq and the buttons)
   ========================================================================== */
.pa-faq .pa-ben-item {
	position: relative;
	padding-right: 48px;
	cursor: pointer;
}

.pa-faq .pa-ben-item::after {
	content: "+" / "";
	position: absolute;
	right: 0;
	top: 22px;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	color: var(--pa-white);
	font: 300 22px/30px var(--pa-font-body);
	text-align: center;
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}

.pa-faq .pa-ben-item.is-open::after {
	transform: rotate(45deg);
	background-color: var(--pa-orange);
	border-color: var(--pa-orange);
}

.pa-faq-btn {
	all: unset;
	display: block;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: color .2s ease;
}

.pa-faq .pa-ben-item:hover .pa-faq-btn,
.pa-faq .pa-ben-item.is-open .pa-faq-btn {
	color: var(--pa-orange-light);
}

.pa-faq-btn:focus-visible {
	outline: 2px solid var(--pa-orange-light);
	outline-offset: 4px;
}

.pa-faq .pa-ben-item:not(.is-open) .pa-item-p {
	display: none;
}

.pa-faq .pa-ben-item.is-open .pa-item-p {
	animation: pa-faq-in .3s ease both;
}

@keyframes pa-faq-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   7. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   16. Gallery page – bento grid
   ========================================================================== */
.elementor .elementor-element-52c56e4b {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	grid-auto-rows: max(170px, calc(280 * var(--pa-u)));
	grid-auto-flow: dense;
	gap: max(12px, calc(20 * var(--pa-u))) !important;
}

.elementor .elementor-element-52c56e4b > * {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0;
	overflow: hidden;
	border-radius: max(12px, calc(18 * var(--pa-u)));
}

.elementor .elementor-element-52c56e4b img.pa-tile {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	border-radius: 0 !important;
}

.elementor .elementor-element-52c56e4b > :nth-child(1),
.elementor .elementor-element-52c56e4b > :nth-child(8) {
	grid-column: span 2;
	grid-row: span 2;
}

.elementor .elementor-element-52c56e4b > :nth-child(4) {
	grid-row: span 2;
}

.elementor .elementor-element-52c56e4b > :nth-child(6) {
	grid-column: span 2;
}

.elementor .elementor-element-13c25d6c {
	align-items: center;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

@media (max-width: 1024px) {
	.elementor .elementor-element-52c56e4b {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-auto-rows: 200px;
	}

	.elementor .elementor-element-52c56e4b > :nth-child(4) {
		grid-row: span 1;
	}

	.elementor .elementor-element-52c56e4b > :nth-child(6) {
		grid-column: span 1;
	}
}

@media (max-width: 767px) {
	.elementor .elementor-element-52c56e4b {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-rows: 150px;
		gap: 10px !important;
	}

	.elementor .elementor-element-52c56e4b > :nth-child(1),
	.elementor .elementor-element-52c56e4b > :nth-child(8) {
		grid-column: span 2;
		grid-row: span 1;
	}

	.elementor .elementor-element-52c56e4b > :nth-child(1) {
		grid-row: span 2;
	}
}