/* ==========================================================================
   Interactive Mega Menu — front-end styles
   Visual language modelled on mondoworldwide.com:
     navy   #002746  translucent two-row header bar
     blue   #0076c0  column headings, primary links, accents
     slate  #637193  secondary link text
     white panel, 160px diagonal slant, "see all" wedge over the bar
   ========================================================================== */

.imm-top-bar,
.imm-mega-menu {
	/* These are re-declared inline by IMM_Settings::output_css() from the
	   Mega Menus > Appearance screen, so the values below are only the
	   fallbacks that ship with the plugin. */
	--imm-navy: #002746;
	--imm-bar-text: #ffffff;
	--imm-blue: #0076c0;
	--imm-slate: #637193;
	--imm-pale: #a8daef;
	--imm-rule: #e3e7ee;
	--imm-panel-bg: #ffffff;
	--imm-cta-bg: #ffffff;
	--imm-cta-text: #002746;
	--imm-shape: #2160a0;
	--imm-cta-slant: 40px;
	--imm-bar-glass: rgba(0, 39, 70, 0.5);
	--imm-bar-blur: 8px;
	--imm-nav-size: 14px;
	--imm-nav-gap: 16px;
	--imm-panel-image: none;
	--imm-panel-image-opacity: 0.12;

	--imm-font-head: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
	--imm-font-body: "Poppins", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Layout rhythm — every gutter/column below is derived from these. */
	--imm-gutter: 48px;
	--imm-row-h: 70px;
	--imm-col-primary: 400px;
	--imm-col-secondary: 360px;
	--imm-col-tertiary: 480px;
	--imm-panel-top: 47px;
}

/* ---- Top bar ------------------------------------------------------------ */

.imm-top-bar {
	position: relative;
	z-index: 100;
	font-family: var(--imm-font-body);
	background: var(--imm-navy);
	color: var(--imm-bar-text);
	transition: box-shadow 0.3s ease;
}

/* Overlay mode: the bar floats over the page from the outset so a hero
   image shows through it, the way the reference site does. `fixed` is used
   rather than `absolute` for the same reason as below — it is independent
   of whatever the page builder wraps the bar in — and because the bar
   leaves the flow, the container holding it collapses and the section
   underneath slides up to meet the top of the window. */
.imm-top-bar.imm-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: var(--imm-bar-glass);
	-webkit-backdrop-filter: blur(var(--imm-bar-blur));
	backdrop-filter: blur(var(--imm-bar-blur));
	transition: background 0.35s ease, box-shadow 0.3s ease;
}

/* Once the page has scrolled there is ordinary content behind the bar
   rather than a hero, so it returns to solid and the blur is dropped —
   translucency over body copy is what makes overlay headers unreadable. */
