/*
Avahi Scroll Stepper — defaults for the av-ss-* block.

Everything here is a DEFAULT. The Elementor widget's Style tab writes
higher-specificity rules that override these, so the block looks right the
moment it is dropped in and stays fully editable.

Own prefix, own file. Shares nothing with the older .av-solutions-scroll-effect
/ .av-step-* engine, so neither can affect the other.

Structure: desktop / base first, media queries at the bottom.
*/

/* -----------------------------------------------------------------------------
   Track + pin
-------------------------------------------------------------------------- */
/* =============================================================================
   How far you scroll per step

   scroll-stepper.js sizes the track as:
       pinned height + (steps x per-step distance)
   where per-step = min( viewport height x fraction, --av-ss-scroll )

   The cap tightens on bigger screens, because the viewport-height term grows
   with them and 9 steps would otherwise turn the section into an endless
   scroll. These values mirror the older .av-solutions-scroll-effect engine, so
   both sections feel the same under the mouse wheel.

   The widget's "Maximum Per Step" control writes this same property, so a
   per-device override in Elementor beats everything here.
   ========================================================================== */
.av-ss {
	--av-ss-scroll: 560px;
}

@media (min-width: 1920px) {
	.av-ss { --av-ss-scroll: 390px; }
}

@media (min-width: 2560px) {
	.av-ss { --av-ss-scroll: 345px; }
}

@media (min-width: 3840px) {
	.av-ss { --av-ss-scroll: 330px; }
}

/*
 * The root doubles as the scroll track — the script writes its height. It has
 * to be the pin's own parent: a sticky box only travels within its containing
 * block, so an extra wrapper in between would leave the pin nowhere to go.
 */
.av-ss.is-pinned {
	position: relative;

	/* `clip`, not `hidden`: hidden would make this a scroll container and
	   break the sticky child. */
	overflow: clip;

	/* Own stacking context, floored at 0, so nothing inside can rise above a
	   sticky site header. */
	z-index: 0;
	isolation: isolate;
}

.av-ss-pin {
	position: sticky;
	top: 114px;
}

/* Not pinned (narrow screen, reduced motion, editor) — plain flow. */
.av-ss.is-stacked .av-ss-pin {
	position: static;
}

/* =============================================================================
   Laptop fit — --av-ss-zoom

   scroll-stepper.js writes this property on the root when the widget's
   "Laptop Screen Fit (1080p)" switch is on AND the block would otherwise run
   past the fold. Unset, every rule below resolves to 1 and the block is
   exactly what it was, so nothing already published is affected.

   `zoom`, not `transform: scale()`, on purpose:
     - it is a LAYOUT scale, so .av-ss-pin genuinely becomes shorter and the
       track height, the centring slack and the sticky travel all follow from
       pin.offsetHeight as before. A transform leaves the box its full size and
       would reopen the empty-space bug this section had.
     - percentages and widths keep resolving against the unscaled column, so
       the grid still spans the container — only the content inside gets
       smaller, exactly like zooming the browser out on this one block.
     - it scales what Elementor's Style tab writes too (28px nav rows, 60px
       panel padding, the 647px card floor), which a variable-based approach
       could not: those rules are per-widget and load after this file.

   Applied to the pin's own children rather than the pin itself, so the sticky
   box and its inline `top` stay in real page pixels.

   Descendant offsetWidth/offsetHeight report UNSCALED px under zoom, which is
   why the script measures the pin (outside the zoom) or uses
   getBoundingClientRect() when it needs the on-screen size.
   ========================================================================== */
.av-ss-pin > .av-ss-inner,
.av-ss-pin > .av-ss-head {
	zoom: var(--av-ss-zoom, 1);
}

/*
 * Readability floor for the step description.
 *
 * The scale is even-handed, which is the point — but the description starts
 * as the smallest text in the block (18px against a 43px title and 28px nav
 * rows), so it is the first thing to fall under a comfortable reading size:
 * at 0.764 it is drawn at 13.8px. This scales that one block back UP, by the
 * ratio scroll-stepper.js works out, until it reaches the floor the widget
 * asks for — never past its own authored size.
 *
 * A second zoom rather than a font-size, because the authored size can come
 * from the widget's Typography control, whose per-widget CSS no rule here
 * could outrank. Zoom multiplies whatever that size turns out to be, so the
 * floor holds without ever touching the setting.
 *
 * Unset, this is 1 and the description is scaled with everything else.
 */
