/*
	Theme Name: Hospo Safe Solution
	Theme URI: https://junsanchez.com
	Description: Child theme of Hello Elementor for the Hospo Safe Solution website. Designed and built by Jun Sanchez, JS Web Design Services. Keep this theme active; Hello Elementor is the parent.
	Author: Jun Sanchez – JS Web Design Services
	Author URI: https://junsanchez.com
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Tested up to: 7.1
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor-child
	Tags: custom-logo, featured-images, flexible-header, custom-colors, custom-menu, accessibility-ready
*/

/* Site-wide base. Design tokens live in the Elementor kit (global variables); keep this file minimal. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Body copy uses the kit's body font (Elementor links Source Sans 3 but does not apply it to paragraphs). */
body, .e-paragraph-base, .elementor-widget-shortcode, input, textarea, select, button { font-family: "Source Sans 3", "Segoe UI", sans-serif; }
/* The kit variable --hss-font-body is the unquoted name "Source Sans 3"; the trailing digit makes it invalid CSS unless quoted, so the body font is set here. */
img { height: auto; max-width: 100%; }

/* ---------- Header navigation (Elementor Pro nav-menu widget, styled to the HSS design) ---------- */
.jsw-header-bar .elementor-nav-menu--main .elementor-item {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--hss-text, #15212B);
	padding: 8px 18px; /* Figma: links 36px apart, 36px tall, underline on the last 2px */
}
/* Elementor Pro's `.elementor-nav-menu--main .elementor-nav-menu a:hover/:focus/.highlighted` sets
   padding 13px 20px with higher specificity than the rule above, so a hovered item grew 12px and pushed
   its neighbours sideways (user, 2026-10-27). The :is() list lifts this rule above it in every state. */