.imm-top-bar.imm-overlay.imm-stuck {
	background: var(--imm-navy);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* The row divider is barely visible over an image; strengthen it while
   the bar is translucent. */
.imm-top-bar.imm-overlay:not(.imm-stuck) .imm-top-bar-upper {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* Sticking is done with `fixed` plus a spacer, not `position: sticky`.
   Sticky only travels inside its containing block, and page builders
   commonly wrap the bar in a container that is exactly the bar's own
   height — leaving it nowhere to stick. `fixed` is independent of every
   ancestor, and the spacer holds the bar's place in the flow so the page
   below does not jump up by the bar's height when it detaches. */
.imm-top-bar.imm-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

/* Sized by JS to the bar's FULL height, measured before it detaches, so
   the page below never shifts even though the pinned bar is shorter. */
.imm-top-bar-spacer {
	height: 0;
}

/* Pinned and heading down the page: the nav row collapses, leaving a thin
   brand strip. Scrolling back up brings it straight back (see
   .imm-nav-hidden being removed), so navigation is never more than a
   flick of the wheel away. */
.imm-top-bar.imm-stuck.imm-nav-hidden .imm-top-bar-lower {
	height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Scrolled state. The logo row stays — it just condenses — so the brand is
   never lost on the way down the page. Heights and the logo are animated
   rather than switched, so the change reads as one movement. */
.imm-top-bar.imm-compact {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.imm-top-bar.imm-compact .imm-top-bar-upper {
	min-height: calc(var(--imm-row-h) * 0.64);
}
.imm-top-bar.imm-compact .imm-top-bar-logo img {
	max-height: calc(var(--imm-row-h) * 0.64 - 16px);
}
.imm-top-bar.imm-compact .imm-top-bar-lower {
	height: calc(var(--imm-row-h) * 0.8);
}
/* The dropdown trigger's tall hit area sets the row's real floor, so the
   compact row only actually shrinks once this shrinks with it. */
.imm-top-bar.imm-compact .imm-util-item {
	padding: 12px 0;
}

/* Row 1: logo on the left, utility links / language switcher on the right. */
.imm-top-bar-upper {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--imm-row-h);
	padding: 0 var(--imm-gutter);
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
	transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* With no logo the right-hand group still needs to sit at the far end. */
.imm-top-bar-upper-right {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.imm-top-bar-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 8px 0;
}
.imm-top-bar-logo img {
	display: block;
	width: auto;
	/* Themes commonly set img{width:100%}, which stretched the logo to the
	   full width of the bar. Pin the height and let the width follow. */
	max-width: 260px;
	max-height: calc(var(--imm-row-h) - 20px);
	height: auto;
	object-fit: contain;
	transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.imm-util-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--imm-pale);
	text-decoration: none;
	font-family: var(--imm-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
.imm-util-link:hover {
	color: var(--imm-bar-text);
}

/* --- Top-row dropdown ---------------------------------------------------- */

.imm-util-item {
	position: relative;
	display: flex;
	align-items: center;
	/* The row is only ~70px tall, so the dropdown has to be reachable
	   without crossing a gap — the padding gives the pointer somewhere to
	   travel between the trigger and the panel. */
	padding: 24px 0;
	transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.imm-util-caret {
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
.imm-util-item:hover .imm-util-caret {
	transform: translateY(1px) rotate(225deg);
}

.imm-util-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 70;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--imm-panel-bg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.imm-util-item:hover .imm-util-dropdown,
.imm-util-item:focus-within .imm-util-dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.imm-util-dropdown li {
	margin: 0;
	padding: 0;
}
.imm-util-dropdown a {
	display: block;
	padding: 8px 20px;
	color: var(--imm-slate);
	text-decoration: none;
	font-family: var(--imm-font-body);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease;
}
.imm-util-dropdown a:hover {
	color: var(--imm-blue);
	background: rgba(127, 127, 127, 0.08);
}

/* The character between utility links. It is decorative — screen readers
   skip it via aria-hidden in the markup — and dimmed so the links stay
   the thing the eye lands on. */
.imm-util-sep {
	color: var(--imm-pale);
	opacity: 0.45;
	font-family: var(--imm-font-body);
	font-size: 12px;
	line-height: 1;
	user-select: none;
}

/* Slot for a shortcode (e.g. the [gtranslate] language switcher). Third-
   party widgets bring their own markup, so this only sets the colour they
   inherit and keeps them on the row's baseline. */
.imm-top-bar-extra {
	display: flex;
	align-items: center;
	color: var(--imm-pale);
	font-family: var(--imm-font-body);
	font-size: 13px;
	line-height: 1.2;
}
.imm-top-bar-extra select {
	background: transparent;
	color: var(--imm-pale);
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 0;
	padding: 4px 8px;
	font: inherit;
	max-width: 180px;
}
.imm-top-bar-extra select option {
	color: initial;
}
.imm-top-bar-extra img {
	max-width: none;
}

/* Row 2: the nav itself. */
.imm-top-bar-lower {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	height: var(--imm-row-h);
	padding-left: var(--imm-gutter);
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.imm-top-bar-list {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	/* Slid right by JS while a menu with a "see all" wedge is open, so the
	   wedge never covers a nav item. */
	transition: padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.imm-top-bar-list > li {
	position: relative;
	display: flex;
	align-items: center;
}

.imm-top-bar-list > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 0 var(--imm-nav-gap);
	color: var(--imm-bar-text);
	text-decoration: none;
	/* The body face, not the display one. A condensed face like Bebas Neue
	   is built for large headings and turns cramped and hard to read at
	   nav size, especially uppercase with tracking. */
	font-family: var(--imm-font-body);
	font-size: var(--imm-nav-size);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Items that open a panel are controls, not destinations — the click is
   intercepted, so give them the affordance of a control. */
.imm-top-bar-list > li.imm-has-mega-menu > a {
	cursor: pointer;
}

/* The thin white underline that grows under the open item. */
.imm-top-bar-list > li > a::after {
	content: '';
	position: absolute;
	left: var(--imm-nav-gap);
	right: var(--imm-nav-gap);
	bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.imm-top-bar-list > li.imm-open > a::after,
.imm-top-bar-list > li > a:hover::after {
	transform: scaleX(1);
}

/* Chevron: a hairline caret, flipping when the panel is open. */
.imm-topbar-chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s ease;
}
li.imm-has-mega-menu.imm-open .imm-topbar-chevron {
	transform: translateY(1px) rotate(225deg);
}

.imm-top-bar-right {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.imm-top-bar-search {
	display: flex;
	align-items: center;
	padding: 0 24px;
	color: var(--imm-bar-text);
	line-height: 1;
	cursor: pointer;
	background: none;
	border: none;
	transition: opacity 0.2s ease;
}
.imm-top-bar-search svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	display: block;
}
.imm-top-bar-search:hover {
	opacity: 0.7;
}

/* The white CTA block with Mondo's diagonal leading edge. */
.imm-top-bar-cta {
	display: flex !important;
	align-items: center !important;
	background: var(--imm-cta-bg) !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--imm-cta-text) !important;
	text-decoration: none !important;
	font-family: var(--imm-font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	padding: 0 var(--imm-gutter) 0 64px !important;
	clip-path: polygon(var(--imm-cta-slant) 0, 100% 0, 100% 100%, 0 100%);
	transition: opacity 0.2s ease !important;
}
.imm-top-bar-cta:hover {
	opacity: 0.85;
}

/* Mobile-only controls, declared off here rather than only switched on in
   the media query, or they render as stray buttons on desktop.
   !important is not decoration: theme resets target [type="button"], which
   carries the same specificity as a class, so whichever stylesheet loads
   last wins — and the theme's usually does. One such reset was painting
   these with a pink border in the middle of the header. */
.imm-top-bar .imm-mobile-toggle,
.imm-mega-menu .imm-mega-back {
	display: none !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* ---- Mega menu panel ---------------------------------------------------- */

li.imm-has-mega-menu {
	position: static; /* the panel spans the whole bar, not the item */
}

.imm-mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	width: 100vw;
	max-width: 100vw;
	text-align: left;
	color: var(--imm-slate);
	font-family: var(--imm-font-body);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.2px;
	/* Deliberately NOT clipped: the "see all" wedge sits above this box,
	   overlapping the dark bar. Clipping happens on .imm-mega-inner. */
	overflow: visible;
}

/* The white slab. It is revealed by wiping its clip-path down from the top
   edge — the reference site uncovers the panel rather than sliding or
   fading it, so the columns never move while the menu opens. */
.imm-mega-inner {
	position: relative;
	min-height: 480px;
	background: var(--imm-panel-bg);
	box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

li.imm-has-mega-menu > .imm-mega-menu,
.imm-elementor-trigger-wrap > .imm-mega-menu {
	visibility: hidden;
	pointer-events: none;
}
li.imm-has-mega-menu > .imm-mega-menu .imm-mega-inner,
.imm-elementor-trigger-wrap > .imm-mega-menu .imm-mega-inner {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The wedge is outside the clipped slab, so it gets its own reveal. */
li.imm-has-mega-menu > .imm-mega-menu .imm-mega-topbar,
.imm-elementor-trigger-wrap > .imm-mega-menu .imm-mega-topbar {
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

li.imm-has-mega-menu.imm-open > .imm-mega-menu,
.imm-elementor-trigger-wrap.imm-open > .imm-mega-menu {
	visibility: visible;
	pointer-events: auto;
}
li.imm-has-mega-menu.imm-open > .imm-mega-menu .imm-mega-inner,
.imm-elementor-trigger-wrap.imm-open > .imm-mega-menu .imm-mega-inner {
	clip-path: inset(0 0 0 0);
}
li.imm-has-mega-menu.imm-open > .imm-mega-menu .imm-mega-topbar,
.imm-elementor-trigger-wrap.imm-open > .imm-mega-menu .imm-mega-topbar {
	opacity: 1;
	transform: none;
}

/* A faint image filling the panel's empty right-hand area. Anchored to
   the bottom-right and held behind everything, so it is texture for the
   dead space rather than something competing with the columns. */
.imm-mega-backdrop {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 55%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	background-image: var(--imm-panel-image);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	opacity: var(--imm-panel-image-opacity);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
	mask-image: linear-gradient(to right, transparent, #000 45%);
}

/* The diagonal accent tucked into the bottom-right corner. It is a quiet
   finishing mark on the reference site, not a background panel, so it is
   sized in fixed pixels rather than as a percentage of the panel — a tall
   menu shouldn't grow a bigger wedge. */
.imm-mega-shape {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 190px;
	height: 130px;
	pointer-events: none;
	background: var(--imm-shape);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ---- "See all" wedge, sitting up in the bar ----------------------------- */

/* On the reference site this tab overlaps the dark nav row: a white slab
   with a slanted right edge carrying the section's catch-all link. */
.imm-mega-topbar {
	position: absolute;
	top: calc(var(--imm-row-h) * -1);
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 20px;
	/* Only as wide as its own text. It sits over the nav row, so any extra
	   padding here is a nav item the visitor can no longer read or click. */
	width: max-content;
	max-width: 40%;
	height: var(--imm-row-h);
	padding: 0 28px 0 var(--imm-gutter);
	background: var(--imm-panel-bg);
	clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
}

.imm-mega-topbar a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--imm-blue);
	text-decoration: none;
	font-family: var(--imm-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
}
.imm-mega-topbar a:hover {
	color: var(--imm-navy);
}
.imm-mega-topbar a .imm-arrow {
	transition: transform 0.2s ease;
}
.imm-mega-topbar a:hover .imm-arrow {
	transform: translateY(3px);
}

/* ---- Columns ------------------------------------------------------------ */

.imm-mega-cols {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	padding: var(--imm-panel-top) var(--imm-gutter) 56px;
	min-height: 480px;
}

.imm-col-heading {
	margin: 0 0 20px;
	color: var(--imm-blue);
	font-family: var(--imm-font-head);
	font-size: 18px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.imm-col-heading .imm-slash {
	color: var(--imm-blue);
	opacity: 0.55;
}

/* Column 1 — the item list. */
.imm-left-col {
	flex: 0 0 var(--imm-col-primary);
	width: var(--imm-col-primary);
	padding-right: 48px;
	box-sizing: border-box;
}

.imm-left-items {
	display: flex;
	flex-direction: column;
}

/* Themes routinely style every <button> and <a>; strip all of it back so
   only the rules below can show through. The row may be a div (label link
   plus chevron), an anchor (nothing to open) or a span (neither). */
.imm-mega-menu .imm-left-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	text-align: left !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	min-height: 31px !important;
	font-family: var(--imm-font-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 18px !important;
	letter-spacing: 0.2px !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--imm-slate) !important;
	cursor: pointer !important;
	position: relative !important;
	transition: color 0.2s ease !important;
}

.imm-left-item-label {
	/* Not flex:1 — the label box has to hug its text so the underline below
	   stops at the end of the words rather than running out to the chevron.
	   space-between on the row still pushes the chevron to the far right. */
	flex: 0 1 auto;
	position: relative;
}

.imm-mega-menu .imm-left-item:hover,
.imm-mega-menu .imm-left-item:focus-visible,
.imm-mega-menu .imm-left-item.is-active {
	color: var(--imm-blue) !important;
}

/* An item whose column 2 would be empty is rendered as a real anchor, so
   it inherits none of the button resets above. */
.imm-mega-menu a.imm-left-item {
	text-decoration: none !important;
}

/* The label is its own link, sitting beside the chevron. It takes the
   growing underline that used to live on the row. */
.imm-mega-menu .imm-left-item-label {
	flex: 0 1 auto;
	position: relative;
	color: inherit !important;
	background: none !important;
	text-decoration: none !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	transition: color 0.2s ease;
}
.imm-mega-menu a.imm-left-item-label {
	cursor: pointer;
}
.imm-mega-menu a.imm-left-item-label:hover,
.imm-mega-menu a.imm-left-item-label:focus-visible {
	color: var(--imm-blue) !important;
}

/* The chevron's button: a hit target, nothing more. Padded so it is
   comfortably tappable without widening the row. */
.imm-mega-menu .imm-left-item-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex: 1 1 auto !important;
	align-self: stretch !important;
	min-width: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: inherit !important;
	font: inherit !important;
	cursor: pointer !important;
}

/* Visible to screen readers, not to the eye. */
.imm-screen-reader {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Chevron drawn from borders so it needs no icon font. It points right:
   these rows lead sideways into column two, not down into a sub-list. */
.imm-chevron {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--imm-blue);
	border-bottom: 1.5px solid var(--imm-blue);
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}
.imm-mega-menu .imm-left-item:hover .imm-chevron,
.imm-mega-menu .imm-left-item.is-active .imm-chevron {
	transform: translateX(3px) rotate(-45deg);
}

/* The rule that grows under the label on hover, left to right. Drawn as a
   pseudo-element so it can animate — a real border-bottom can only be
   switched on and off. It is anchored to the label, not the row, so it is
   exactly as wide as the text. */
.imm-mega-menu .imm-left-item-label::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--imm-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.imm-mega-menu .imm-left-item:hover .imm-left-item-label::after,
.imm-mega-menu .imm-left-item:focus-visible .imm-left-item-label::after,
.imm-mega-menu .imm-left-item.is-active .imm-left-item-label::after {
	transform: scaleX(1);
}

.imm-emoji-icon {
	margin-right: 8px;
	font-size: 16px;
	line-height: 1;
}

/* Column 2 — content for the chosen item.
   The menu opens showing column one alone; picking an item there adds
   .imm-stage-2 and fades this in. `visibility` rather than `display` keeps
   the columns' widths reserved, so nothing shifts sideways on reveal. */
.imm-right-col {
	flex: 0 0 var(--imm-col-secondary);
	width: var(--imm-col-secondary);
	padding-right: 48px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-28px);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}
.imm-mega-menu.imm-stage-2 .imm-right-col {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.imm-right-panel {
	display: none;
}
.imm-right-panel.is-active {
	display: block;
	animation: imm-fade-in 0.3s ease both;
}

@keyframes imm-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* --- Entrance animations ------------------------------------------------
   Column one's rows and column two's entries stagger in behind the panel's
   own reveal, so the menu assembles itself instead of appearing all at
   once. The delays are small and capped: past roughly ten rows the wait
   would be longer than the visitor's patience, so later rows share the
   last step rather than continuing to accumulate. */

@keyframes imm-rise-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes imm-slide-in {
	from { opacity: 0; transform: translateX(-14px); }
	to   { opacity: 1; transform: none; }
}

li.imm-has-mega-menu.imm-open .imm-left-item,
.imm-elementor-trigger-wrap.imm-open .imm-left-item {
	animation: imm-rise-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(1) { animation-delay: 0.06s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(2) { animation-delay: 0.09s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(3) { animation-delay: 0.12s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(4) { animation-delay: 0.15s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(5) { animation-delay: 0.18s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(6) { animation-delay: 0.21s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(7) { animation-delay: 0.24s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(8) { animation-delay: 0.27s; }
li.imm-has-mega-menu.imm-open .imm-left-item:nth-child(n+9) { animation-delay: 0.3s; }

/* Column two's entries replay this every time the panel changes, because
   the panel is re-shown rather than merely revealed. */
.imm-right-panel.is-active .imm-group-heading,
.imm-right-panel.is-active .imm-item-list li,
.imm-right-panel.is-active .imm-panel-content > a {
	animation: imm-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.imm-right-panel.is-active .imm-panel-content > *:nth-child(1) { animation-delay: 0.04s; }
.imm-right-panel.is-active .imm-panel-content > *:nth-child(2) { animation-delay: 0.08s; }
.imm-right-panel.is-active .imm-panel-content > *:nth-child(3) { animation-delay: 0.12s; }
.imm-right-panel.is-active .imm-panel-content > *:nth-child(n+4) { animation-delay: 0.16s; }
.imm-right-panel.is-active .imm-item-list li:nth-child(1) { animation-delay: 0.05s; }
.imm-right-panel.is-active .imm-item-list li:nth-child(2) { animation-delay: 0.08s; }
.imm-right-panel.is-active .imm-item-list li:nth-child(3) { animation-delay: 0.11s; }
.imm-right-panel.is-active .imm-item-list li:nth-child(4) { animation-delay: 0.14s; }
.imm-right-panel.is-active .imm-item-list li:nth-child(n+5) { animation-delay: 0.17s; }

/* The panel title leads the column in. */
.imm-right-panel.is-active .imm-panel-title {
	animation: imm-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Card swaps cross-fade rather than cutting. */
.imm-focus-card.is-active {
	animation: imm-rise-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* The top-row dropdown's own entries stagger too. */
.imm-util-item:hover .imm-util-dropdown li {
	animation: imm-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.imm-util-item:hover .imm-util-dropdown li:nth-child(1) { animation-delay: 0.04s; }
.imm-util-item:hover .imm-util-dropdown li:nth-child(2) { animation-delay: 0.07s; }
.imm-util-item:hover .imm-util-dropdown li:nth-child(3) { animation-delay: 0.10s; }
.imm-util-item:hover .imm-util-dropdown li:nth-child(n+4) { animation-delay: 0.13s; }

@media (prefers-reduced-motion: reduce) {
	.imm-mega-menu *,
	.imm-top-bar * {
		animation: none !important;
		transition: none !important;
	}
}

.imm-panel-title {
	margin: 0 0 20px;
	color: var(--imm-blue);
	font-family: var(--imm-font-head);
	font-size: 18px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.imm-panel-title a {
	color: inherit;
	text-decoration: none;
}

.imm-panel-content {
	font-size: 16px;
	line-height: 24px;
}

/* A bare <a> in the content field renders as a blue row with a chevron,
   matching "Track & Field view full info". */
.imm-panel-content > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	min-height: 31px;
	color: var(--imm-blue);
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.2px;
	text-decoration: none;
}
.imm-panel-content > a::after {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
.imm-panel-content > a:hover::after {
	transform: translateY(1px) rotate(45deg);
}

/* --- Structured column-2 items (the "Column 2 items" field) ------------- */

/* Group heading, e.g. "Sport Floorings:" */
.imm-group-heading {
	margin: 20px 0 8px;
	color: var(--imm-blue);
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.2px;
}
.imm-group-heading:first-child {
	margin-top: 0;
}

.imm-item-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.imm-item-list li {
	padding: 0;
}

/* Every line in column two, clickable or not. */
.imm-mega-menu .imm-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--imm-slate);
	text-decoration: none;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

/* Same growing rule as column one, sized to the text. */
.imm-mega-menu .imm-item::before {
	content: '';
	position: absolute;
	left: 0;
	right: 14px;
	bottom: 2px;
	height: 1px;
	background: var(--imm-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.imm-mega-menu .imm-item:hover::before,
.imm-mega-menu .imm-item:focus-visible::before {
	transform: scaleX(1);
}

/* The chevron only exists on hover here — column two is a list of names,
   and a permanent arrow on every line would be noise. */
.imm-mega-menu .imm-item::after {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--imm-blue);
	border-bottom: 1.5px solid var(--imm-blue);
	transform: rotate(-45deg) translate(-4px, -4px);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.imm-mega-menu .imm-item:hover::after,
.imm-mega-menu .imm-item:focus-visible::after {
	opacity: 1;
	transform: rotate(-45deg);
}

/* Only lines that were given a URL get link affordances — the rest are
   hover targets for the third column and must not look clickable. */
.imm-mega-menu a.imm-item--link {
	cursor: pointer;
}
.imm-mega-menu a.imm-item--link:hover,
.imm-mega-menu a.imm-item--link:focus-visible {
	color: var(--imm-blue);
}
.imm-mega-menu span.imm-item {
	cursor: default;
}
.imm-mega-menu span.imm-item:hover {
	color: var(--imm-blue);
}

/* <hr> is the hairline rule between link groups. */
.imm-panel-content hr {
	border: none;
	border-top: 1px solid var(--imm-rule);
	margin: 16px 0;
}

/* <strong> on its own line is a group label, e.g. "Sport Floorings:" */
.imm-panel-content > p > strong:only-child,
.imm-panel-content > strong {
	display: block;
	margin: 20px 0 8px;
	color: var(--imm-blue);
	font-size: 16px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0.2px;
}

/* A <ul> is the tracked-out uppercase product list. */
.imm-panel-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.imm-panel-content ul li {
	padding: 0;
}
.imm-panel-content ul li a {
	display: block;
	color: var(--imm-slate);
	text-decoration: none;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.imm-panel-content ul li a:hover {
	color: var(--imm-blue);
}

/* Column 3 — the focus card. Hidden, heading included, until a column-2
   line carrying an image or description is hovered (.imm-has-card). */
.imm-focus-col {
	flex: 1 1 var(--imm-col-tertiary);
	max-width: var(--imm-col-tertiary);
	margin-left: auto;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-28px);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}
.imm-mega-menu.imm-has-card .imm-focus-col {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.imm-focus-heading {
	margin: 0 0 16px;
	text-align: right;
	color: var(--imm-blue);
	font-family: var(--imm-font-head);
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.imm-focus-card {
	display: none;
	text-decoration: none;
	background: var(--imm-panel-bg);
}
.imm-focus-card.is-active {
	display: flex;
	animation: imm-fade-in 0.3s ease both;
}

/* Stacked, not side by side: image on top, then title, then description. */
.imm-focus-card {
	flex-direction: column;
}

.imm-focus-card-media {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	min-height: 140px;
}

.imm-focus-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	background: var(--imm-panel-bg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.imm-focus-card-eyebrow {
	color: var(--imm-blue);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.imm-focus-card-title {
	margin: 0;
	color: var(--imm-navy);
	font-family: var(--imm-font-head);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.imm-focus-card-desc {
	color: var(--imm-slate);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.2px;
	text-transform: none;
}

.imm-focus-card-arrow {
	margin-top: auto;
	align-self: flex-end;
	color: var(--imm-blue);
	transition: transform 0.2s ease;
}
.imm-focus-card:hover .imm-focus-card-arrow {
	transform: translateY(4px);
}

/* ---- Elementor trigger widget ------------------------------------------- */

.imm-elementor-trigger-wrap {
	position: relative;
	display: inline-block;
}
.imm-elementor-trigger {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 0 !important;
	font: inherit !important;
	cursor: pointer !important;
	padding: 0.5em 0.75em !important;
}

/* ---- Responsive --------------------------------------------------------- */

/* Below the full 1600px canvas the fixed columns compress before the mobile
   breakpoint takes over, and the third column is the first to go. */
@media (max-width: 1280px) {
	.imm-mega-menu {
		--imm-col-primary: 320px;
		--imm-col-secondary: 320px;
		--imm-gutter: 32px;
	}
	.imm-focus-col {
		display: none;
	}
}

@media (max-width: 900px) {
	.imm-mega-menu {
		--imm-col-primary: 260px;
		--imm-col-secondary: 280px;
	}
	.imm-top-bar-cta {
		padding: 0 24px 0 40px !important;
	}
}

@media (max-width: 782px) {
	/* ---- Mobile: a slide-in panel, not a stacked page ------------------
	   The desktop menu is a wide hover surface, which has no meaning on a
	   phone. The bar collapses to a logo and a toggle; the nav slides in
	   over the page as a coloured panel; and each mega menu becomes a
	   second level that slides in over that, with a back control. It is
	   the drill-down the reference site uses, and it keeps every item a
	   full-width tap target.
	   -------------------------------------------------------------------- */

	.imm-top-bar {
		--imm-row-h: 60px;
	}

	.imm-top-bar-upper {
		position: relative;
		z-index: 3;
		min-height: var(--imm-row-h);
		padding: 0 20px;
		background: var(--imm-navy);
		border-bottom: none;
	}
	.imm-top-bar.imm-overlay .imm-top-bar-upper {
		background: transparent;
	}

	/* The utility links and the language switcher move into the panel; the
	   bar itself keeps only the logo and the toggle. */
	.imm-top-bar-upper-right {
		display: none;
	}

	.imm-top-bar-logo img {
		max-height: 34px;
	}

	.imm-top-bar .imm-mobile-toggle {
		position: absolute;
		top: 0;
		right: 14px;
		z-index: 4;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: var(--imm-row-h);
		padding: 0 !important;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		color: var(--imm-bar-text) !important;
		cursor: pointer;
	}
	.imm-top-bar .imm-mobile-toggle {
		display: flex !important;
	}

	/* Three bars that fold into a cross, so the control always says what
	   tapping it will do next. */
	.imm-burger,
	.imm-burger::before,
	.imm-burger::after {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
	}
	.imm-burger {
		position: relative;
	}
	.imm-burger::before,
	.imm-burger::after {
		content: '';
		position: absolute;
		left: 0;
	}
	.imm-burger::before { top: -7px; }
	.imm-burger::after  { top: 7px; }

	.imm-top-bar.imm-mobile-open .imm-burger {
		background: transparent;
	}
	.imm-top-bar.imm-mobile-open .imm-burger::before {
		transform: translateY(7px) rotate(45deg);
	}
	.imm-top-bar.imm-mobile-open .imm-burger::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* ---- Level 1: the sliding nav panel -------------------------------- */

	.imm-top-bar-lower {
		position: fixed;
		top: var(--imm-row-h);
		left: 0;
		/* A strip of the page stays visible, so it is obvious the menu is
		   sitting on top of something rather than being a new page. */
		right: 40px;
		z-index: 90;
		display: block;
		padding: 0 0 96px;
		background: var(--imm-blue);
		/* dvh, not vh: a phone's address bar is inside vh but outside the
		   visible area, so a vh-tall panel hides its last rows under the
		   browser chrome with no way to scroll to them. The vh line is the
		   fallback for browsers without dvh. */
		height: calc(100vh - var(--imm-row-h));
		height: calc(100dvh - var(--imm-row-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.38s;
	}
	.imm-top-bar.imm-mobile-open .imm-top-bar-lower {
		transform: none;
		visibility: visible;
	}

	.imm-top-bar-list {
		display: block;
		width: 100%;
		padding: 0 !important;
		transition: none;
	}

	.imm-top-bar-list > li {
		display: block;
		width: 100%;
		border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent);
	}

	.imm-top-bar-list > li > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: auto;
		min-height: 61px;
		padding: 18px 20px 18px 28px;
		font-family: var(--imm-font-head);
		font-size: 18px;
		font-weight: 400;
		letter-spacing: 2px;
	}
	/* The growing underline belongs to the desktop bar. */
	.imm-top-bar-list > li > a::after {
		display: none;
	}

	.imm-topbar-chevron {
		width: 9px;
		height: 9px;
		border-width: 2px;
	}
	li.imm-has-mega-menu.imm-open .imm-topbar-chevron {
		transform: translateY(-2px) rotate(45deg);
	}

	/* Search and CTA sit at the foot of the panel, on the darker ground. */
	.imm-top-bar-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0;
		padding: 0;
		background: var(--imm-navy);
	}
	.imm-top-bar-cta {
		flex: 1 1 auto;
		justify-content: flex-start !important;
		min-height: 64px;
		padding: 0 28px !important;
		background: transparent !important;
		color: var(--imm-bar-text) !important;
		font-family: var(--imm-font-head) !important;
		font-size: 18px !important;
		letter-spacing: 2px !important;
		clip-path: none;
	}
	.imm-top-bar-search {
		padding: 0 24px;
	}

	/* ---- Level 2: a mega menu, slid in over level 1 -------------------- */

	li.imm-has-mega-menu > .imm-mega-menu {
		position: fixed;
		top: var(--imm-row-h);
		left: 0;
		right: 40px;
		z-index: 95;
		width: auto;
		max-width: none;
		padding-bottom: 96px;
		background: var(--imm-panel-bg);
		height: calc(100vh - var(--imm-row-h));
		height: calc(100dvh - var(--imm-row-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(100%);
		transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.38s;
	}
	li.imm-has-mega-menu.imm-mobile-panel > .imm-mega-menu {
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	.imm-mega-menu .imm-mega-back {
		display: flex !important;
		/* Pinned to the top of the scrolling panel: on a long list the way
		   back must not be something you have to scroll up to find. */
		position: sticky;
		top: 0;
		z-index: 2;
		align-items: center;
		gap: 14px;
		width: 100%;
		min-height: 58px;
		padding: 0 20px !important;
		background: color-mix(in srgb, var(--imm-blue) 10%, transparent) !important;
		border: none !important;
		border-bottom: 1px solid var(--imm-rule) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var(--imm-blue) !important;
		font-family: var(--imm-font-head) !important;
		font-size: 18px !important;
		letter-spacing: 2px !important;
		text-transform: uppercase !important;
		text-align: left;
		cursor: pointer;
	}
	.imm-mega-back-arrow {
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	.imm-mega-inner {
		min-height: 0;
		box-shadow: none;
		overflow: visible;
		clip-path: none !important;
		transition: none !important;
	}

	/* No decoration on a phone: it costs bandwidth and steals contrast from
	   text that has to be read at arm's length. */
	.imm-mega-backdrop,
	.imm-mega-shape,
	.imm-mega-topbar,
	.imm-focus-col {
		display: none !important;
	}

	.imm-mega-cols {
		display: block;
		padding: 0;
		min-height: 0;
	}

	.imm-left-col,
	.imm-right-col {
		width: 100%;
		max-width: none;
		flex: none;
		padding: 0;
	}

	/* The column heading becomes a small section eyebrow — at phone size a
	   full-size heading competes with the rows it is introducing. */
	.imm-col-heading {
		margin: 0;
		padding: 18px 20px 8px;
		font-size: 12px;
		letter-spacing: 1.6px;
		opacity: 0.65;
	}
	.imm-col-heading .imm-slash {
		display: none;
	}

	/* The panel title repeats the row that was just tapped, so it is
	   demoted to a quiet label rather than shouting the same word twice. */
	.imm-panel-title {
		margin: 0 0 10px;
		font-size: 12px;
		letter-spacing: 1.6px;
		opacity: 0.65;
	}

	.imm-group-heading {
		margin: 14px 0 4px;
		font-size: 13px;
		font-weight: 600;
	}
	.imm-group-heading:first-child {
		margin-top: 0;
	}

	/* ---- Level 2 rows behave as accordions ----------------------------- */

	.imm-mega-menu .imm-left-item {
		min-height: 56px !important;
		padding: 16px 20px !important;
		border-bottom: 1px solid var(--imm-rule) !important;
		font-size: 16px !important;
	}
	.imm-left-item-label::after {
		display: none;
	}
	.imm-mega-menu .imm-chevron,
	.imm-mega-menu .imm-left-item.is-active .imm-chevron,
	.imm-mega-menu .imm-left-item:hover .imm-chevron {
		width: 9px;
		height: 9px;
		border-width: 2px;
		transform: rotate(45deg);
	}
	.imm-mega-menu .imm-left-item.is-open .imm-chevron {
		transform: rotate(-135deg);
	}

	/* The panels are relocated next to their own row by the script, leaving
	   this column empty; it is hidden rather than left as a gap. */
	.imm-right-col {
		display: none;
	}
	.imm-left-items > .imm-right-panel,
	.imm-right-panel {
		display: none;
		padding: 6px 20px 20px;
		background: color-mix(in srgb, var(--imm-blue) 5%, transparent);
		border-bottom: 1px solid var(--imm-rule);
		animation: none;
	}
	.imm-right-panel.is-active {
		display: block;
	}

	.imm-panel-title {
		margin-bottom: 12px;
	}
	.imm-mega-menu .imm-item {
		display: flex;
		width: 100%;
		padding: 6px 0;
		line-height: 1.5;
	}
	.imm-mega-menu .imm-item::before,
	.imm-mega-menu .imm-item::after {
		display: none;
	}

	/* Body scrolling is locked while either level is open. */
	body.imm-mobile-menu-open {
		overflow: hidden;
	}

	/* ---- Drawer and form ------------------------------------------------ */

	.imm-drawer-panel {
		width: 100vw;
	}
	.imm-drawer-edge {
		display: none;
	}
	.imm-drawer-inner {
		padding: 88px 20px 40px;
	}
	.imm-drawer-close {
		top: 16px;
		right: 16px;
		width: 44px !important;
		height: 44px !important;
	}
}

/* ---- Right drawer (the CTA's slide-in panel) ---------------------------- */

/* The drawer is a sibling of the bar, but it must sit above everything on
   the page — including a pinned bar — so it carries its own stacking
   context well clear of the rest. */
.imm-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	font-family: var(--imm-font-body);
}
.imm-drawer[hidden] {
	display: none;
}

.imm-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: var(--imm-navy);
	opacity: 0;
	transition: opacity 0.35s ease;
	cursor: pointer;
}
.imm-drawer.is-open .imm-drawer-backdrop {
	opacity: 0.77;
}

.imm-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(820px, 82vw);
	display: flex;
	flex-direction: column;
	background: var(--imm-navy);
	color: var(--imm-bar-text);
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.imm-drawer.is-open .imm-drawer-panel {
	transform: none;
}

/* The slanted leading edge, in the same navy as the panel, so the drawer
   cuts into the page diagonally rather than as a plain rectangle. */
.imm-drawer-edge {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 160px;
	background: var(--imm-navy);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}

.imm-drawer-close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px !important;
	height: 52px !important;
	padding: 0 !important;
	background: var(--imm-blue) !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--imm-font-body) !important;
	font-size: 28px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.2s ease !important;
}
.imm-drawer-close:hover {
	transform: rotate(90deg);
}

.imm-drawer-inner {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 96px var(--imm-gutter) 56px;
}

.imm-drawer-title {
	margin: 0 0 16px;
	max-width: 22ch;
	color: var(--imm-pale);
	font-family: var(--imm-font-head);
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.imm-drawer-intro {
	margin: 0 0 32px;
	max-width: 60ch;
	color: var(--imm-bar-text);
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.85;
}

/* NOTE: an earlier, cruder version of these rules lived here. It set every
   focused field's border to var(--imm-blue), which is invisible whenever a
   site's accent is the same dark colour as the drawer itself — a common
   case, and exactly what made the focused label and ring disappear. The
   replacements further down use --q-focus, which is white inside the
   drawer and the accent on a light page, so focus is always visible.
   See "Built-in enquiry form" and "Third-party forms inside the drawer". */

/* Set by JS while a drawer is open, so the page behind cannot scroll. */
body.imm-drawer-open {
	overflow: hidden;
}

@media (max-width: 782px) {
	.imm-drawer-panel {
		width: 100vw;
	}
	.imm-drawer-edge {
		display: none;
	}
	.imm-drawer-inner {
		padding: 88px 20px 40px;
	}
	.imm-drawer-close {
		top: 16px;
		right: 16px;
		width: 44px !important;
		height: 44px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.imm-drawer-panel,
	.imm-drawer-backdrop {
		transition: none !important;
	}
	.imm-drawer-close:hover {
		transform: none;
	}
}

/* ---- Built-in enquiry form ---------------------------------------------- */

/* The form is used in two very different places — inside the dark drawer,
   and standalone on an ordinary light page via [imm_quote_form]. Rather
   than two sets of rules, every colour is a variable: the defaults suit a
   light page, and the drawer re-points them at its own palette. */
.imm-quote-form {
	--q-text: #1d2433;
	--q-label: #626c80;
	--q-border: #d7dce5;
	--q-border-strong: #aab3c2;
	--q-field-bg: #fff;
	--q-placeholder: #9aa3b2;
	--q-danger: #c0392b;
	--q-success: #1e8e5a;
	/* Focus is deliberately its own colour rather than reusing the brand
	   accent: on a dark panel a dark accent is invisible, and the accent
	   and the panel background are the same value in plenty of palettes. */
	--q-focus: var(--imm-blue);

	color: var(--q-text);
	font-family: var(--imm-font-body);
}

.imm-drawer-content .imm-quote-form {
	--q-text: #fff;
	--q-label: rgba(255, 255, 255, 0.7);
	--q-border: rgba(255, 255, 255, 0.2);
	--q-border-strong: rgba(255, 255, 255, 0.45);
	--q-field-bg: rgba(255, 255, 255, 0.05);
	--q-placeholder: rgba(255, 255, 255, 0.38);
	--q-danger: #ff9d8f;
	--q-success: #7fe0ac;
	/* White on the dark panel: guaranteed to be visible whatever the site's
	   accent happens to be. */
	--q-focus: #fff;
}

/* Visually gone, but still reachable by a bot filling every input. */
.imm-quote-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.imm-quote-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px 20px;
}

.imm-quote-field {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.imm-quote-field--wide {
	grid-column: 1 / -1;
}

.imm-quote-label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 8px;
	color: var(--q-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	line-height: 1;
	text-transform: none;
	transition: color 0.2s ease;
}
.imm-quote-field:focus-within .imm-quote-label {
	color: var(--q-focus);
}

.imm-quote-req {
	color: var(--q-danger);
	font-size: 14px;
	line-height: 1;
}

/* "optional" reads more kindly than starring the four required fields and
   leaving the visitor to work out the rest. */
.imm-quote-optional {
	margin-left: auto;
	color: var(--q-label);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.4px;
	text-transform: none;
	opacity: 0.7;
}

.imm-quote-form input[type="text"],
.imm-quote-form input[type="email"],
.imm-quote-form input[type="tel"],
.imm-quote-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 15px 17px;
	background: var(--q-field-bg);
	border: 1px solid var(--q-border);
	border-radius: 10px;
	color: var(--q-text);
	font-family: var(--imm-font-body);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.imm-quote-form input::placeholder,
.imm-quote-form textarea::placeholder {
	color: var(--q-placeholder);
}

.imm-quote-form input:hover,
.imm-quote-form textarea:hover {
	border-color: var(--q-border-strong);
}

/* A ring rather than a colour swap, so the focused field is obvious
   against both the light page and the drawer's navy. The 1px lift is
   small enough to read as attention rather than movement. */
.imm-quote-form input:focus,
.imm-quote-form textarea:focus {
	outline: none;
	border-color: var(--q-focus);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-focus) 22%, transparent);
	transform: translateY(-1px);
}

.imm-quote-form textarea {
	resize: vertical;
	min-height: 120px;
}

/* Set by the script on the fields that failed. */
.imm-quote-form .imm-invalid {
	border-color: var(--q-danger);
}
.imm-quote-form .imm-invalid:focus {
	border-color: var(--q-danger);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-danger) 25%, transparent);
}

.imm-quote-error {
	display: block;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	color: var(--q-danger);
	font-size: 12px;
	line-height: 1.4;
	opacity: 0;
	transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}
.imm-quote-error:not(:empty) {
	max-height: 3em;
	margin-top: 6px;
	opacity: 1;
}

.imm-quote-consent {
	margin: 22px 0 0;
}
.imm-quote-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--q-text);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}
.imm-quote-consent input {
	flex: 0 0 auto;
	margin-top: 3px;
	accent-color: var(--q-focus);
}

.imm-quote-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 20px;
	margin: 28px 0 0;
}

.imm-quote-submit {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	padding: 16px 34px !important;
	background: var(--imm-cta-bg) !important;
	background-image: none !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	color: var(--imm-cta-text) !important;
	font-family: var(--imm-font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
}
.imm-quote-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}
.imm-quote-submit:active {
	transform: none;
}

/* Chevron, drawn from borders so no icon font is needed. */
.imm-quote-submit-arrow {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.imm-quote-submit:hover .imm-quote-submit-arrow {
	transform: translateX(3px) rotate(-45deg);
}

.imm-quote-spinner {
	position: absolute;
	right: 26px;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
	animation: imm-spin 0.7s linear infinite;
}

@keyframes imm-spin {
	to { transform: rotate(360deg); }
}

/* While sending: the label and arrow give way to the spinner in place, so
   the button keeps its size and the layout doesn't twitch. */
.imm-quote-form.is-sending .imm-quote-submit {
	pointer-events: none;
	opacity: 0.75;
}
.imm-quote-form.is-sending .imm-quote-submit-label {
	opacity: 0.55;
}
.imm-quote-form.is-sending .imm-quote-submit-arrow {
	opacity: 0;
}
.imm-quote-form.is-sending .imm-quote-spinner {
	opacity: 1;
}

.imm-quote-feedback {
	margin: 0;
	color: var(--q-danger);
	font-size: 13px;
	line-height: 1.5;
}
.imm-quote-feedback:empty {
	display: none;
}

/* Sent: the fields are replaced by a confirmation, so there is no
   half-filled form left sitting there inviting a second submission. */
.imm-quote-form.is-sent .imm-quote-grid,
.imm-quote-form.is-sent .imm-quote-actions,
.imm-quote-form.is-sent .imm-quote-consent {
	display: none;
}

.imm-quote-done {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 26px;
	border: 1px solid color-mix(in srgb, var(--q-success) 45%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--q-success) 12%, transparent);
	animation: imm-rise-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.imm-quote-done[hidden] {
	display: none;
}

/* A tick drawn from two borders on a rotated box. */
.imm-quote-done-mark {
	flex: 0 0 auto;
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--q-success);
}
.imm-quote-done-mark::after {
	content: '';
	position: absolute;
	top: 7px;
	left: 9px;
	width: 6px;
	height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.imm-quote-done-text {
	margin: 0;
	color: var(--q-text);
	font-size: 15px;
	line-height: 1.55;
}

/* Fields arrive with the drawer rather than all at once. */
.imm-drawer.is-open .imm-quote-field {
	animation: imm-rise-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.imm-drawer.is-open .imm-quote-field:nth-child(1) { animation-delay: 0.12s; }
.imm-drawer.is-open .imm-quote-field:nth-child(2) { animation-delay: 0.16s; }
.imm-drawer.is-open .imm-quote-field:nth-child(3) { animation-delay: 0.20s; }
.imm-drawer.is-open .imm-quote-field:nth-child(4) { animation-delay: 0.24s; }
.imm-drawer.is-open .imm-quote-field:nth-child(5) { animation-delay: 0.28s; }
.imm-drawer.is-open .imm-quote-field:nth-child(n+6) { animation-delay: 0.32s; }

@media (max-width: 600px) {
	.imm-quote-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.imm-quote-submit {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.imm-quote-field,
	.imm-quote-done {
		animation: none !important;
	}
	.imm-quote-spinner {
		animation-duration: 2s;
	}
}

/* ---- Third-party forms inside the drawer -------------------------------
   Contact Form 7, WPForms and friends ship markup built for a light page,
   which lands on the drawer's navy as invisible text in invisible boxes.
   These rules reuse the same variables as the built-in form so a
   third-party form comes out looking like it belongs here.
   ------------------------------------------------------------------------ */

.imm-drawer-content {
	--q-text: #fff;
	--q-label: rgba(255, 255, 255, 0.72);
	--q-border: rgba(255, 255, 255, 0.2);
	--q-border-strong: rgba(255, 255, 255, 0.45);
	--q-field-bg: rgba(255, 255, 255, 0.05);
	--q-placeholder: rgba(255, 255, 255, 0.4);
	--q-danger: #ff9d8f;
	--q-success: #7fe0ac;
	--q-focus: #fff;
	color: var(--q-text);
}

/* CF7 wraps the form in containers that add their own margins. */
.imm-drawer-content .wpcf7,
.imm-drawer-content .wpcf7-form {
	margin: 0;
}

/* Labels are usually plain text nodes wrapping the input, so the label
   styling has to sit on the wrapper rather than a <label> class. */
.imm-drawer-content .wpcf7-form label:focus-within {
	color: var(--q-focus);
}

.imm-drawer-content .wpcf7-form label,
.imm-drawer-content .wpcf7-form p {
	display: block;
	margin: 0 0 18px;
	color: var(--q-label);
	font-family: var(--imm-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	line-height: 1.5;
	text-transform: none;
}

.imm-drawer-content .wpcf7-form input[type="text"],
.imm-drawer-content .wpcf7-form input[type="email"],
.imm-drawer-content .wpcf7-form input[type="tel"],
.imm-drawer-content .wpcf7-form input[type="url"],
.imm-drawer-content .wpcf7-form input[type="number"],
.imm-drawer-content .wpcf7-form input[type="date"],
.imm-drawer-content .wpcf7-form select,
.imm-drawer-content .wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 8px;
	min-height: 52px;
	padding: 15px 17px;
	background: var(--q-field-bg);
	border: 1px solid var(--q-border);
	border-radius: 10px;
	color: var(--q-text);
	font-family: var(--imm-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.4;
	text-transform: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.imm-drawer-content .wpcf7-form textarea {
	min-height: 130px;
	resize: vertical;
}

/* A native select collapses to an unreadable system control on a dark
   ground, so it gets its own chevron and its options are handed back to
   the OS palette (they render outside the page). */
.imm-drawer-content .wpcf7-form select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}
.imm-drawer-content .wpcf7-form select option {
	color: initial;
	background: #fff;
}

.imm-drawer-content .wpcf7-form input::placeholder,
.imm-drawer-content .wpcf7-form textarea::placeholder {
	color: var(--q-placeholder);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.imm-drawer-content .wpcf7-form input:hover,
.imm-drawer-content .wpcf7-form select:hover,
.imm-drawer-content .wpcf7-form textarea:hover {
	border-color: var(--q-border-strong);
}

.imm-drawer-content .wpcf7-form input:focus,
.imm-drawer-content .wpcf7-form select:focus,
.imm-drawer-content .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--q-focus);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-focus) 22%, transparent);
}

/* Checkboxes and radios (CF7 acceptance, checkbox lists). */
.imm-drawer-content .wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.imm-drawer-content .wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.imm-drawer-content .wpcf7-form .wpcf7-radio .wpcf7-list-item {
	display: block;
	margin: 0;
}
.imm-drawer-content .wpcf7-form .wpcf7-list-item-label {
	color: var(--q-text);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}
.imm-drawer-content .wpcf7-form input[type="checkbox"],
.imm-drawer-content .wpcf7-form input[type="radio"] {
	width: auto;
	margin-right: 8px;
	accent-color: var(--q-focus);
}

.imm-drawer-content .wpcf7-form input[type="submit"],
.imm-drawer-content .wpcf7-form button[type="submit"] {
	width: auto;
	margin-top: 8px;
	padding: 16px 34px;
	background: var(--imm-cta-bg);
	border: none;
	border-radius: 10px;
	color: var(--imm-cta-text);
	font-family: var(--imm-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.imm-drawer-content .wpcf7-form input[type="submit"]:hover,
.imm-drawer-content .wpcf7-form button[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* CF7 always appends its result banner after the form, so it cannot be
   moved inside — but it can at least stop looking like a stray browser
   alert bolted to the bottom of the panel. */
.imm-drawer-content .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 16px 20px !important;
	border: 1px solid color-mix(in srgb, var(--q-success) 45%, transparent) !important;
	border-radius: 12px !important;
	background: color-mix(in srgb, var(--q-success) 12%, transparent);
	color: var(--q-text) !important;
	font-size: 14px;
	line-height: 1.5;
}
.imm-drawer-content .wpcf7 form.invalid .wpcf7-response-output,
.imm-drawer-content .wpcf7 form.unaccepted .wpcf7-response-output,
.imm-drawer-content .wpcf7 form.failed .wpcf7-response-output {
	border-color: color-mix(in srgb, var(--q-danger) 55%, transparent) !important;
	background: color-mix(in srgb, var(--q-danger) 12%, transparent);
}

.imm-drawer-content .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--q-danger);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}
.imm-drawer-content .wpcf7-form .wpcf7-not-valid {
	border-color: var(--q-danger);
}

.imm-drawer-content .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* Two-up layout when the form's own markup allows it. */
@media (min-width: 720px) {
	.imm-drawer-content .wpcf7-form > p:has(> br) {
		margin-bottom: 18px;
	}
}