.av-ss-pin > .av-ss-inner .av-ss-desc {
	zoom: var(--av-ss-copy-unzoom, 1);
}

/* -----------------------------------------------------------------------------
   Section heading

   Lives inside .av-ss-pin on a wide screen (so it stays put with the stepper)
   and is moved out by the script on anything narrower. Margin lives on the
   heading itself rather than as a gap on the pin, so removing the heading
   leaves NO leftover space.

   IMPORTANT: scoped on .av-ss-head, never on .av-ss.
   When the heading is un-pinned the script moves it OUT of .av-ss entirely, so
   any selector using .av-ss as an ancestor silently stops matching and the
   text falls back to Elementor's global h2 style. .av-ss-head is the heading's
   own parent, so it holds in both positions — and at two classes it still
   outranks `.elementor-kit-6 h2`.
-------------------------------------------------------------------------- */
.av-ss-head {
	margin: 0 0 40px;
	max-width: 720px;
}

.av-ss-head .av-ss-headtitle {
	margin: 0 0 16px;
	color: #ffffff;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.18;
	text-transform: none;
	letter-spacing: normal;
}

.av-ss-head .av-ss-headdesc {
	color: rgba(255, 255, 255, 0.44);
	font-size: 16px;
	line-height: 1.6;
}

.av-ss-head .av-ss-headdesc p {
	margin: 0 0 10px;
}

.av-ss-head .av-ss-headdesc p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Layout
-------------------------------------------------------------------------- */
.av-ss-inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: 40px;
	/* stretch, not start: the reference has the nav column and the panel the
	   same height, which is what keeps the divider rule aligned with the card. */
	align-items: stretch;
	width: 100%;
}

/*
 * Panel height = whatever the screen has left.
 *
 * Recomputed by the browser on every resize, so it needs no JS and no fixed
 * number: 100vh less the space the pinned block starts at (header + gap) less
 * the same gap again at the bottom, which keeps the breathing room symmetrical.
 * Both come from the widget's own Header Offset and Gap Under Header, written
 * onto the root as custom properties by the renderer.
 *
 * Not while stacked — on a phone the cards scroll normally and a screen-tall
 * floor would just bring back the nine-tall-boxes problem.
 *
 * !important because the Minimum Height control emits
 *   .elementor-NN .elementor-element.elementor-element-XX
 *   .av-ss:not(.is-stacked) .av-ss-panel { min-height: 587px }
 * at (0,6,0) from a stylesheet that loads after this one, so no selector here
 * can outrank it. The control is switched off in this mode (its condition is
 * panel_height != screen), so there is no setting being overridden — only a
 * stale rule that survives in post-NN.css until Elementor regenerates. Making
 * this win outright means the mode works on upload rather than waiting on that.
 */
.av-ss--h-screen:not(.is-stacked) .av-ss-panel {
	/* Divided by the laptop-fit scale for the same reason as the nav cap
	   above — this panel is inside the scaled subtree, and a screen-tall card
	   must still come out screen-tall. Unscaled, the divisor is 1. */
	min-height: calc((100vh - var(--av-ss-offset, 121px) - var(--av-ss-screen-gap, 40px)) / var(--av-ss-zoom, 1)) !important;
}

/*
 * Opt-out: panel height = the TALLEST step's own content.
 *
 * The default is the stretch above, which makes the card exactly as tall as the
 * nav column and recomputes that at every width. This class is the alternative:
 * `align-items: start` stops the panel column being stretched, so a step with
 * two lines of copy gets a short card instead of matching the nav list. The
 * panels still share one grid cell either way, so they stay equal to each other
 * and the card never resizes while you scroll.
 */
.av-ss--h-content .av-ss-inner {
	align-items: start;
}