.jsw-header-bar .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:is(*, :hover, :focus, :active, .highlighted, .elementor-item-active) {
	padding: 8px 18px;
}
.jsw-header-bar .elementor-nav-menu--main .elementor-item:hover,
.jsw-header-bar .elementor-nav-menu--main .elementor-item:focus,
.jsw-header-bar .elementor-nav-menu--main .elementor-item.elementor-item-active,
.jsw-header-bar .elementor-nav-menu--main .elementor-item.highlighted {
	color: var(--hss-blue, #005CA9);
}
.jsw-header-bar .elementor-nav-menu--main .e--pointer-underline .elementor-item:after,
.jsw-header-bar .e--pointer-underline .elementor-item:after {
	left: 18px; right: auto; width: calc(100% - 36px); bottom: 0; border-radius: 1px; /* Figma: underline = text width */
	background-color: var(--hss-lime, #8DDD24);
	height: 2px;
}
.jsw-header-bar .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap; }
.jsw-header-bar .elementor-nav-menu--dropdown .elementor-item {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--hss-text, #15212B);
	padding: 14px 20px;
}
.jsw-header-bar .elementor-nav-menu--dropdown .elementor-item:hover,
.jsw-header-bar .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
	color: var(--hss-blue, #005CA9);
	background-color: var(--hss-blue-tint, #E8F1F9);
}
.jsw-header-bar .elementor-menu-toggle { color: var(--hss-blue, #005CA9); border: 0; background: transparent; }
.jsw-header-bar .elementor-menu-toggle:hover,
.jsw-header-bar .elementor-menu-toggle.elementor-active { color: var(--hss-blue-deep, #00417A); }
/* Header logos: the full stacked logo above 767px, the no-tagline logo (Figma "Header / Mobile") at
   767px and below. The <a> link wrappers are hidden too, otherwise the hidden logo still takes a
   flex gap and nudges the centred menu sideways. */
.jsw-header-bar a[data-interaction-id="3b465c75"] { display: none; }
@media (max-width: 767px) {
	.jsw-header-bar a[data-interaction-id="3b465c75"] { display: flex; }
	.jsw-header-bar a[data-interaction-id="3c19c681"] { display: none; }
}
/* Small laptops (1025-1279px; Figma only specifies 1440): the Figma 36px link spacing plus logo and CTA
   no longer fit, and the CTA overlapped "Contact Us" (QA, 2026-10-27). Links 20px apart; the header keeps
   its 80px side padding so the logo lines up with the page content. Below 1160px (with the About Us,
   Services and Our Process chevrons, 2026-10-28) links are 14px with 12px between them. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.jsw-header-bar .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:is(*, :hover, :focus, :active, .highlighted, .elementor-item-active) { padding: 8px 10px; }
	.jsw-header-bar .e--pointer-underline .elementor-item:after { left: 10px; width: calc(100% - 20px); }
}
@media (min-width: 1025px) and (max-width: 1159px) {
	.jsw-header-bar .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:is(*, :hover, :focus, :active, .highlighted, .elementor-item-active) { padding: 8px 6px; font-size: 14px; }
	.jsw-header-bar .e--pointer-underline .elementor-item:after { left: 6px; width: calc(100% - 12px); }
	.jsw-header-bar .jsw-btn { padding-left: 14px !important; padding-right: 14px !important; }
}
/* Footer columns below 1440 (QA, 2026-10-27): the Figma 340 / 1fr / 1fr / 1.2fr grid squeezed the
   contact column under its email address (258px, one unbreakable word) from 1025 to about 1360px and
   clipped it. The contact column never goes narrower than its longest word and the brand column flexes instead;
   1440 keeps the Figma grid. */
@media (min-width: 1025px) and (max-width: 1439px) {
	.elementor-location-footer .elementor-element-4807c148 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(min-content, 1.2fr); }
}
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-location-footer .elementor-element-4807c148 { column-gap: 40px; }
}
/* Mobile header to the Figma frame (Header / Mobile, 390 wide): 72px bar, 44x44 menu button
   20px from the right edge, vertically centred (2026-10-27). The nav widget shows its dropdown from
   tablet width down, so these rules start at 1024px. The dropdown is taken out of the flow and opens
   full width directly under the sticky bar instead of stretching the bar. */
@media (max-width: 1024px) {
	.jsw-header-bar > .jsw-container,
	.jsw-header-bar .elementor-widget-nav-menu { position: static; }
	.jsw-header-bar .elementor-widget-nav-menu { display: flex; justify-content: flex-end; align-items: center; align-self: center; }
	/* Menu button (user, 2026-10-27: "make a new icon related to this website"): two ink bars over a
	   short lime bar, the site's lime-rule motif, in the same 44px #F4F6F8 r8 tile as the drawer's close
	   button so open and close read as one control. Elementor's own svg icons are hidden. */
	.jsw-header-bar .elementor-menu-toggle {
		position: relative; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 8px;
		background-color: var(--hss-neutral, #F4F6F8); color: var(--hss-text, #15212B); cursor: pointer;
	}
	.jsw-header-bar .elementor-menu-toggle > * { display: none !important; }
	.jsw-header-bar .elementor-menu-toggle::before,
	.jsw-header-bar .elementor-menu-toggle::after {
		content: ""; position: absolute; left: 11px; height: 2.5px; border-radius: 2px;
	}
	.jsw-header-bar .elementor-menu-toggle::before { top: 15px; width: 22px; background-color: var(--hss-text, #15212B); box-shadow: 0 6.25px 0 var(--hss-text, #15212B); }
	.jsw-header-bar .elementor-menu-toggle::after { top: 27.5px; width: 12px; background-color: var(--hss-lime, #8DDD24); transition: width 0.3s cubic-bezier(0.33, 1, 0.68, 1); }
	.jsw-header-bar .elementor-menu-toggle:focus-visible { outline: 2px solid var(--hss-blue, #005CA9); outline-offset: 2px; }
	@media (hover: hover) {
		.jsw-header-bar .elementor-menu-toggle:hover { background-color: var(--hss-neutral-strong, #E7EBEF); }
		.jsw-header-bar .elementor-menu-toggle:hover::after { width: 22px; }
	}
	.jsw-header-bar .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute; top: 100%; left: 0; right: 0; margin-top: 0; z-index: 10; background-color: var(--hss-white, #fff);
	}
}
.jsw-header-bar .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	box-shadow: 0 16px 40px rgba(0, 65, 122, 0.12);
	border-top: 1px solid var(--hss-border, #DDE3E9);
}

/* ---------- Motion: respect reduced-motion preferences site-wide ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
html { scroll-behavior: smooth; }

/* Hover lift only on cards and images that are links (static cards must not move when the
   page scrolls under a resting cursor; user, 2026-10-27) */
a.jsw-card, .jsw-card:has(a[href]), a .jsw-img-rounded {
	transition: translate 0.25s ease, scale 0.25s ease, box-shadow 0.25s ease;
}
a.jsw-card:hover, .jsw-card:has(a[href]):hover { translate: 0 -3px; box-shadow: 0 18px 44px rgba(0, 65, 122, 0.10); }
a:hover .jsw-img-rounded { scale: 1.015; }
.jsw-btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, translate 0.15s ease; }
.jsw-btn:hover { translate: 0 -1px; }
.jsw-arrow-link img { transition: transform 0.2s ease; }
.jsw-arrow-link:hover img { transform: translateX(3px); }

/* ---------- JSW motion layer: GSAP owns transform and opacity on every animated element ----------
   Elementor's atomic containers ship with `transition: transform .4s ease`. On an element GSAP is
   animating, that CSS transition re-eases every frame GSAP writes, which made the reveals lurch
   fast-slow-fast (user, 2026-10-27). Hover effects therefore use the separate `translate` / `scale`
   properties, and transform/opacity are never CSS-transitioned on motion targets. */
:is(.jsw-reveal, .jsw-card, .jsw-reveal-img, .jsw-img-rounded, .jsw-lead, .jsw-eyebrow, .jsw-lime-rule, .jsw-marker, .jsw-btn, .jsw-mask-inner, .jsw-band > .jsw-container > *, .jsw-hero h1) {
	transition-property: background-color, border-color, color, box-shadow, translate, scale !important;
}

/* ---------- JSW motion layer: initial states only when motion is enabled (html.jsw-motion) ---------- */
html.jsw-motion .jsw-hero h1,
html.jsw-motion .jsw-section:not(.jsw-hero) .jsw-h2 { overflow: hidden; }
html.jsw-motion .jsw-hero h1 .jsw-mask-inner,
html.jsw-motion .jsw-section:not(.jsw-hero) .jsw-h2 .jsw-mask-inner { display: block; will-change: transform; }
html.jsw-motion .jsw-hero .jsw-eyebrow,
html.jsw-motion .jsw-hero .jsw-lead,
html.jsw-motion .jsw-hero .jsw-btn,
html.jsw-motion .jsw-band > .jsw-container > *,
html.jsw-motion .jsw-section:not(.jsw-hero) .jsw-lead,
html.jsw-motion .jsw-section:not(.jsw-hero) .jsw-eyebrow,
html.jsw-motion .jsw-reveal,
html.jsw-motion .jsw-card,
html.jsw-motion .jsw-marker,
html.jsw-motion .jsw-img-rounded,
html.jsw-motion .jsw-reveal-img { opacity: 0; }
html.jsw-motion .elementor-location-footer .jsw-reveal,
html.jsw-motion .elementor-location-footer .jsw-card,
html.jsw-motion .elementor-location-footer .jsw-img-rounded,
html.jsw-motion .elementor-location-footer .jsw-lead,
html.jsw-motion .elementor-location-footer .jsw-eyebrow { opacity: 1; }
html.jsw-motion .elementor-location-footer .jsw-lime-rule { transform: none; }
html.jsw-motion .jsw-lime-rule { transform: scaleX(0); transform-origin: left center; }
.jsw-hero { --jsw-bg-scale: 1; }
.jsw-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: var(--jsw-hero-gradient, linear-gradient(90deg, rgba(0,65,122,0.92) 0%, rgba(0,65,122,0.62) 48%, rgba(0,65,122,0.18) 100%)), var(--jsw-hero-image) var(--jsw-hero-pos, center center) / var(--jsw-hero-size, cover) no-repeat; /* --jsw-hero-pos: per-hero focal point, set on the hero (e.g. on phones) so faces are never cut */
	transform: scale(var(--jsw-bg-scale)); transform-origin: center center;
}
.jsw-hero > * { position: relative; z-index: 1; }
/* Inner-page heroes (the ones with a breadcrumb) on phones. Inner pages have no mobile Figma frames;
   they follow the approved mobile homepage hero (Figma 263:7013): a taller band, people in the upper
   part of the photo, copy at the bottom over a scrim that darkens downwards. On a 390px screen the
   copy runs the full width, so this is the only way no head is covered by text (user rule). Desktop
   and tablet keep the Figma left-to-right scrim. Each hero can still set --jsw-hero-pos per breakpoint. */
@media (max-width: 767px) {
	.jsw-hero:has(nav) {
		min-height: 520px !important; /* 680 until 2026-10-28; shorter on request, copy still clears every face */
		justify-content: flex-end !important;
		--jsw-hero-gradient: linear-gradient(180deg, rgba(0,65,122,0.05) 0%, rgba(0,65,122,0.45) 38%, rgba(0,65,122,0.94) 66%, rgba(0,65,122,0.97) 100%) !important;
	}
	.jsw-hero:has(nav) > .jsw-container { min-height: 0 !important; justify-content: flex-end !important; gap: 32px !important; }
	/* at 520px the copy reached two faces: a slightly larger photo lifted so the face sits above the copy
	   (the hero's own blue fills the strip below the photo, under the darkest part of the scrim) */
	.jsw-hero.elementor-element-72b5a65c { --jsw-hero-size: auto 600px; --jsw-hero-pos: 64% -140px; }
	.jsw-hero.elementor-element-7543d9b6 { --jsw-hero-size: auto 600px; --jsw-hero-pos: 50% -130px; }
}
/* Sticky header (user, 2026-10-27). The header bar's own `position: sticky` could never engage
   because its parent, Elementor's header location wrapper, is exactly the bar's height. The wrapper
   is the element that sticks; the WordPress admin bar (logged-in editors only) is offset for. */
.elementor-location-header { position: sticky; top: 0; z-index: 100; }
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .elementor-location-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .elementor-location-header { top: 0; } }
.jsw-header-bar { transition: box-shadow 0.3s ease; }
/* Only a shadow once scrolled: the header keeps its Figma height, because a sticky header that
   resizes pushes the whole page up and down as you scroll past the top (removed 2026-10-27). */
.jsw-header-bar.is-scrolled { box-shadow: 0 10px 30px rgba(0, 65, 122, 0.08); }
.jsw-marker { will-change: transform; }

/* ---------- Process timeline: vertical connector between numbered markers ---------- */
.jsw-step { position: relative; }
.jsw-step::before { /* Figma process timeline: 2px lime connector from the marker to the next marker */
	content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px;
	background: var(--hss-lime, #8DDD24); border-radius: 1px; z-index: 0;
}
.jsw-step:last-child::before { display: none; }
.jsw-step .jsw-marker { z-index: 1; }

/* ---------- FAQ accordion: plus / minus indicator ---------- */
.jsw-section details > summary { list-style: none; position: relative; padding-right: 48px; }
.jsw-section details > summary::-webkit-details-marker { display: none; }
.jsw-section details > summary::after {
	content: ""; position: absolute; right: 2px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%);
	background:
		linear-gradient(var(--hss-blue, #005CA9), var(--hss-blue, #005CA9)) center / 16px 2px no-repeat,
		linear-gradient(var(--hss-blue, #005CA9), var(--hss-blue, #005CA9)) center / 2px 16px no-repeat;
	transition: transform 0.25s ease;
}
.jsw-section details[open] > summary::after {
	background: linear-gradient(var(--hss-blue, #005CA9), var(--hss-blue, #005CA9)) center / 16px 2px no-repeat;
}
.jsw-section details > summary:hover h3, .jsw-section details > summary:hover p { color: var(--hss-blue-deep, #00417A); }
.jsw-section details > summary .e-accordion-item-icon, .jsw-section details > summary [class*="accordion-item-icon"] { display: none; }

/* ====================================================================
   Global content blocks rendered by the child-theme shortcodes
   ([hss_services] [hss_industries] [hss_process] [hss_testimonials]
    [hss_faqs] [hss_contact_details] [hss_social_links]).
   Tokens come from the Elementor kit variables (--hss-*).
   ==================================================================== */
.elementor-widget-shortcode, .elementor-widget-shortcode .elementor-widget-container, .elementor-widget-shortcode .elementor-shortcode { width: 100%; max-width: 100%; }
.hss-link {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: auto;
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 600; line-height: 20px;
	color: var(--hss-blue, #005CA9); text-decoration: none;
}
.hss-link svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.hss-link:hover { color: var(--hss-blue-deep, #00417A); }
.hss-link:hover svg { transform: translateX(3px); }
.hss-services, .hss-process, .hss-faqs { margin: 0; padding: 0; list-style: none; }

/* Services: rows (homepage) */
.hss-services--rows { display: flex; flex-direction: column; width: 100%; }
.hss-service { display: flex; flex-direction: column; gap: 12px; }
.hss-services--rows .hss-service { padding: 22px 0; border-top: 1px solid var(--hss-border, #DDE3E9); }
.hss-services--rows .hss-service:first-child { border-top: 0; padding-top: 0; }
.hss-service__title {
	margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
	color: var(--hss-blue, #005CA9);
}
.hss-service__text, .hss-industry__text, .hss-faq__answer p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hss-text-muted, #4E565E); }
/* Services: cards (Services page) */
.hss-services--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hss-services--cards .hss-service { background: var(--hss-white, #fff); border: 1px solid var(--hss-border, #DDE3E9); border-radius: var(--hss-radius-lg, 12px); padding: 28px; }
.hss-service__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--hss-radius-md, 8px); background: var(--hss-lime-tint, #F1FADF); margin-bottom: 4px; }
.hss-service__icon img { width: 28px; height: 28px; }
.hss-service__subtitle { margin: -4px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 600; color: var(--hss-blue-deep, #00417A); }
.hss-services--cards .hss-service__link { margin-top: auto; }

/* Industries: photo tiles (homepage, 2 + 1 / 1 + 2 rhythm) and compact list */
.hss-industries--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hss-industries--tiles .hss-industry:nth-child(4n+1), .hss-industries--tiles .hss-industry:nth-child(4n) { grid-column: span 2; }
.hss-industry--tile { display: flex; flex-direction: column; gap: 12px; }
.hss-industry__photo { width: 100%; height: 420px; object-fit: cover; border-radius: var(--hss-radius-lg, 12px); margin-bottom: 8px; }
.hss-industry__title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--hss-blue-deep, #00417A); }
.hss-industries--list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hss-industry--list {
	display: flex; flex-direction: column; gap: 12px; padding: 20px; min-height: 120px;
	border: 1px solid var(--hss-border, #DDE3E9); border-radius: var(--hss-radius-lg, 12px); background: var(--hss-white, #fff);
	text-decoration: none; color: var(--hss-text, #15212B); transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.hss-industry--list:hover { translate: 0 -3px; box-shadow: 0 18px 44px rgba(0, 65, 122, 0.10); border-color: var(--hss-blue, #005CA9); }
.hss-industry__icon img { width: 28px; height: 28px; }
.hss-industry__name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; }

/* Process timeline */
.hss-process--timeline { display: flex; flex-direction: column; }
.hss-step { display: flex; align-items: flex-start; gap: 24px; padding: 0; }
.hss-step__marker {
	flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px;
	background: var(--hss-lime, #8DDD24); color: var(--hss-text, #15212B);
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 600; line-height: 22px;
}
.hss-step__text { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 36px; } /* Figma: text 6/36 padding, 8 gap */
.hss-process--timeline .hss-step:last-child .hss-step__text { padding-bottom: 0; }
.hss-step__title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 600; line-height: 32px; letter-spacing: -0.005em; color: var(--hss-text, #15212B); }
.hss-step__body { margin: 0; font-size: 19px; line-height: 30px; color: var(--hss-text-muted, #4E565E); }
.hss-step__details { font-size: 17px; line-height: 1.6; color: var(--hss-text-muted, #4E565E); }
.hss-step__details p { margin: 8px 0 0; }
.hss-process--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hss-process--cards .hss-step { flex-direction: column; gap: 16px; padding: 28px; background: var(--hss-white, #fff); border: 1px solid var(--hss-border, #DDE3E9); border-radius: var(--hss-radius-lg, 12px); }
.hss-process--cards .hss-step::before { display: none; }
/* Process detailed (Our Process page, Figma 208:3169): white card, one row per step, three detail columns */
.hss-process--detailed { display: flex; flex-direction: column; padding: 8px 48px; background: var(--hss-white, #fff); border-radius: 16px; }
.hss-chapter { display: flex; align-items: flex-start; gap: 48px; padding: 40px 0; }
.hss-chapter + .hss-chapter { border-top: 1px solid var(--hss-border, #DDE3E9); }
/* Our Process menu links jump to a step (#step-<slug>): land just under the sticky header. */
.hss-chapter { scroll-margin-top: 112px; }
body.admin-bar .hss-chapter { scroll-margin-top: 144px; }
@media (max-width: 1024px) { .hss-chapter { scroll-margin-top: 72px; } body.admin-bar .hss-chapter { scroll-margin-top: 118px; } }
.hss-chapter__head { flex: 0 1 300px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.hss-chapter__number { font-family: "Plus Jakarta Sans", sans-serif; font-size: 44px; font-weight: 700; line-height: 48px; color: var(--hss-blue, #005CA9); }
.hss-chapter__title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 600; line-height: 34px; color: var(--hss-text, #15212B); }
.hss-chapter__summary { margin: 0; font-size: 17px; line-height: 26px; color: var(--hss-text-muted, #4E565E); }
.hss-chapter__detail { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding-top: 10px; }
.hss-chapter__item { display: flex; flex-direction: column; gap: 8px; }
.hss-chapter__item dt { font-size: 13px; font-weight: 600; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hss-blue, #005CA9); }
.hss-chapter__item dd { margin: 0; font-size: 16px; line-height: 25px; color: var(--hss-text, #15212B); }

/* Below 1280 the three detail columns would drop under ~200px beside the 300px head: stack the head above them. */
@media (max-width: 1279px) {
	.hss-chapter { flex-direction: column; gap: 24px; }
	.hss-chapter__head { flex: 0 1 auto; min-width: 0; max-width: 640px; }
	.hss-chapter__detail { width: 100%; padding-top: 0; }
}

/* Testimonials */
.hss-testimonials--home { display: flex; flex-direction: column; gap: 56px; width: 100%; }
.hss-testimonial { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.hss-testimonial--featured { gap: 24px; max-width: 1000px; }
.hss-testimonial__mark { display: inline-flex; color: var(--hss-lime, #8DDD24); }
.hss-testimonial__mark svg { width: 44px; height: 44px; }
.hss-testimonial__quote { margin: 0; padding: 0; border: 0; font-size: 22px; line-height: 1.45; color: var(--hss-text, #15212B); }
.hss-testimonial--featured .hss-testimonial__quote { font-family: "Plus Jakarta Sans", sans-serif; font-size: 34px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.hss-testimonial__attribution {
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hss-text-muted, #4E565E);
}
.hss-testimonials__row { display: flex; align-items: flex-start; gap: 72px; }
.hss-testimonials__row .hss-testimonial { flex: 1 1 0; }
.hss-testimonials__row .hss-testimonial + .hss-testimonial { margin-left: -36px; padding-left: 36px; border-left: 1px solid var(--hss-border, #DDE3E9); }
.hss-testimonials--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hss-testimonial--card { padding: 32px; background: var(--hss-white, #fff); border: 1px solid var(--hss-border, #DDE3E9); border-radius: var(--hss-radius-lg, 12px); }
.hss-testimonial--card .hss-testimonial__mark svg { width: 32px; height: 32px; }
.hss-testimonial--card .hss-testimonial__quote { font-size: 19px; }

/* FAQs */
.hss-faqs { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--hss-border, #DDE3E9); }
.hss-faq { border-bottom: 1px solid var(--hss-border, #DDE3E9); }
.hss-faq__summary { list-style: none; position: relative; display: flex; align-items: center; padding: 22px 48px 22px 0; cursor: pointer; }
.hss-faq__summary::-webkit-details-marker { display: none; }
.hss-faq__question { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 600; line-height: 28px; color: var(--hss-blue, #005CA9); }
.hss-faq[open] > .hss-faq__summary { padding-bottom: 12px; } /* Figma FAQ (open): 22 top, 12 gap, 22 bottom */
.hss-faq__summary:hover .hss-faq__question { color: var(--hss-blue-deep, #00417A); }
.hss-faq__summary::after {
	content: ""; position: absolute; right: 2px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%);
	background:
		linear-gradient(var(--hss-blue, #005CA9), var(--hss-blue, #005CA9)) center / 16px 2px no-repeat,
		linear-gradient(var(--hss-blue, #005CA9), var(--hss-blue, #005CA9)) center / 2px 16px no-repeat;
	transition: transform 0.25s ease;
}
.hss-faq[open] > .hss-faq__summary::after { background: linear-gradient(var(--hss-blue, #005CA9), var(--hss-blue, #005CA9)) center / 16px 2px no-repeat; }
.hss-faq__answer { max-width: 640px; padding: 0 0 22px; }
.hss-faq__answer p { font-size: 17px; line-height: 27px; }
.hss-faq__answer p + p { margin-top: 10px; }
.hss-faq-group + .hss-faq-group { margin-top: 48px; }
.hss-faq-group__title { margin: 0 0 16px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 600; color: var(--hss-text, #15212B); }

/* Contact details and social links (footer or contact page) */
.hss-contact { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hss-contact__row { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.hss-contact__row svg { flex: 0 0 18px; margin-top: 2px; color: var(--hss-lime, #8DDD24); }
.hss-contact__row a { color: inherit; text-decoration: none; }
.hss-contact__row a:hover { text-decoration: underline; }
.hss-contact--footer { color: var(--hss-on-dark-muted, #CFDFEC); }
.hss-contact--page { color: var(--hss-text, #15212B); font-size: 17px; }
.hss-contact--page .hss-contact__row svg { color: var(--hss-blue, #005CA9); }
.hss-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hss-links a { color: var(--hss-on-dark-muted, #CFDFEC); text-decoration: none; font-size: 15px; line-height: 1.4; }
.hss-links a:hover { color: var(--hss-white, #fff); }
.hss-social { display: flex; gap: 10px; }
.hss-social__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hss-border-on-dark, #2C6FB0); color: var(--hss-white, #fff); transition: background-color 0.2s ease, border-color 0.2s ease; }
.hss-social__link:hover { background: var(--hss-blue, #005CA9); border-color: var(--hss-blue, #005CA9); }

@media (max-width: 1024px) {
	.hss-services--cards, .hss-process--cards, .hss-testimonials--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hss-industries--list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hss-industry__photo { height: 320px; }
}
@media (max-width: 767px) {
	.hss-services--cards, .hss-process--cards, .hss-testimonials--grid, .hss-industries--tiles, .hss-industries--list { grid-template-columns: 1fr; }
	.hss-industries--tiles .hss-industry { grid-column: auto; }
	.hss-industry__photo { height: 240px; }
	.hss-testimonials__row { flex-direction: column; gap: 32px; }
	.hss-testimonials__row .hss-testimonial + .hss-testimonial { margin-left: 0; padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--hss-border, #DDE3E9); }
	.hss-testimonial--featured .hss-testimonial__quote { font-size: 26px; }
	.hss-step__title { font-size: 22px; }
	.hss-step__body { font-size: 17px; }
	.hss-process--detailed { padding: 0 24px; }
	.hss-chapter { padding: 32px 0; gap: 20px; }
	.hss-chapter__number { font-size: 36px; line-height: 40px; }
	.hss-chapter__title { font-size: 22px; line-height: 30px; }
	.hss-chapter__detail { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Inline helpers used inside Elementor text ---------- */
.hss-text-blue { color: var(--hss-blue, #005CA9); }
/* Elementor strips class attributes from inline HTML in headings/paragraphs, so these hook classes go on
   the element and style its plain <span>s: */
.jsw-accent-span span { color: var(--hss-blue, #005CA9); }             /* statement: second half in brand blue */
.jsw-link-label span {                                                /* "Learn more<span> about X</span>": read, not shown */
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- [hss_sectors] Industries we support (Figma 156:1783) ---------- */
.hss-sectors { display: flex; flex-direction: column; width: 100%; }
.hss-sectors__group { display: flex; gap: 40px; padding: 28px 0; align-items: flex-start; }
.hss-sectors__group + .hss-sectors__group { border-top: 1px solid var(--hss-border, #DDE3E9); }
.hss-sectors__label {
	flex: 0 0 240px; margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 600;
	line-height: 44px; letter-spacing: 0; color: var(--hss-text, #15212B);
}
.hss-sectors__pills { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hss-pill {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px;
	background-color: var(--hss-neutral, #F4F6F8); font-family: "Source Sans 3", sans-serif; font-size: 17px; font-weight: 600;
	line-height: 24px; color: var(--hss-text, #15212B);
}
.hss-pill svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--hss-blue, #005CA9); }
@media (max-width: 1024px) {
	.hss-sectors__group { flex-direction: column; gap: 12px; }
	.hss-sectors__label { flex-basis: auto; line-height: 32px; }
}
@media (max-width: 767px) {
	.hss-sectors__group { padding: 24px 0; }
	.hss-pill { font-size: 16px; padding: 8px 16px 8px 12px; }
}

/* ---------- Sticky column (hook class jsw-sticky; user, 2026-10-27, About "Why Choose" heading) ----------
   Sticks below the sticky header (112px) with a 40px breathing gap while its sibling column scrolls,
   desktop only. Its section must use `overflow: clip`, never `hidden`: hidden makes the section a
   scroll container and sticky stops working. */
@media (min-width: 1025px) {
	.jsw-sticky { position: sticky; top: 152px; align-self: flex-start; } /* 112px header + 40px */
	body.admin-bar .jsw-sticky { top: 184px; }
}

/* ---------- Mobile navigation drawer (Figma M00a / M00b, 390 wide; markup inc/mobile-drawer.php) ---------- */
.hss-drawer {
	position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
	background-color: var(--hss-white, #fff); overflow-y: auto; overscroll-behavior: contain;
	--hss-ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* GSAP power2.out, as the scroll reveals */
	--hss-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
	opacity: 0; transition: opacity 0.28s var(--hss-ease-out);
}
.hss-drawer[hidden] { display: none; }
.hss-drawer.is-open { opacity: 1; }
.hss-drawer.is-closing { opacity: 0; transition: opacity 0.18s var(--hss-ease-in); }
/* Full-screen overlay: always from the very top and above the WordPress admin bar (z 99999). An
   admin-bar offset left a gap that showed the real header behind the drawer's own bar on phones and
   in previews where the bar is hidden but body.admin-bar is still set (fixed 2026-10-27). */
.hss-drawer, body.admin-bar .hss-drawer { top: 0; z-index: 100000; }
/* Lock <html> only: locking <body> too made it a scroll container and the sticky header jumped.
   The gutter keeps the page width when a desktop-style scrollbar disappears. */
html.hss-drawer-open { overflow: hidden; scrollbar-gutter: stable; }
/* Elementor's own dropdown is replaced by the drawer. */
.jsw-header-bar .elementor-nav-menu--dropdown.elementor-nav-menu__container { display: none !important; }

.hss-drawer__bar {
	position: sticky; top: 0; z-index: 1; flex: 0 0 72px; height: 72px; display: flex; align-items: center; justify-content: space-between;
	padding: 0 20px; background-color: var(--hss-white, #fff); border-bottom: 1px solid var(--hss-border, #DDE3E9);
}
.hss-drawer__logo { display: block; width: 80px; height: 50px; }
.hss-drawer__logo-img { display: block; width: 80px; height: 50px; object-fit: contain; }
.hss-drawer__close {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0;
	border: 0; border-radius: 8px; background-color: var(--hss-neutral, #F4F6F8); color: var(--hss-text, #15212B); cursor: pointer;
}
.hss-drawer__close:hover, .hss-drawer__close:focus-visible { background-color: var(--hss-neutral-strong, #E7EBEF); }

.hss-drawer__body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; padding: 16px 20px 24px; } /* Figma body is space-between: the footer sits at the bottom, or directly under a long list */
.hss-drawer__list, .hss-drawer__sublist, .hss-drawer__social { list-style: none; margin: 0; padding: 0; }
.hss-drawer__row {
	display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 4px; margin: 0;
	border: 0; border-bottom: 1px solid var(--hss-border, #DDE3E9); border-radius: 0; background: transparent; cursor: pointer;
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0;
	color: var(--hss-text, #15212B); text-align: left; text-decoration: none;
}
.hss-drawer__row:focus-visible, .hss-drawer__row.is-current { color: var(--hss-blue, #005CA9); background: transparent; }
.hss-drawer__chevron { display: inline-flex; color: var(--hss-text-muted, #4E565E); transition: transform 0.35s var(--hss-ease-out); }
.hss-drawer__toggle[aria-expanded="true"] .hss-drawer__chevron { transform: rotate(180deg); }
.hss-drawer__toggle[aria-expanded="true"] { color: var(--hss-text, #15212B); }

/* Panel grows open: the wrapper animates its grid row from 0fr to 1fr, the panel clips. */
.hss-drawer__panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--hss-ease-out); }
.hss-drawer__panel-wrap.is-expanded { grid-template-rows: 1fr; }
.hss-drawer__panel { min-height: 0; overflow: hidden; border-radius: 10px; background-color: var(--hss-neutral, #F4F6F8); }
.hss-drawer__panel-inner { padding: 8px 0 8px 16px; }
.hss-drawer__group {
	margin: 6px 0 0; font-family: "Source Sans 3", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--hss-text-muted, #4E565E);
}
.hss-drawer__sublist + .hss-drawer__group { margin-top: 16px; }
.hss-drawer__sublink {
	display: flex; align-items: center; min-height: 44px; max-width: 300px;
	font-family: "Source Sans 3", sans-serif; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--hss-text, #15212B); text-decoration: none;
}
.hss-drawer__sublink:focus-visible, .hss-drawer__sublink.is-current { color: var(--hss-blue, #005CA9); }

.hss-drawer__footer { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.hss-drawer__cta {
	display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 10px;
	background-color: var(--hss-blue, #005CA9); color: var(--hss-white, #fff); text-decoration: none;
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 600; line-height: 22px;
}
.hss-drawer__cta:hover, .hss-drawer__cta:focus-visible { background-color: var(--hss-blue-deep, #00417A); color: var(--hss-white, #fff); }
.hss-drawer__contact { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.hss-drawer__phone {
	display: inline-flex; align-items: center; gap: 8px; color: var(--hss-blue, #005CA9); text-decoration: none;
	font-family: "Source Sans 3", sans-serif; font-size: 15px; font-weight: 600; line-height: 20px;
}
.hss-drawer__phone svg { width: 18px; height: 18px; stroke-width: 1.75; flex: 0 0 18px; }
.hss-drawer__social { display: flex; gap: 8px; }
.hss-drawer__social-link {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box;
	border: 1.5px solid var(--hss-border, #DDE3E9); border-radius: 50%; color: var(--hss-blue, #005CA9);
}
.hss-drawer__social-link svg { width: 18px; height: 18px; }
.hss-drawer__social-link:hover, .hss-drawer__social-link:focus-visible { border-color: var(--hss-blue, #005CA9); }
/* Hello Elementor's reset paints every hovered/focused button pink with white text; the drawer's
   buttons (close, Services toggle) keep the Figma colours in every state. */
.hss-drawer .hss-drawer__close:is(:hover, :focus, :active) { background-color: var(--hss-neutral, #F4F6F8); color: var(--hss-text, #15212B); border: 0; }
.hss-drawer .hss-drawer__close:hover { background-color: var(--hss-neutral-strong, #E7EBEF); }
.hss-drawer .hss-drawer__row:is(:hover, :focus, :active) { background-color: transparent; border-color: var(--hss-border, #DDE3E9); text-decoration: none; }
.hss-drawer .hss-drawer__toggle:is(:focus, :active) { color: var(--hss-text, #15212B); }
.hss-drawer .hss-drawer__row.is-current { color: var(--hss-blue, #005CA9); }
/* Hover colours only for real pointers: on phones a tapped row would otherwise stay blue. */
@media (hover: hover) {
	.hss-drawer .hss-drawer__row:hover, .hss-drawer .hss-drawer__sublink:hover { color: var(--hss-blue, #005CA9); }
}
.hss-drawer :focus-visible { outline: 2px solid var(--hss-blue, #005CA9); outline-offset: 2px; }

/* Entrance: rows and footer rise 16px and fade in, 40ms apart (--i is set in the markup). */
.hss-drawer .hss-drawer__item,
.hss-drawer .hss-drawer__footer {
	opacity: 0; transform: translateY(16px);
	transition: opacity 0.45s var(--hss-ease-out), transform 0.45s var(--hss-ease-out);
	transition-delay: calc(60ms + var(--i, 0) * 40ms);
}
.hss-drawer.is-open .hss-drawer__item,
.hss-drawer.is-open .hss-drawer__footer { opacity: 1; transform: none; }
.hss-drawer.is-closing .hss-drawer__item,
.hss-drawer.is-closing .hss-drawer__footer { opacity: 1; transform: none; transition: none; }
/* The close icon turns in from the menu icon's position. */
.hss-drawer .hss-drawer__close svg { opacity: 0; transform: rotate(-90deg); transition: opacity 0.3s var(--hss-ease-out), transform 0.45s var(--hss-ease-out); }
.hss-drawer.is-open .hss-drawer__close svg,
.hss-drawer.is-closing .hss-drawer__close svg { opacity: 1; transform: none; }
/* Panel links fade up after the panel starts to open; collapsing hides them at once. */
.hss-drawer__panel-wrap .hss-drawer__group,
.hss-drawer__panel-wrap .hss-drawer__sublist > li {
	opacity: 0; transform: translateY(8px);
	transition: opacity 0.15s var(--hss-ease-in), transform 0.15s var(--hss-ease-in);
}
.hss-drawer__panel-wrap.is-expanded .hss-drawer__group,
.hss-drawer__panel-wrap.is-expanded .hss-drawer__sublist > li {
	opacity: 1; transform: none;
	transition: opacity 0.35s var(--hss-ease-out), transform 0.35s var(--hss-ease-out);
	transition-delay: calc(60ms + var(--j, 0) * 20ms);
}
.hss-drawer__panel-wrap.is-instant,
.hss-drawer__panel-wrap.is-instant * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	.hss-drawer, .hss-drawer.is-closing, .hss-drawer__chevron, .hss-drawer__panel-wrap,
	.hss-drawer .hss-drawer__item, .hss-drawer .hss-drawer__footer, .hss-drawer .hss-drawer__close svg,
	.hss-drawer__panel-wrap .hss-drawer__group, .hss-drawer__panel-wrap .hss-drawer__sublist > li { transition: none !important; }
	.hss-drawer .hss-drawer__item, .hss-drawer .hss-drawer__footer, .hss-drawer .hss-drawer__close svg { opacity: 1; transform: none; }
}


/* ---------- Five-across card rows (hook class jsw-five-up; Training delivery options) ----------
   Figma draws five 221px cards at 1440. Between 1025 and 1279px they shrink to ~165px and titles
   such as "Face-to-Face" no longer fit their text column, so the row wraps three per row there.
   Tablet and mobile layouts are set on the elements themselves. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.jsw-five-up { flex-wrap: wrap; }
	.jsw-five-up > * { flex: 0 1 calc((100% - 48px) / 3) !important; }
}

/* ---------- Services mega menu (desktop, 1025px up; Figma "Services Dropdown Panel" 4:142) ----------
   Markup: inc/mega-menu.php (links from the "Services panel" menu, card text from Site Settings).
   Behaviour: assets/js/hss-mega.js. The Services nav item gains a 16px chevron 6px after the label;
   the lime underline spans label + chevron (84px at 1440) as in the Figma "Services trigger". */
.jsw-header-bar .elementor-nav-menu--main :is(.hss-mega-item, .hss-dd-item) { position: relative; }
.jsw-header-bar .elementor-nav-menu--main .elementor-nav-menu :is(.hss-mega-item, .hss-dd-item) > a.elementor-item:is(*, :hover, :focus, :active, .highlighted, .elementor-item-active) { padding-right: 40px; }
.jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle),
.jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle):is(:hover, :focus, :active) {
	position: absolute; top: 4px; right: 12px; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 6px; background: transparent; box-shadow: none;
	color: var(--hss-text, #15212B); cursor: pointer;
}
.jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle) svg { width: 16px; height: 16px; transition: transform .2s cubic-bezier(.25,.46,.45,.94); }
.jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle):focus-visible { outline: 2px solid var(--hss-blue, #005CA9); outline-offset: 0; }
.jsw-header-bar :is(.hss-mega-item, .hss-dd-item):is(:hover, :is(.is-mega-open, .is-dd-open)) :is(.hss-mega-toggle, .hss-dd-toggle),
.jsw-header-bar :is(.hss-mega-item, .hss-dd-item) > a.elementor-item-active ~ :is(.hss-mega-toggle, .hss-dd-toggle) { color: var(--hss-blue, #005CA9); }
.jsw-header-bar :is(.hss-mega-item, .hss-dd-item):is(.is-mega-open, .is-dd-open) :is(.hss-mega-toggle, .hss-dd-toggle) svg { transform: rotate(180deg); }
.jsw-header-bar .elementor-nav-menu--main :is(.hss-mega-item, .hss-dd-item):is(.is-mega-open, .is-dd-open) > a.elementor-item { color: var(--hss-blue, #005CA9); }
/* the existing underline rule (left = side padding, width = 100% - both side paddings) already spans label + chevron once the right padding grows by 22px */
.jsw-header-bar .e--pointer-underline :is(.hss-mega-item, .hss-dd-item):is(.is-mega-open, .is-dd-open) > a.elementor-item:after { opacity: 1; transform: none; }
@media (min-width: 1025px) and (max-width: 1279px) {
	.jsw-header-bar .elementor-nav-menu--main .elementor-nav-menu :is(.hss-mega-item, .hss-dd-item) > a.elementor-item:is(*, :hover, :focus, :active, .highlighted, .elementor-item-active) { padding-right: 32px; }
	.jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle), .jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle):is(:hover, :focus, :active) { right: 4px; }
}
@media (min-width: 1025px) and (max-width: 1159px) {
	.jsw-header-bar .elementor-nav-menu--main .elementor-nav-menu :is(.hss-mega-item, .hss-dd-item) > a.elementor-item:is(*, :hover, :focus, :active, .highlighted, .elementor-item-active) { padding-right: 24px; }
	.jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle), .jsw-header-bar :is(.hss-mega-toggle, .hss-dd-toggle):is(:hover, :focus, :active) { right: 0; width: 24px; }
}
@media (max-width: 1024px) { .hss-mega-toggle, .hss-mega, .hss-dd-toggle, .hss-dd { display: none !important; } }

.hss-mega {
	position: fixed; top: var(--hss-mega-top, 112px); left: 50%; z-index: 101;
	width: min(1200px, calc(100% - 80px));
	opacity: 0; transform: translate(-50%, -8px); pointer-events: none;
	transition: opacity .2s cubic-bezier(.25,.46,.45,.94), transform .2s cubic-bezier(.25,.46,.45,.94);
}
.hss-mega[hidden] { display: none; }
.hss-mega.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hss-mega.is-closing { transition-duration: .15s; }
.hss-mega.is-open::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; } /* hover bridge from the nav */
.hss-mega__panel {
	display: flex; align-items: flex-start; gap: 40px; padding: 28px;
	background: var(--hss-white, #FFFFFF); border: 1px solid var(--hss-border, #DDE3E9); border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 65, 122, .16);
}
.hss-mega__col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hss-mega__col--1 { flex: 1 1 320px; }
.hss-mega__col--2 { flex: 1 1 420px; }
.hss-mega__label {
	margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 12px; line-height: 16px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--hss-text-muted, #4E565E);
}
.hss-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hss-mega__list li { margin: 0; padding: 0; }
:is(.hss-mega, .hss-dd) a.hss-mega__link {
	display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: 10px;
	color: var(--hss-text, #15212B); text-decoration: none; transition: background-color .15s ease;
}
:is(.hss-mega, .hss-dd) a.hss-mega__link:hover, :is(.hss-mega, .hss-dd) a.hss-mega__link:focus-visible { background-color: var(--hss-neutral, #F4F6F8); }
:is(.hss-mega, .hss-dd) a.hss-mega__link:focus-visible { outline: 2px solid var(--hss-blue, #005CA9); outline-offset: 0; }
.hss-mega__chip {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--hss-lime-tint, #F1FADF);
	display: flex; align-items: center; justify-content: center; color: var(--hss-blue-deep, #00417A);
}
.hss-mega__chip svg { width: 20px; height: 20px; }
.hss-mega__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hss-mega__title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--hss-text, #15212B); transition: color .15s ease; }
:is(.hss-mega, .hss-dd) a.hss-mega__link:hover .hss-mega__title, :is(.hss-mega, .hss-dd) a.hss-mega__link[aria-current] .hss-mega__title { color: var(--hss-blue, #005CA9); }
.hss-mega__desc { font-family: "Source Sans 3", sans-serif; font-size: 13px; line-height: 18px; color: var(--hss-text-muted, #4E565E); }
.hss-mega__promo {
	flex: 0 0 auto; width: clamp(260px, 30%, 322px); align-self: stretch; /* keeps the button label on one line down to 1025px */
	display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
	padding: 24px; border-radius: 12px; background: var(--hss-blue, #005CA9);
}
.hss-mega__promo-text { display: flex; flex-direction: column; gap: 8px; }
.hss-mega__rule { display: block; width: 32px; height: 3px; background: var(--hss-lime, #8DDD24); }
.hss-mega__promo-title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: #FFFFFF; }
.hss-mega__promo-body { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 14px; line-height: 20px; color: #DCE9F4; }
.hss-mega a.hss-mega__cta {
	display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 16px; border-radius: 8px;
	background: var(--hss-lime, #8DDD24); color: var(--hss-text, #15212B); text-decoration: none; text-align: center;
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; line-height: 20px; font-weight: 600;
	transition: background-color .15s ease;
}
.hss-mega a.hss-mega__cta:hover { background: #A4E84F; }
.hss-mega a.hss-mega__cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.hss-mega, .jsw-header-bar .hss-mega-toggle svg { transition: none; }
	.hss-mega { transform: translate(-50%, 0); }
}

/* ---------- Nav dropdowns: About Us, Our Process (desktop, 1025px up; 2026-10-28) ----------
   Markup: inc/nav-dropdowns.php (links = the item's children in the Primary menu). Behaviour:
   assets/js/hss-dropdowns.js. A compact single-column version of the Services mega menu: same white
   panel, border, radius, shadow, link rows and lime chips; it opens under its own nav item. Links
   without an icon (the six Our Process steps) show their number in the chip. */
.hss-dd {
	position: fixed; top: var(--hss-dd-top, 112px); left: var(--hss-dd-left, 0); z-index: 101;
	width: max-content; min-width: 280px; max-width: 400px;
	opacity: 0; transform: translateY(-8px); pointer-events: none;
	transition: opacity .2s cubic-bezier(.25,.46,.45,.94), transform .2s cubic-bezier(.25,.46,.45,.94);
}
.hss-dd[hidden] { display: none; }
.hss-dd.is-open { opacity: 1; transform: none; pointer-events: auto; }
.hss-dd.is-closing { transition-duration: .15s; }
.hss-dd.is-open::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; } /* hover bridge from the nav */
.hss-dd__panel {
	display: flex; flex-direction: column; gap: 4px; padding: 12px;
	background: var(--hss-white, #FFFFFF); border: 1px solid var(--hss-border, #DDE3E9); border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 65, 122, .16);
}
.hss-dd a.hss-mega__link { padding-right: 16px; }
.hss-dd a.hss-mega__link--solo { align-items: center; }
.hss-mega__chip--number { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
	.hss-dd { transition: none; transform: none; }
}

/* Our Process hero (page 151, QA 2026-10-27). The photo's two people sit right of centre; a centred crop
   put the subtitle across the woman's face between 1025 and ~1300px and cut the man's head at the right
   edge. From 1025 to 1439 the photo is anchored 80px past the right edge (both heads in frame, clear of
   the copy) and the subtitle wraps at 420px below 1280. Tablet and phone positions are set on the hero in
   Elementor; 1440 keeps the Figma crop. */
@media (min-width: 1025px) and (max-width: 1439px) {
	.elementor-element-4726fe7 { --jsw-hero-pos: right -80px center; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
	.jsw-hero.elementor-element-4726fe7 [data-id="50d05cf9"] { max-width: 420px; }
}

/* ---------- FAQ page (Figma 212:3171): sticky "On this page" index + questions grouped by FAQ page section ---------- */
.hss-faq-page { display: flex; align-items: flex-start; gap: 80px; width: 100%; }
.hss-faq-index {
	position: sticky; top: 152px; flex: 0 0 300px; display: flex; flex-direction: column; gap: 4px;
	padding: 24px; background: var(--hss-neutral, #F4F6F8); border-radius: 16px;
}
body.admin-bar .hss-faq-index { top: 184px; }
.hss-faq-index__label { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hss-text-muted, #4E565E); }
.hss-faq-index__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.hss-faq-index__link {
	display: flex; align-items: center; justify-content: space-between; gap: 0; padding: 10px 12px; border-radius: 8px; /* Figma: 221px label + count, no gap */
	font-size: 16px; font-weight: 600; line-height: 22px; color: var(--hss-text, #15212B); text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.hss-faq-index__link:hover { background: var(--hss-white, #fff); color: var(--hss-blue, #005CA9); }
.hss-faq-index__link.is-current { background: var(--hss-white, #fff); color: var(--hss-blue, #005CA9); }
.hss-faq-index__name { flex: 1 1 auto; min-width: 0; }
.hss-faq-index__count { flex: 0 0 auto; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--hss-text-muted, #4E565E); }
.hss-faq-index__note { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--hss-text-muted, #4E565E); }
.hss-faq-index__note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.hss-faq-index__note a:hover { color: var(--hss-blue, #005CA9); }
.hss-faq-sections { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 64px; }
.hss-faq-section { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 152px; }
body.admin-bar .hss-faq-section { scroll-margin-top: 184px; }
.hss-faq-section__head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.hss-faq-page .hss-faq-section .hss-faq-section__rule { display: block; margin: 0; min-width: 0; width: 40px; height: 3px; min-height: 3px; /* beats the kit's .elementor .jsw-lime-rule (56×4) */ padding: 0; background: var(--hss-lime, #8DDD24); transform-origin: left center; }
.hss-faq-section__title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 32px; font-weight: 700; line-height: 40px; color: var(--hss-text, #15212B); }
/* Questions: Figma draws them as a reading list (ink 21/30, 24px padding, rule above each); on the site they
   are the standard accordion (first question on the page open), so they keep the site's plus/minus. */
.hss-faq-section .hss-faqs { border-top: 0; }
.hss-faq-section .hss-faq { border-bottom: 0; border-top: 1px solid var(--hss-border, #DDE3E9); }
.hss-faq-section .hss-faq__summary { padding: 24px 48px 24px 0; }
.hss-faq-section .hss-faq[open] > .hss-faq__summary { padding-bottom: 8px; }
.hss-faq-section .hss-faq__question { font-size: 21px; line-height: 30px; color: var(--hss-text, #15212B); }
.hss-faq-section .hss-faq__summary:hover .hss-faq__question { color: var(--hss-blue, #005CA9); }
.hss-faq-section .hss-faq__answer { max-width: none; padding: 0 48px 24px 0; }
@media (max-width: 1279px) {
	.hss-faq-page { gap: 48px; }
	.hss-faq-index { flex-basis: 260px; }
	.hss-faq-index__link { gap: 8px; }
}
@media (max-width: 1024px) {
	.hss-faq-page { flex-direction: column; align-items: stretch; gap: 48px; }
	.hss-faq-index { position: static; flex-basis: auto; }
	.hss-faq-index__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
}
@media (max-width: 767px) {
	.hss-faq-index { padding: 20px; }
	.hss-faq-index__list { grid-template-columns: 1fr; }
	.hss-faq-sections { gap: 48px; }
	.hss-faq-section__title { font-size: 26px; line-height: 34px; }
	.hss-faq-section .hss-faq__question { font-size: 19px; line-height: 28px; }
	.hss-faq-section .hss-faq__answer { padding-right: 0; }
}

/* ---------- Testimonials page (Figma 215:3539): client stories, quote beside "What we helped with" ---------- */
.hss-stories { display: flex; flex-direction: column; width: 100%; }
.hss-story { display: flex; align-items: flex-start; gap: 96px; padding: 56px 0; }
.hss-story + .hss-story { border-top: 1px solid var(--hss-border, #DDE3E9); }
.hss-story__quote { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.hss-story__mark { display: inline-flex; color: var(--hss-lime, #8DDD24); }
.hss-story__mark svg { width: 36px; height: 36px; }
.hss-story__text { margin: 0; padding: 0; border: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; font-weight: 500; line-height: 42px; color: var(--hss-text, #15212B); }
.hss-story__attribution { font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hss-text-muted, #4E565E); }
.hss-story__context { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.hss-story__label { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hss-blue, #005CA9); }
.hss-story__topic { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 600; line-height: 30px; color: var(--hss-text, #15212B); }
.hss-story__body { margin: 0; font-size: 16px; line-height: 25px; color: var(--hss-text-muted, #4E565E); }
.hss-story__tags { margin: 0; padding: 6px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hss-story__tags li { padding: 6px 12px; border-radius: 999px; background: var(--hss-lime-tint, #F1FADF); font-size: 14px; font-weight: 600; line-height: 20px; color: var(--hss-blue-deep, #00417A); }
@media (max-width: 1279px) {
	.hss-story { gap: 64px; }
	.hss-story__context { flex-basis: 320px; }
}
@media (max-width: 1024px) {
	.hss-story { flex-direction: column; gap: 32px; padding: 48px 0; }
	.hss-story__context { flex-basis: auto; width: 100%; max-width: 560px; padding-top: 0; }
	.hss-story__text { font-size: 26px; line-height: 38px; }
}
@media (max-width: 767px) {
	.hss-story { padding: 40px 0; gap: 24px; }
	.hss-story:first-child { padding-top: 0; }
	.hss-story__mark svg { width: 32px; height: 32px; }
	.hss-story__text { font-size: 22px; line-height: 32px; }
}

/* Testimonials hero (page 153, QA 2026-10-28). The handshake sits right of centre with the client's head
   ~535px in at 1440. A centred crop ran his face into the title from 1025 to ~1280.
   (Revised in QA: anchoring right moved the client left as the window narrowed. The photo's left edge is
   now pinned 26px off-screen so his head stays ~480px in at every width; the subtitle wraps at 380px at every
   width, set on the element in Elementor.)
   On tablet the two men's heads are wider apart than the space beside the copy, so this hero uses the
   phone pattern there (taller band, copy at the bottom, scrim darkening downwards) with both men above
   the copy. Phones frame the chef only (set on the hero in Elementor). 1440 keeps the Figma crop. */
@media (min-width: 1025px) and (max-width: 1399px) { /* above 1415 a 26px shift would leave the right edge uncovered */
	.jsw-hero.elementor-element-6f424826 { --jsw-hero-pos: left -26px center; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.jsw-hero.elementor-element-6f424826 {
		min-height: 680px !important;
		justify-content: flex-end !important;
		--jsw-hero-pos: 56% center;
		--jsw-hero-gradient: linear-gradient(180deg, rgba(0,65,122,0.05) 0%, rgba(0,65,122,0.45) 38%, rgba(0,65,122,0.94) 66%, rgba(0,65,122,0.97) 100%) !important;
	}
	.jsw-hero.elementor-element-6f424826 > .jsw-container { min-height: 0 !important; justify-content: flex-end !important; gap: 32px !important; }
}

/* ---------- Contact page (page 155, Figma 172:2010) ---------- */
/* Follow us circles: Figma 40px, 1.5px #2C6FB0 ring, 20px icon (the footer keeps its own 36px). */
.elementor-155 .hss-social { gap: 12px; }
.elementor-155 .hss-social__link { width: 40px; height: 40px; border-width: 1.5px; }
.elementor-155 .hss-social__link svg { width: 20px; height: 20px; }
/* Enquiry form states (Figma 184:2340): focus 2px blue + 4px soft ring, invalid 2px red, placeholder #818286. */
.elementor-155 form input, .elementor-155 form :is(select, .hss-select__trigger), .elementor-155 form textarea { font-family: "Source Sans 3", sans-serif; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.elementor-155 form input::placeholder, .elementor-155 form textarea::placeholder { color: var(--hss-grey, #818286); opacity: 1; }
.elementor-155 form input:focus, .elementor-155 form select:focus, .elementor-155 form textarea:focus, .elementor-155 form .hss-select__trigger:focus-visible, .elementor-155 form .hss-select.is-focus .hss-select__trigger, .elementor-155 form .hss-select.is-open .hss-select__trigger { outline: none; border-color: var(--hss-blue, #005CA9) !important; border-width: 2px !important; box-shadow: 0 0 0 4px rgba(0, 92, 168, 0.16); }
.elementor-155 form input:user-invalid, .elementor-155 form select:user-invalid, .elementor-155 form textarea:user-invalid, .elementor-155 form .hss-select.is-invalid .hss-select__trigger { border-color: #C62828 !important; border-width: 2px !important; }
.elementor-155 form select {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2315212B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") right 16px center / 20px 20px no-repeat !important;
}
.elementor-155 form select:has(option[value=""]:checked), .elementor-155 form .hss-select__trigger.is-placeholder { color: var(--hss-grey, #818286); }
.elementor-155 form select option { color: var(--hss-text, #15212B); }
.elementor-155 form textarea { resize: vertical; min-height: 150px; }
/* Send Enquiry: Figma's send icon after the label (the atomic submit button cannot hold an icon element). */
.elementor-155 form button[type="submit"] { cursor: pointer; transition: background-color 0.2s ease; }
.elementor-155 form button[type="submit"]::after {
	content: ""; width: 18px; height: 18px; flex: 0 0 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14l11 -11'/%3E%3Cpath d='M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Contact hero (QA 2026-10-28). Both people sit in the lower half of the photo and the man's head is right
   behind the title block, so Figma's top crop put the subtitle across his face (heads rule). From 1025px
   the photo keeps its cover size but slides right so his face (at 26.37% of the photo's width) always
   starts ~20px past the end of the 330px subtitle: x = copy start + 350px − 26.37vw. The strip this
   exposes on the left sits under the 94% blue-deep scrim on the hero's blue-deep background, so it reads
   as solid. Above 1680 the photo also rises so chins stay inside the 496px band.
   Tablet and phones use the phone pattern (copy at the bottom) with the whole consultation in frame:
   both faces and the laptop sit above the copy. */
@media (min-width: 1025px) and (max-width: 1359px) {
	.jsw-hero.elementor-element-33ebb5bc { --jsw-hero-pos: calc(430px - 26.37vw) 0; }
}
@media (min-width: 1360px) {
	.jsw-hero.elementor-element-33ebb5bc { --jsw-hero-pos: calc(23.63vw - 250px) 0; }
}
@media (min-width: 1680px) {
	.jsw-hero.elementor-element-33ebb5bc { --jsw-hero-pos: calc(23.63vw - 250px) calc(470px - 28.32vw); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.jsw-hero.elementor-element-33ebb5bc {
		min-height: 680px !important;
		justify-content: flex-end !important;
		--jsw-hero-gradient: linear-gradient(180deg, rgba(0,65,122,0.05) 0%, rgba(0,65,122,0.45) 38%, rgba(0,65,122,0.94) 66%, rgba(0,65,122,0.97) 100%) !important;
		--jsw-hero-size: cover; --jsw-hero-pos: 49% 0;
	}
	.jsw-hero.elementor-element-33ebb5bc > .jsw-container { min-height: 0 !important; justify-content: flex-end !important; gap: 32px !important; }
}
@media (max-width: 767px) {
	/* the whole consultation (both faces and the laptop) instead of a close-up (user, 2026-10-28) */
	.jsw-hero.elementor-element-33ebb5bc { --jsw-hero-size: auto 113vw; --jsw-hero-pos: -52vw 0; } /* both heads in frame down to 360px; the hero blue fills below the photo */
}
/* Contact layout below the Figma width (QA 2026-10-28). */
@media (min-width: 1025px) and (max-width: 1279px) {
	/* the intro statement and quick-contact cards stack (side by side the cards broke the email address) */
	.elementor-element-211ce788 { flex-direction: column !important; gap: 48px !important; align-items: stretch !important; }
	.elementor-element-19389fd0 { flex: 0 1 auto !important; max-width: 760px; }
	.elementor-element-2e18c78e { flex: 0 1 auto !important; max-width: 560px; }
	/* coverage tiles three then two, so "Australia-wide" fits */
	.elementor-element-34f24178 > * { flex: 1 1 calc(33.333% - 16px) !important; }
	/* the address tag needs the full 560px map panel */
	.elementor-element-75f045b { display: none !important; }
}
@media (max-width: 767px) {
	/* quick-contact cards: icon above the text so the email address fits on one line */
	.elementor-element-69cae11a, .elementor-element-46fe4691, .elementor-element-20292f81 { flex-direction: column !important; gap: 12px !important; }
	.elementor-element-3aa8f75b { font-size: 17px !important; line-height: 24px !important; overflow-wrap: normal !important; }
}

/* ---------- Book a Free Consultation (page 156, Figma 183:2516, states 184:2340, success 184:2521) ---------- */
/* Filled fields: #F4F6F8, radius 10, 2px border kept transparent so focus/error do not shift the layout. */
.elementor-156 form input:not([type="radio"]), .elementor-156 form :is(select, .hss-select__trigger), .elementor-156 form textarea { font-family: "Source Sans 3", sans-serif; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.elementor-156 form input::placeholder, .elementor-156 form textarea::placeholder { color: #6B7580; opacity: 1; }
.elementor-156 form input:not([type="radio"]):focus, .elementor-156 form select:focus, .elementor-156 form textarea:focus, .elementor-156 form .hss-select__trigger:focus-visible, .elementor-156 form .hss-select.is-focus .hss-select__trigger, .elementor-156 form .hss-select.is-open .hss-select__trigger { outline: none; background-color: #fff !important; border-color: var(--hss-blue, #005CA9) !important; box-shadow: 0 0 0 4px rgba(0, 92, 168, 0.16); }
.elementor-156 form input:not([type="radio"]):user-invalid, .elementor-156 form select:user-invalid, .elementor-156 form textarea:user-invalid, .elementor-156 form .hss-select.is-invalid .hss-select__trigger { background-color: #fff !important; border-color: #C62828 !important; }
.elementor-156 form select {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2315212B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 18px center !important; background-size: 20px 20px !important;
}
.elementor-156 form select:has(option[value=""]:checked), .elementor-156 form .hss-select__trigger.is-placeholder { color: #6B7580; }
.elementor-156 form select option { color: var(--hss-text, #15212B); }
.elementor-156 form textarea { resize: vertical; min-height: 144px; }
/* Choice chips (jsw-chip): the radio covers the whole chip, invisibly; the chosen chip turns white with a 2px blue edge. */
.jsw-chip { position: relative; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.jsw-chip input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.jsw-chip label { position: relative; pointer-events: none; }
.jsw-chip:hover { background-color: var(--hss-neutral-strong, #E7EBEF) !important; }
.jsw-chip:has(input:checked) { background-color: #fff !important; border-color: var(--hss-blue, #005CA9) !important; }
.jsw-chip:has(input:checked) label { color: var(--hss-blue, #005CA9) !important; }
.jsw-chip:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(0, 92, 168, 0.24); }
/* Book a Free Consultation button: Figma's arrow after the label. */
.elementor-156 form button[type="submit"] { cursor: pointer; transition: background-color 0.2s ease; }
.elementor-156 form button[type="submit"]::after {
	content: ""; width: 18px; height: 18px; flex: 0 0 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Success (Figma 184:2521): the confirmation replaces the form; hss-forms.js fills the summary. */
.elementor-156 form.form-state-success > :not(.e-form-success-message-base) { display: none !important; }
.elementor-156 form.form-state-success > .e-form-success-message-base { display: flex !important; }
/* Below 1280 (no Figma frame) the sidebar sits under the form, as on tablet: side by side the form and
   sidebar squeezed the note beside the button and broke the email address. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-element-216f0321 { flex-direction: column !important; gap: 48px !important; align-items: stretch !important; }
	.elementor-element-fc1a43c { flex: 0 1 auto !important; max-width: 720px; }
	.elementor-element-3731c645 { flex: 0 1 auto !important; max-width: 560px; }
}
/* Sending state (Figma 184:2340): while Elementor submits, the button reads "Sending…". Contact and Booking forms. */
form[data-atomic-form-submitting] button[type="submit"] { position: relative; color: transparent !important; cursor: progress; }
form[data-atomic-form-submitting] button[type="submit"]::after { display: none; }
form[data-atomic-form-submitting] button[type="submit"]::before { content: "Sending…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }

/* reCAPTCHA (2026-10-28, inc/recaptcha.php + assets/js/hss-recaptcha.js). Google's floating v3 badge is
   hidden; its required notice sits under each form's submit row. The v2 checkbox only appears when the
   invisible check is unsure about a visitor; until it is ticked the button reads "Waiting for confirmation". */
.grecaptcha-badge { visibility: hidden !important; }
.hss-recaptcha-note { flex: 1 1 100%; width: 100%; margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 13px; line-height: 18px; color: var(--hss-text-muted, #4E565E); }
.hss-recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hss-recaptcha-note a:hover { color: var(--hss-blue, #005CA9); }
.hss-recaptcha-check { flex: 1 1 100%; width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--hss-neutral, #F4F6F8); }
.hss-recaptcha-check__prompt { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 15px; line-height: 22px; color: var(--hss-text, #15212B); }
.hss-recaptcha-check__widget { min-height: 78px; max-width: 100%; overflow: hidden; }
@media (max-width: 360px) { .hss-recaptcha-check__widget > div { transform: scale(.92); transform-origin: 0 0; } }
form.hss-recaptcha-pending[data-atomic-form-submitting] button[type="submit"] { cursor: default; }
form.hss-recaptcha-pending[data-atomic-form-submitting] button[type="submit"]::before { content: "Waiting for confirmation"; }

/* Legal pages (Privacy 3, Terms 158): links inside the policy text. */
.jsw-legal-text a { color: var(--hss-blue, #005CA9); text-decoration: underline; text-underline-offset: 2px; }
.jsw-legal-text a:hover { color: var(--hss-blue-deep, #00417A); }
/* Site-wide mobile check (2026-10-28): Contact coverage tiles at phone widths, so "Queensland" fits a half-width tile. */
@media (max-width: 420px) {
	.elementor-element-34f24178 > * { padding: 16px !important; }
	.elementor-element-34f24178 h3 { font-size: 18px !important; line-height: 26px !important; }
}
/* Site-wide mobile check (2026-10-28): larger tap areas on touch widths, with no change to the layout.
   Each link's hit area grows into the space around it (padding + equal negative margin) and never
   reaches its neighbour: footer lists sit 32px apart (hit areas 31px), breadcrumbs and stand-alone
   arrow links grow to 44px. Everything already met WCAG 2.2 AA target spacing; this is for thumbs. */
@media (max-width: 1024px) {
	.elementor-location-footer .jsw-footer-link a { display: inline-block; padding-block: 6px; margin-block: -6px; }
	.elementor-location-footer .jsw-body a { display: inline-block; padding-block: 8px; margin-block: -8px; }
	[data-elementor-type="wp-page"] .jsw-hero nav a,
	[data-elementor-type="wp-page"] .jsw-section nav a { padding-block: 11px !important; margin-block: -11px !important; }
	.jsw-arrow-link, .hss-link { padding-block: 12px !important; margin-block: -12px !important; }
}
/* Long email/web values on narrow phones (360–389): one 29-character word does not fit at 17px. Elementor's paragraph
   filter strips <wbr>, so the four values step down to 15px (fits at 360) with a last-resort break. */
@media (max-width: 389px) {
	[data-id="3aa8f75b"], [data-id="440f812"], [data-id="4c753f91"], [data-id="66cb2781"] { font-size: 15px !important; line-height: 22px !important; overflow-wrap: anywhere; }
}

/* ---------- Custom dropdown (2026-10-28; assets/js/hss-forms.js "enhanceSelect") ----------
   Replaces the browser's option list on every form select. The trigger copies the select's Elementor
   classes, so its box (border, padding, radius, fill, type) is the field's own; the page rules above add
   the focus ring, error and placeholder colours. The list uses the menu style (white, 1px #DDE3E9,
   radius 12, blue-tinted shadow); the chosen option is lime-tint with blue-deep SemiBold text (no tick). */
.hss-select { position: relative; width: 100%; }
.hss-select > select { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; pointer-events: none; }
form .hss-select .hss-select__trigger,
form .hss-select .hss-select__trigger:is(:hover, :focus, :active) {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer;
	color: var(--hss-text, #15212B); /* Hello Elementor paints buttons pink on hover; keep the field look */
}
.elementor-155 form .hss-select .hss-select__trigger:is(*, :hover, :focus, :active) { background-color: #fff; padding-right: 16px; }
.elementor-156 form .hss-select .hss-select__trigger:is(*, :hover, :focus, :active) { padding-right: 18px; }
.elementor-156 form .hss-select .hss-select__trigger:not(:focus-visible):not(:hover) { background-color: var(--hss-neutral, #F4F6F8); }
.elementor-156 form .hss-select:is(.is-open, .is-focus, .is-invalid) .hss-select__trigger,
.elementor-156 form .hss-select .hss-select__trigger:is(:hover, :focus-visible) { background-color: #fff; }
form .hss-select .hss-select__trigger.is-placeholder { font-weight: 400; }
.hss-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hss-select__chevron { flex: 0 0 20px; width: 20px; height: 20px; color: var(--hss-text, #15212B); transition: transform .2s cubic-bezier(.25,.46,.45,.94); }
.hss-select.is-open .hss-select__chevron { transform: rotate(180deg); }
.hss-select__list {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
	max-height: 380px; overflow-y: auto; overscroll-behavior: contain;
	margin: 0; padding: 6px; list-style: none;
	background: #fff; border: 1px solid var(--hss-border, #DDE3E9); border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 65, 122, .16);
	opacity: 0; transform: translateY(-4px);
	transition: opacity .15s cubic-bezier(.25,.46,.45,.94), transform .15s cubic-bezier(.25,.46,.45,.94);
}
.hss-select.is-up .hss-select__list { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.hss-select__list[hidden] { display: none; }
.hss-select__list.is-visible { opacity: 1; transform: none; }
.hss-select__list.is-closing { transition-duration: .1s; }
.hss-select__option {
	margin: 0; padding: 12px 14px; border-radius: 8px; cursor: pointer;
	font-family: "Source Sans 3", sans-serif; font-size: 17px; line-height: 24px; color: var(--hss-text, #15212B);
	transition: background-color .12s ease, color .12s ease;
}
.hss-select__option + .hss-select__option { margin-top: 2px; }
.hss-select__option.is-active { background-color: var(--hss-neutral, #F4F6F8); }
.hss-select__option[aria-selected="true"] { background-color: var(--hss-lime-tint, #F1FADF); color: var(--hss-blue-deep, #00417A); font-weight: 600; }
.hss-select__option[aria-selected="true"].is-active { background-color: #E6F5CC; }
@media (max-width: 767px) { .hss-select__list { max-height: 280px; } .hss-select__option { padding: 13px 14px; } }
@media (prefers-reduced-motion: reduce) { .hss-select__list, .hss-select__chevron { transition: none; } }


/* ---------- 404 page (Theme Builder "JSW 404", post 498; 2026-10-28) ----------
   Copy + "Inspection report" card side by side from 1025px, stacked below (Elementor). On small laptops
   the card narrows and the gap tightens so the H1 column keeps ~420px, and the four "Where to next"
   tiles go two by two instead of leaving the fourth alone on a full-width row. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-element-2628a5d1 { gap: 48px !important; }
	.elementor-element-4dd64fbb { flex: 0 1 400px !important; }
	.elementor-element-fdf7af9 { flex: 1 1 420px !important; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-element-4f9a8504 > a { flex: 1 1 calc(50% - 8px) !important; }
}

/* Header/footer "on dark" colour modifiers (fix 2026-10-28). On Elementor pages the header, footer and
   page share one global-class stylesheet in priority order, so jsw-on-dark beats jsw-body-sm / jsw-h4.
   On Theme Builder pages without their own page document (the 404 template, and any archive/search)
   each part gets its own stylesheet and the last one loaded wins, which turned the footer intro,
   tagline and copyright dark on blue. These repeat the modifiers with higher specificity. */
:is(.elementor-location-footer, .elementor-location-header) .jsw-on-dark.jsw-on-dark { color: var(--hss-on-dark); }
:is(.elementor-location-footer, .elementor-location-header) .jsw-on-dark-muted.jsw-on-dark-muted { color: var(--hss-on-dark-muted); }

/* ---------- Thank-you page (page 523, 2026-10-28) ----------
   The request summary is written by inc/form-emails.php from the visitor's session; hidden until filled. */
.elementor .jsw-thanks-summary.is-filled { display: flex !important; flex-direction: column; gap: 4px; padding: 16px 20px !important; margin-bottom: 4px; border-radius: 12px; background: var(--hss-neutral, #F4F6F8); }
.hss-thanks-summary__title { margin: 0 0 4px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--hss-blue-deep, #00417A); }
.hss-thanks-summary__list { margin: 0; display: flex; flex-direction: column; }
.hss-thanks-summary__list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
.hss-thanks-summary__list > div + div { border-top: 1px solid var(--hss-border, #DDE3E9); }
.hss-thanks-summary__list dt { margin: 0; flex: 0 0 auto; font-size: 14px; line-height: 20px; color: var(--hss-text-muted, #4E565E); }
.hss-thanks-summary__list dd { margin: 0; min-width: 0; text-align: right; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--hss-text, #15212B); overflow-wrap: anywhere; }
@media (max-width: 420px) { .hss-thanks-summary__list > div { flex-direction: column; gap: 2px; } .hss-thanks-summary__list dd { text-align: left; } }
.elementor-element-74773275 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-element-73ca5f51 { gap: 48px !important; }
	.elementor-element-68c4d1e7 { flex: 0 1 400px !important; }
	.elementor-element-76897582 { flex: 1 1 420px !important; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-element-5dca8454 > a { flex: 1 1 calc(50% - 8px) !important; }
}

/* Section spacing 10% tighter on every page (user, 2026-10-28). Each content section's top and bottom
   padding is 90% of the value it had in Elementor at that breakpoint (rounded), grouped by value. Heroes keep
   their own sizing. A new section added later keeps Elementor's padding until it is added here. */
@media (min-width: 1025px) {
	:is(.elementor-element-6b161f98, .elementor-element-1e5f1dca, .elementor-element-7582ff73, .elementor-element-51f310ac, .elementor-element-1f434ec6, .elementor-element-cf078b3, .elementor-element-180c5994, .elementor-element-6613538c, .elementor-element-43114181, .elementor-element-7ebf2b1e, .elementor-element-8cfdb48, .elementor-element-23aabc4b, .elementor-element-79983c22, .elementor-element-41e92c17, .elementor-element-707ece29, .elementor-element-69a272f7, .elementor-element-73b3f7b1, .elementor-element-71a14693, .elementor-element-1e92846d, .elementor-element-1b456e49, .elementor-element-5cb04490, .elementor-element-7c371777) { padding-block: 101px 101px !important; }
	:is(.elementor-element-3483e9c7) { padding-block: 29px 29px !important; }
	:is(.elementor-element-ca35a8a) { padding-block: 72px 72px !important; }
	:is(.elementor-element-70cd88be) { padding-block: 79px 101px !important; }
	:is(.elementor-element-37bde343, .elementor-element-1dee177a, .elementor-element-3297bf63, .elementor-element-18cc4aa9) { padding-block: 86px 101px !important; }
	:is(.elementor-element-241c22f7, .elementor-element-172c330c, .elementor-element-20a172f0, .elementor-element-2c41beb7, .elementor-element-59a85b90, .elementor-element-5547fc43, .elementor-element-2e5bafc6, .elementor-element-4f301d78, .elementor-element-1548dd3d, .elementor-element-6d4b28c9, .elementor-element-7851d92e, .elementor-element-33102343, .elementor-element-4bf32557, .elementor-element-550a9d93, .elementor-element-62184168, .elementor-element-110bce8f, .elementor-element-78df46c4, .elementor-element-be79f95, .elementor-element-3e616eb1, .elementor-element-63b03bb, .elementor-element-3c523d22, .elementor-element-15f783d, .elementor-element-243c6b72, .elementor-element-7a95bb71, .elementor-element-56bda5c, .elementor-element-d86826e, .elementor-element-6a13aa3a, .elementor-element-258c654c, .elementor-element-3974a07c, .elementor-element-6671c38c, .elementor-element-4d79dbd1, .elementor-element-461dad4, .elementor-element-3de0d7b4, .elementor-element-19ecd1ad, .elementor-element-73a8512c, .elementor-element-8e8f977, .elementor-element-5e0e6829, .elementor-element-a4e9382, .elementor-element-530d3249, .elementor-element-ec493d2, .elementor-element-5c17aba6, .elementor-element-5a7f4400, .elementor-element-2c57a66c) { padding-block: 86px 86px !important; }
	:is(.elementor-element-2ff5005c, .elementor-element-166f6fd0, .elementor-element-632a5372, .elementor-element-69bc8f0a, .elementor-element-63cd0de, .elementor-element-77e1e94c, .elementor-element-7ca3aefd, .elementor-element-40d6e9c0, .elementor-element-28df508f, .elementor-element-29744a20, .elementor-element-5c94cdb4, .elementor-element-1fc8e0fd, .elementor-element-725adcfe, .elementor-element-79cb003, .elementor-element-702becbc, .elementor-element-15b9ca08) { padding-block: 94px 94px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	:is(.elementor-element-18cc4aa9) { padding-block: 58px 72px !important; }
	:is(.elementor-element-3483e9c7, .elementor-element-241c22f7, .elementor-element-172c330c, .elementor-element-20a172f0, .elementor-element-2ff5005c, .elementor-element-6b161f98, .elementor-element-2c41beb7, .elementor-element-59a85b90, .elementor-element-5547fc43, .elementor-element-166f6fd0, .elementor-element-2e5bafc6, .elementor-element-4f301d78, .elementor-element-1548dd3d, .elementor-element-6d4b28c9, .elementor-element-7851d92e, .elementor-element-632a5372, .elementor-element-33102343, .elementor-element-4bf32557, .elementor-element-550a9d93, .elementor-element-62184168, .elementor-element-69bc8f0a, .elementor-element-110bce8f, .elementor-element-ca35a8a, .elementor-element-78df46c4, .elementor-element-be79f95, .elementor-element-3e616eb1, .elementor-element-63b03bb, .elementor-element-63cd0de, .elementor-element-3c523d22, .elementor-element-15f783d, .elementor-element-243c6b72, .elementor-element-7a95bb71, .elementor-element-77e1e94c, .elementor-element-56bda5c, .elementor-element-1e5f1dca, .elementor-element-d86826e, .elementor-element-6a13aa3a, .elementor-element-258c654c, .elementor-element-7ca3aefd, .elementor-element-3974a07c, .elementor-element-7582ff73, .elementor-element-6671c38c, .elementor-element-4d79dbd1, .elementor-element-461dad4, .elementor-element-40d6e9c0, .elementor-element-3de0d7b4, .elementor-element-51f310ac, .elementor-element-19ecd1ad, .elementor-element-73a8512c, .elementor-element-8e8f977, .elementor-element-28df508f, .elementor-element-5e0e6829, .elementor-element-1f434ec6, .elementor-element-cf078b3, .elementor-element-180c5994, .elementor-element-6613538c, .elementor-element-a4e9382, .elementor-element-29744a20, .elementor-element-530d3249, .elementor-element-ec493d2, .elementor-element-43114181, .elementor-element-5c94cdb4, .elementor-element-5c17aba6, .elementor-element-7ebf2b1e, .elementor-element-8cfdb48, .elementor-element-1fc8e0fd, .elementor-element-23aabc4b, .elementor-element-79983c22, .elementor-element-41e92c17, .elementor-element-5a7f4400, .elementor-element-725adcfe, .elementor-element-707ece29, .elementor-element-69a272f7, .elementor-element-73b3f7b1, .elementor-element-79cb003, .elementor-element-2c57a66c, .elementor-element-71a14693, .elementor-element-702becbc, .elementor-element-37bde343, .elementor-element-15b9ca08, .elementor-element-1e92846d, .elementor-element-1b456e49, .elementor-element-5cb04490, .elementor-element-7c371777, .elementor-element-70cd88be, .elementor-element-1dee177a, .elementor-element-3297bf63) { padding-block: 72px 72px !important; }
}
@media (max-width: 767px) {
	:is(.elementor-element-18cc4aa9) { padding-block: 43px 58px !important; }
	:is(.elementor-element-70cd88be) { padding-block: 43px 65px !important; }
	:is(.elementor-element-1dee177a, .elementor-element-3297bf63) { padding-block: 50px 65px !important; }
	:is(.elementor-element-3483e9c7, .elementor-element-241c22f7, .elementor-element-172c330c, .elementor-element-20a172f0, .elementor-element-2ff5005c, .elementor-element-6b161f98, .elementor-element-2c41beb7, .elementor-element-59a85b90, .elementor-element-5547fc43, .elementor-element-166f6fd0, .elementor-element-2e5bafc6, .elementor-element-4f301d78, .elementor-element-1548dd3d, .elementor-element-6d4b28c9, .elementor-element-7851d92e, .elementor-element-632a5372, .elementor-element-33102343, .elementor-element-4bf32557, .elementor-element-550a9d93, .elementor-element-62184168, .elementor-element-69bc8f0a, .elementor-element-110bce8f, .elementor-element-ca35a8a, .elementor-element-78df46c4, .elementor-element-be79f95, .elementor-element-3e616eb1, .elementor-element-63b03bb, .elementor-element-63cd0de, .elementor-element-3c523d22, .elementor-element-15f783d, .elementor-element-243c6b72, .elementor-element-7a95bb71, .elementor-element-77e1e94c, .elementor-element-56bda5c, .elementor-element-d86826e, .elementor-element-6a13aa3a, .elementor-element-258c654c, .elementor-element-7ca3aefd, .elementor-element-3974a07c, .elementor-element-6671c38c, .elementor-element-4d79dbd1, .elementor-element-461dad4, .elementor-element-40d6e9c0, .elementor-element-3de0d7b4, .elementor-element-19ecd1ad, .elementor-element-73a8512c, .elementor-element-8e8f977, .elementor-element-28df508f, .elementor-element-5e0e6829, .elementor-element-a4e9382, .elementor-element-29744a20, .elementor-element-530d3249, .elementor-element-ec493d2, .elementor-element-5c94cdb4, .elementor-element-5c17aba6, .elementor-element-1fc8e0fd, .elementor-element-5a7f4400, .elementor-element-725adcfe, .elementor-element-79cb003, .elementor-element-2c57a66c, .elementor-element-71a14693, .elementor-element-702becbc, .elementor-element-15b9ca08, .elementor-element-1e92846d, .elementor-element-1b456e49, .elementor-element-7c371777) { padding-block: 58px 58px !important; }
	:is(.elementor-element-37bde343) { padding-block: 58px 72px !important; }
	:is(.elementor-element-5cb04490) { padding-block: 65px 65px !important; }
	:is(.elementor-element-1e5f1dca, .elementor-element-7582ff73, .elementor-element-51f310ac, .elementor-element-1f434ec6, .elementor-element-cf078b3, .elementor-element-180c5994, .elementor-element-6613538c, .elementor-element-43114181, .elementor-element-7ebf2b1e, .elementor-element-8cfdb48, .elementor-element-23aabc4b, .elementor-element-79983c22, .elementor-element-41e92c17, .elementor-element-707ece29, .elementor-element-69a272f7, .elementor-element-73b3f7b1) { padding-block: 72px 72px !important; }
}

/* State approval tiles (NSW / VIC / QLD / WA: About Us and Regulatory Food Safety Audits) two to a row on
   phones (user, 2026-10-28) instead of four stacked. */
@media (max-width: 767px) {
	:is(.elementor-element-486e856f, .elementor-element-1b3af5a5) { flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; }
	:is(.elementor-element-486e856f, .elementor-element-1b3af5a5) > * { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; padding: 20px 16px !important; }
	:is(.elementor-element-486e856f, .elementor-element-1b3af5a5) > * h3 { font-size: 17px !important; line-height: 24px !important; }
	:is(.elementor-element-486e856f, .elementor-element-1b3af5a5) > * > p:first-child { font-size: 32px !important; line-height: 40px !important; }
	:is(.elementor-element-486e856f, .elementor-element-1b3af5a5) > * p:not(:first-child) { font-size: 14px !important; line-height: 21px !important; }
}