.av-ss--nav-right .av-ss-inner {
	grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
}

.av-ss--nav-right .av-ss-nav {
	order: 2;
}

/* -----------------------------------------------------------------------------
   Nav
-------------------------------------------------------------------------- */
/*
 * No max-height here, deliberately.
 *
 * This used to carry `max-height: calc(100vh - 200px); overflow-y: hidden`,
 * which did not prevent an over-tall column — it just cut the bottom off it.
 * The button is the last thing in this list, so what got cut was the button:
 * at a 1080px viewport the cap was 760px against 873px of content. The JS fit
 * pass shrinks the row padding until the column genuinely fits instead, and if
 * it cannot, the overflow stays visible rather than silently disappearing.
 */
.av-ss-nav {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * While pinned, the list is capped to the room it actually has and scrolls
 * INSIDE that box — glideNav() in scroll-stepper.js moves scrollTop with the
 * page so the active row stays in view.
 *
 * This is why the cap is safe now, where the old `max-height: calc(100vh -
 * 200px); overflow-y: hidden` was not: back then nothing ever scrolled the box,
 * so a list taller than the cap simply had its bottom — and the button — cut
 * off for good. With the glide, reaching the last step scrolls the button into
 * view, which is how the home page's stepper behaves.
 *
 * position: relative so the rows' offsetTop is measured from this box, which is
 * what the centring maths assumes.
 *
 * --av-ss-offset is written on the root by the renderer as Header Offset + Gap
 * Under Header, so the cap follows those settings instead of a fixed number.
 */
/*
 * The viewport term is divided by --av-ss-zoom because this box lives INSIDE
 * the scaled subtree: a length written here is multiplied by the scale before
 * it is drawn, so 100vh would render as, say, 85% of the screen and cap the
 * list well short of the room it has. Dividing first cancels that out.
 *
 * --av-ss-head-h is NOT divided: the script publishes the heading's unscaled
 * height, which the same multiplication turns into its real on-screen height.
 *
 * Unscaled the divisor is 1, so this is the rule it has always been.
 */
.av-ss.is-pinned .av-ss-nav {
	position: relative;
	max-height: calc((100vh - var(--av-ss-offset, 121px) - 24px) / var(--av-ss-zoom, 1) - var(--av-ss-head-h, 0px));
	overflow: hidden;
}

.av-ss-nav::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/*
 * Two classes deep (0,2,0) so it outranks `.elementor-kit-6 button` (0,1,1) —
 * Elementor's global button style, which applies to every bare <button> on the
 * site and was forcing border-width:2px and its own padding onto these rows.
 * Same trap as the video modal's close button.
 */
.av-ss .av-ss-navitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 24px 0;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 0;
	background: none;
	color: rgba(255, 255, 255, 0.44);
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease;

	/*
	 * A row wraps rather than being cut off.
	 *
	 * These are <button>s, and buttons inherit `white-space: nowrap` from the
	 * site's base styles, so a label wider than its column did not wrap — it
	 * ran past the button and was clipped by the nav's own overflow:hidden.
	 * Invisible at desktop widths, where the column is 512px and every label
	 * fits, but plain on a two-column tablet: at 291px "Application
	 * Modernization" read as "Application Moderniza".
	 *
	 * Normal wrapping costs nothing where the labels already fit.
	 */
	white-space: normal;
}

/*
 * The label is a flex item beside the arrow, and a flex item's automatic
 * minimum size is its min-content width — without this it refuses to shrink
 * and pushes the arrow out of the row instead of wrapping.
 */
.av-ss .av-ss-navtext {
	min-width: 0;
	overflow-wrap: break-word;
}

/*
 * Hover / focus stated explicitly at (0,3,0).
 *
 * Elementor's kit styles every bare <button> on hover AND on focus with
 * background-color: var(--e-global-color-primary), which on this site is
 * #FFFFFF, plus color: var(--e-global-color-secondary), #000000.
 *
 * At (0,2,1) that beat the base rule above, so a nav row turned into a solid
 * white block on hover — and STAYED white after a click, because the button
 * keeps focus. Three classes deep outranks it without needing !important,
 * which keeps the Style tab's colour controls working.
 */
.av-ss .av-ss-navitem:hover,
.av-ss .av-ss-navitem:focus,
.av-ss .av-ss-navitem:active {
	background: none;
	background-color: transparent;
}

/* :focus needs the colour too, not just the background. The kit pairs its
   white background with color:#000000, so fixing only the background left a
   focused row as black text on a black panel — invisible. */
.av-ss .av-ss-navitem:hover,
.av-ss .av-ss-navitem:focus {
	color: #cdd6e6;
}

.av-ss .av-ss-navitem.is-active,
.av-ss .av-ss-navitem.is-active:hover,
.av-ss .av-ss-navitem.is-active:focus {
	color: #ffffff;
	font-weight: 500;
	background: none;
	background-color: transparent;
}

/* A mouse click should not leave a focus ring behind; keyboard focus still
   gets one from the :focus-visible rule further down. */
.av-ss .av-ss-navitem:focus:not(:focus-visible) {
	outline: none;
}

/* Optional button under the nav list. Not a <button>, so Elementor's global
   button style does not reach it. */
.av-ss .av-ss-navitem:last-of-type {
	border-bottom-color: transparent !important;
}

.av-ss .av-ss-navcta {
	display: inline-flex;
	/* Padding must sit inside the width, otherwise the full-width mobile
	   variant below overflows its column by the 60px of horizontal padding. */
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 10px;
	align-self: start;
	margin-top: 32px;
	padding: 16px 30px;
	border-radius: 999px;
	background: linear-gradient(90deg, #366ADF 0%, #46BAE3 100%);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: filter .2s ease, transform .2s ease;
}

.av-ss .av-ss-navcta:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #ffffff;
}

.av-ss-navarrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s ease, transform .25s ease;
}

.av-ss-navitem.is-active .av-ss-navarrow {
	opacity: 1;
	transform: none;
}

/* -----------------------------------------------------------------------------
   Panels — stacked in one grid cell so the column is as tall as the tallest
-------------------------------------------------------------------------- */
.av-ss-panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	min-width: 0;
}

.av-ss-panel {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 60px 40px;
	border-radius: 20px;
	background-color: #0b0f1d;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .3, 1), visibility .35s;
}

/* Opacity goes through a custom property so the widget's Opacity control can
   set it once on the root and have it reach every state — the stacked rule
   below matches at the same specificity, and a plain declaration from the
   control would win or lose depending on source order. */
.av-ss-panel.is-active {
	opacity: var(--av-ss-panel-opacity, 1);
	visibility: visible;
	transform: none;
	z-index: 2;
}

/* -----------------------------------------------------------------------------
   Media
-------------------------------------------------------------------------- */
.av-ss-media {
	position: relative;
	order: 2;            /* stacked UNDER the copy, as in the design */
	border-radius: 16px;
	overflow: hidden;
	line-height: 0;
}

.av-ss-img,
.av-ss-video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/*
 * Video shape.
 *
 * Defaults to `auto` — the file's own proportions — because forcing a ratio
 * makes object-fit:cover crop the artwork, and these clips are not all 16:9
 * (the ones on this site are square). Pick a fixed ratio in the widget when
 * every card must be identical height; the crop is then intentional.
 *
 * With `auto` the box has no definite height, so height:100% on the child
 * resolves to auto and the video sizes itself. With a ratio set, the box has a
 * definite height and the video fills it.
 */
.av-ss-media--video {
	aspect-ratio: var(--av-ss-video-ratio, auto);
	background-color: #05071c;
}

.av-ss-media--video .av-ss-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* media_position = background: fills the panel, copy sits on top. */
.av-ss--media-bg .av-ss-media {
	position: absolute;
	inset: 0;
	order: 0;
	border-radius: inherit;
}

.av-ss--media-bg .av-ss-img,
.av-ss--media-bg .av-ss-video {
	width: 100%;
	height: 100%;
}

/* A scrim so the copy stays readable over any artwork. */
.av-ss--media-bg .av-ss-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 7, 28, .35) 0%, rgba(5, 7, 28, .82) 100%);
}

.av-ss--media-bg .av-ss-content {
	position: relative;
	z-index: 1;
}

/* -----------------------------------------------------------------------------
   Copy
-------------------------------------------------------------------------- */
.av-ss-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	order: 1;
	min-width: 0;
}

/* `gap` on a flex parent only applies BETWEEN children, so an absent eyebrow
   or media leaves no phantom row. These reset the last-child margins that
   would otherwise show up as extra space at the bottom of a panel. */
.av-ss .av-ss-content > :last-child {
	margin-bottom: 0;
}

.av-ss-panel > :last-child {
	margin-bottom: 0;
}

/* No media on a step? Then the panel must not reserve room for it. */
.av-ss-panel .av-ss-media:empty {
	display: none;
}

.av-ss .av-ss-eyebrow {
	align-self: start;
	color: #46bae3;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/*
 * `.av-ss` prefix (0,2,0) so this beats `.elementor-kit-6 h3` (0,1,1), which
 * otherwise forces 35px / weight 700 / capitalize onto every step title
 * whatever this file says.
 */
.av-ss .av-ss-title {
	margin: 0;
	color: #ffffff;
	text-transform: none;
	letter-spacing: normal;
	font-size: 43px;
	font-weight: 600;
	line-height: 1.23;
}

.av-ss .av-ss-desc {
	color: rgba(255, 255, 255, 0.44);
	font-size: 18px;
	line-height: 1.6;
}

.av-ss-desc p {
	margin: 0 0 10px;
}

.av-ss-desc p:last-child {
	margin-bottom: 0;
}

.av-ss .av-ss-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: start;
	margin-top: 4px;
	color: #488fdc;
	font-size: 16px;
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Whole-panel link
-------------------------------------------------------------------------- */
.av-ss-cover {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

.av-ss .av-ss-panel:hover .av-ss-cta {
	color: #6cb2ec;
}

.av-ss-cover:focus-visible {
	outline: 2px solid #6cb2ec;
	outline-offset: -3px;
}

.av-ss-navitem:focus-visible {
	outline: 2px solid #6cb2ec;
	outline-offset: 2px;
}

.av-ss-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   Responsive / non-pinned
   ========================================================================== */

/* Not pinned: every panel is shown in full, one after another, and the nav
   becomes a plain index. This is what phones, reduced-motion users and the
   Elementor editor get. */
/*
 * Collapsing to one column is STRUCTURAL, so it is forced.
 *
 * The Nav Width control writes
 *     .elementor-element-xxx .av-ss--nav-left .av-ss-inner{grid-template-columns:40% ...}
 * at (0,3,0), unscoped by any media query. The old rule here matched at the
 * same specificity and Elementor's stylesheet loads later, so it won — the
 * block kept two columns down to 320px and the card ended up ~140px wide with
 * one word per line. Repeating the class plus !important settles it.
 *
 * `gap` is deliberately NOT forced: it is a responsive control, so a per-device
 * value set in Elementor must still win.
 */
.av-ss.av-ss.is-stacked .av-ss-inner,
.av-ss.av-ss.is-stacked.av-ss--nav-left .av-ss-inner,
.av-ss.av-ss.is-stacked.av-ss--nav-right .av-ss-inner {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 28px;
}

.av-ss.is-stacked .av-ss-panels {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.av-ss.is-stacked .av-ss-panel {
	opacity: var(--av-ss-panel-opacity, 1);
	visibility: visible;
	transform: none;
}

/*
 * Card shape while stacked.
 *
 * --av-ss-m-ratio is written by scroll-stepper.js from the widget's Mobile
 * Card Shape setting — either the ratio chosen there, or the artwork's own,
 * read off the image or video file. Unset, this is `auto` and the card is as
 * tall as its copy, exactly as before.
 *
 * min-height stays at its default of auto, so the ratio is a floor and not a
 * cap: a step with more copy than the shape allows grows past it rather than
 * having the text cut off.
 */
.av-ss.is-stacked .av-ss-panel {
	aspect-ratio: var(--av-ss-m-ratio, auto);
}

/* -----------------------------------------------------------------------------
   Copy over artwork, stacked

   On a desktop the card is tall enough that the copy sits in the empty upper
   half of the artwork. Stacked it is a fraction of that height, so the text
   lands straight on the busiest part of the picture, and white-on-white is
   what you get. Two ways to fix it, both driven by --av-ss-m-scrim, which the
   widget's "Scrim Behind Mobile Copy" writes:

     Whole card (default) — the card's existing scrim layer is faded up while
       stacked. One even wash over the artwork, which is what the design does
       elsewhere, and nothing that reads as a box.

     Behind the copy — a gradient behind the text only, fading out below it.
       Keeps more of the artwork bright, at the cost of a visible edge where
       it ends.

   Separate from the widget's own Scrim Opacity, which covers the card on
   EVERY screen and is often turned down to 0 on purpose, as it is here.
-------------------------------------------------------------------------- */

/*
 * Whole card. The widget's mobile-scrim control also writes this same
 * opacity at per-widget specificity, which is what beats a desktop Scrim
 * Opacity of 0; this rule is the default for a stepper rendered without
 * Elementor, and the fallback before that CSS is regenerated.
 */
.av-ss--m-scrim-card.is-stacked .av-ss-media::after {
	opacity: var(--av-ss-m-scrim, 0.78);
}

.av-ss--m-scrim-copy.av-ss--media-bg.is-stacked .av-ss-content::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	/* Past the copy itself, so it fades out rather than ending on a line. */
	bottom: -40px;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(5, 7, 28, var(--av-ss-m-scrim, 0.78)) 0%,
		rgba(5, 7, 28, var(--av-ss-m-scrim, 0.78)) 55%,
		rgba(5, 7, 28, 0) 100%
	);
	pointer-events: none;
}

/*
 * The copy scrim is positioned against the copy block and sits behind it, so
 * the block needs to be a positioned, layered box of its own. Without the
 * z-index the ::before would paint over the text it is there to support.
 */
.av-ss--m-scrim-copy.av-ss--media-bg.is-stacked .av-ss-content {
	position: relative;
	z-index: 1;
	isolation: isolate;
}


/*
 * Mobile / tablet layout = "cards".
 *
 * Once pinning stops there is no active step to highlight, so the nav list is
 * just the panel titles written out a second time. Hiding the rows leaves a
 * clean card list. The nav element itself stays — the optional button lives
 * inside it — and is re-ordered below the cards.
 */
.av-ss--m-cards.is-stacked .av-ss-navitem {
	display: none;
}

.av-ss--m-cards.is-stacked .av-ss-nav {
	order: 2;
	gap: 0;
}

/* Nothing but the button left in there, so drop the list's own spacing. */
.av-ss--m-cards.is-stacked .av-ss-navcta {
	margin-top: 0;
}

/* -----------------------------------------------------------------------------
   Phone / tablet dropdown  (Tablet / Phone Layout = "Dropdown")

   The nav list becomes one <select>: pick a step and that step's card — only
   that one — is shown underneath, the way the desktop block shows one panel
   at a time. Everything here is scoped to .is-stacked, so the desktop layout
   never sees it.
-------------------------------------------------------------------------- */

/* Rendered on every screen, shown only once stacked. */
.av-ss-selectwrap {
	display: none;
}

.av-ss--m-select.is-stacked .av-ss-selectwrap {
	display: block;
	position: relative;
	order: 0;
}

/*
 * display: contents so the dropdown, the cards and the button become siblings
 * in the one-column grid and can be ordered independently. Without it the
 * button is trapped inside the nav with the dropdown, directly above the card
 * it is supposed to follow.
 */
.av-ss--m-select.is-stacked .av-ss-nav {
	display: contents;
}

.av-ss--m-select.is-stacked .av-ss-navitem {
	display: none;
}

.av-ss--m-select.is-stacked .av-ss-panels {
	order: 1;
	/* One card at a time — overrides the stacked flex column above, which
	   shows every panel one under the other. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.av-ss--m-select.is-stacked .av-ss-panel {
	display: none;
}

.av-ss--m-select.is-stacked .av-ss-panel.is-active {
	display: flex;
}

.av-ss--m-select.is-stacked .av-ss-navcta {
	order: 2;
	margin-top: 0;
}

/*
 * The control itself.
 *
 * appearance:none for the box, with the chevron drawn beside it, because the
 * native arrow cannot be recoloured for a dark panel. The OPTIONS are left
 * alone — they are drawn by the platform, and a colour set here would be
 * ignored on iOS and applied on Android, which is how you end up with white
 * text on white.
 */
.av-ss .av-ss-select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 15px 46px 15px 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	background-color: #0b0f1d;
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.av-ss .av-ss-select:focus-visible {
	outline: 2px solid #6cb2ec;
	outline-offset: 2px;
}

.av-ss-selectchev {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.66);
	pointer-events: none;   /* the click belongs to the select underneath */
}

@media (max-width: 1024px) {
	/*
	 * Scoped to .is-stacked, NOT to the width alone.
	 *
	 * These used to collapse the grid at any width up to 1024px whatever the
	 * widget said, which quietly overrode Stack Below: set it to 600 to give
	 * an iPad the two-column desktop layout and the script obliged — it
	 * un-stacked and pinned — while this rule went on forcing a single
	 * column. The result was the worst of both, a pinned one-column block.
	 *
	 * .is-stacked is the script's own answer to that same question, so the
	 * CSS and the JS can no longer disagree. Still forced, for the reason the
	 * stacked rule above gives: the Nav Width control writes its columns
	 * unscoped by any media query, from a stylesheet that loads later.
	 */
	.av-ss.av-ss.is-stacked .av-ss-inner,
	.av-ss.av-ss.is-stacked.av-ss--nav-left .av-ss-inner,
	.av-ss.av-ss.is-stacked.av-ss--nav-right .av-ss-inner {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px;
	}

	.av-ss.is-stacked.av-ss--nav-right .av-ss-nav {
		order: 0;
	}

	.av-ss-panel {
		padding: 28px;
	}

	.av-ss .av-ss-title {
		font-size: 26px;
	}

	/*
	 * Two columns on a tablet — the nav has to be able to give ground.
	 *
	 * At 768px the grid is roughly a 300px nav against a 440px card, and the
	 * nav rows carry an arrow and 16px of gap they do not have room for. This
	 * only applies when the block is NOT stacked, which on a tablet means the
	 * setting was deliberately lowered to ask for this layout.
	 *
	 * Defaults, as everywhere in this file: a size set in the widget's Style
	 * tab is written as per-widget CSS and wins over these. That is the right
	 * way round — but it does mean a block with a large nav size set for
	 * desktop keeps it on a tablet, and leans on the laptop-fit scale to make
	 * it fit. Set the size per device in Elementor if that is not wanted.
	 */
	.av-ss:not(.is-stacked) .av-ss-navitem {
		gap: 8px;
		font-size: 17px;
	}

	.av-ss:not(.is-stacked) .av-ss-inner {
		gap: 20px;
	}

	.av-ss:not(.is-stacked) .av-ss-panel {
		padding: 24px;
	}
}

@media (max-width: 767px) {
	.av-ss-panel {
		padding: 22px;
		border-radius: 18px;
	}

	/* Copy must have the full column on a phone; there is no artwork beside it
	   to leave room for. Beats a percentage width set for desktop. */
	.av-ss.av-ss .av-ss-content {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Stop long words in a narrow card forcing a horizontal scroll. */
	.av-ss .av-ss-title,
	.av-ss .av-ss-desc,
	.av-ss-head .av-ss-headtitle,
	.av-ss-head .av-ss-headdesc {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: auto;
	}

	/* Full-width button reads better than a pill squeezed against the edge. */
	.av-ss .av-ss-navcta {
		width: 100%;
		justify-content: center;
	}

	.av-ss-navitem {
		padding: 16px 2px;
		font-size: 16px;
	}

	.av-ss .av-ss-title {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.av-ss-panel,
	.av-ss-navarrow,
	.av-ss-navitem {
		transition: none;
	}
}