/**
 * Homepage hero slider.
 *
 * Sizing/spacing values below are copied from the hero's own generated
 * Elementor CSS (uploads/elementor/css/post-7.css) so the one remaining extra
 * slide (banner4) matches slide 1's buttons.
 *
 *   primary  #1A7686, 16px/600, radius 8px, padding 16px 34px
 *   ghost    transparent, 2px navy (#031551) -- see note below
 *
 * All showing and hiding is keyed off `[data-active]` on #hero, which the JS
 * sets. Inactive layers use `visibility:hidden`, not just opacity — that keeps
 * their links out of the tab order and away from screen readers without having
 * to juggle aria-hidden on elements that might hold focus.
 *
 * NO DARK OVERLAY ON `.amc-hs__bg` ANY MORE (2026-08-27). The gradient here
 * used to exist so white headline text stayed readable over a photograph on
 * the old Arabic slides. The one extra slide now is `banner4` -- a
 * pre-designed graphic that is mostly light/white and carries no overlaid
 * text of its own (see inc/hero-slider.php) -- so a dark 86%-opacity wash on
 * top of it just muddied the banner, which is what made it read as "not
 * clearly visible". `.amc-hs__btn--ghost` is navy rather than white for the
 * same reason: white-on-transparent disappears on this light background.
 *
 * FIXED HEIGHT REPLACED WITH `aspect-ratio` (2026-08-27) -- both banners were
 * being cropped, worse the wider the visitor's screen. The hero's height came
 * from Elementor's own `min-height:88vh` (78vh on phones), a value tuned for
 * a full-bleed PHOTOGRAPH, where losing a sliver off an edge is harmless. On
 * a wide-but-short browser window that box's aspect ratio (viewport width /
 * 0.88*height) can run well past 2.5:1, while Banner1 is 1600x853 (~1.87:1)
 * and banner4 is 1920x880 (~2.18:1) -- `background-size:cover` cropped the
 * overflow off top/bottom (Banner1, since the box was relatively WIDER than
 * the image) and left/right (banner4, box relatively NARROWER), and the crop
 * grew with the window's own aspect ratio since the old height never adapted
 * to it.
 *
 * `aspect-ratio: 2/1` makes the box's own shape close to both banners at
 * once -- Banner1 loses ~3% off the top and bottom, banner4 ~4.5% off each
 * side, bounded and independent of the window's own shape, instead of
 * scaling arbitrarily with the window's own aspect ratio. No `max-height`
 * cap: a first attempt added one (90vh) to protect ultrawide monitors, but
 * on an ordinary WIDE-BUT-SHORT window (a full-width browser on a 1920x1080
 * screen easily nets an ~866px-tall viewport) the cap won over the
 * aspect-ratio and produced a WORSE, uncontrolled crop than not capping it
 * at all -- exactly the case this fix exists for. Going tall on a genuinely
 * ultrawide monitor (needing a short scroll to see the very bottom of the
 * hero) is the smaller problem. A single ratio rather than swapping it per
 * active slide is deliberate too: the two banners crossfade in place, and
 * changing the box's own height on every slide change would resize the
 * whole hero (and the page below it) on every autoplay tick.
 */

.amc-hs {
	position: relative;
	overflow: hidden;
	min-height: 0 !important;

	/* THE HERO SURFACE, 2026-09-11. Was #FFFFFF; AmalCure asked for a brand
	 * colour instead. This paints two things: the strip UNDER the banner that
	 * holds the buttons and the dots, and the small letterbox gap left when a
	 * banner is shorter than the reserved band (the four 3:1 ones).
	 *
	 * #DCEDF4 is picked off the banners themselves -- their own bottom wave
	 * runs #b7e7f6 to #c2e8f8, so a tint just lighter than that reads as the
	 * wave flowing into the strip instead of as a seam against white. It also
	 * steps gently into #appointment`s #F1F7FA directly below.
	 *
	 * DO NOT go dark here. The strip carries the teal primary button and a
	 * white-filled ghost button; a saturated teal would swallow the first and
	 * strand the second, and the banners` own light ground would seam hard
	 * against it. Kept light enough that the navy ghost label still clears
	 * 14:1 and the teal dots at 0.32 alpha are still visible.
	 *
	 * One property, inherited by `.amc-hs__bg` and used by the mobile block
	 * too, so the colour lives in exactly one place. */
	--amc-hs-surface: #DCEDF4;

	/* BANNER SET REPLACED 2026-09-11 -- Banner1 and banner4 are gone; the hero
	 * now rotates six banners AmalCure supplied (attachments 859-864). They are
	 * 3:1 (2172x724), except banner2 at 2.767:1 and banner5 at 2.811:1, so no
	 * single aspect-ratio + `cover` box can hold all six without cropping the
	 * headline off one of them. Each banner is a FINISHED design that carries
	 * its own headline, sub-line and icon captions, and there is no region that
	 * is empty in all six -- banner2 and banner5 have artwork across the whole
	 * bottom, and the cancer banner even has its own (non-clickable) button
	 * there. So the desktop overlay is gone: the whole banner is shown with
	 * `contain`, and the buttons sit in a reserved strip BELOW it, which is what
	 * mobile has done since 2026-09-07. Nothing is cropped at any width and
	 * nothing can collide with the artwork, on these six or on a future one.
	 *
	 * 36.15% is 1/2.767 -- the TALLEST banner as a fraction of its own width.
	 * Percentage padding resolves against the containing block WIDTH on every
	 * side, so this is a width-proportional band and stays correct at every
	 * viewport (the lesson in the mobile block below). Reserving for the
	 * tallest means the four 3:1 banners leave 2.8% of width of extra gap
	 * above the buttons rather than ever overlapping them.
	 *
	 * `!important` on the background properties and padding-top beats
	 * Elementor`s own `.elementor-7 .elementor-element.elementor-element-58a51ee`
	 * rule (0-3-0, sets cover/center and --padding-top:90px), which outranks a
	 * lone `.amc-hs` (0-1-0). Same trap the mobile block already documents. */
	aspect-ratio: auto;
	padding-top: calc(36.15% + 14px) !important;
	padding-bottom: 34px;
	background-size: contain !important;
	background-position: top center !important;
	background-repeat: no-repeat !important;
	background-color: var( --amc-hs-surface );
}

/* Slide 1's buttons, positioned in the gap Banner1's own design leaves
 * between its icon row and its bottom stats strip. `flex_justify_content`
 * (set to flex-end on container 58a51ee, see inc/hero-banner1-slide1.php)
 * moves the button row to the bottom of `.e-con-inner`; this sets how far
 * from the bottom edge. It is a PERCENTAGE, not a fixed px value, and
 * percentage padding is always relative to the containing block's WIDTH
 * (per the CSS box model, on every side including top/bottom) -- which is
 * exactly what is needed here, because `.amc-hs`'s height is itself
 * `width / 2` (the aspect-ratio above). X% of width therefore comes out to
 * a constant 2*X% of the hero's own height at any viewport size, so the
 * buttons land in the same relative spot on the banner on every screen
 * instead of drifting when the fixed-px value used to size the height
 * (the old 88vh) is gone. `!important` beats Elementor's own generated
 * (px-based) padding-bottom rule regardless of stylesheet load order.
 *
 * 8% (=16% of height) measured directly off Banner1 at native proportions:
 * the icon-row caption text ("Every Step of the Way") ends at ~74% down and
 * the bottom stats strip starts at ~83-84% down (after the ~2x3.3% top+bottom
 * crop from fitting 1.87:1 Banner1 into this box's 2:1 shape is folded in) --
 * a narrow ~10% window either way. 10% put the buttons' TOP edge right on
 * top of that caption text on some screens (reported: overlap); 8% centres
 * the button row inside the window with a roughly even margin on both
 * sides. There is not much slack here -- if this needs nudging again, move
 * in small (1-2 point) steps. */
.amc-hs > .e-con-inner {
	padding-top: 12px !important;
	padding-bottom: 18px !important;
}

/* -------------------------------------------------------------------------
 * Background layers for slides 2+
 *
 * Above the container's own background, so the outgoing slide is fully
 * covered. No overlay colour/gradient here on purpose -- see the file header.
 * The photograph itself is set by JS from `data-amc-bg`, appended after this
 * layer's own (now empty) background-image so it composites cleanly.
 * ---------------------------------------------------------------------- */

.amc-hs__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: var( --amc-hs-surface );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.9s ease, visibility 0.9s ease;
}

.amc-hs[ data-active="2" ] .amc-hs__bg[ data-slide="2" ],
.amc-hs[ data-active="3" ] .amc-hs__bg[ data-slide="3" ],
.amc-hs[ data-active="4" ] .amc-hs__bg[ data-slide="4" ],
.amc-hs[ data-active="5" ] .amc-hs__bg[ data-slide="5" ],
.amc-hs[ data-active="6" ] .amc-hs__bg[ data-slide="6" ] {
	opacity: 1;
	visibility: visible;
}

/* -------------------------------------------------------------------------
 * Slide 1 — Elementor's own content. Only ever faded, never restyled.
 * ---------------------------------------------------------------------- */

.amc-hs > .e-con-inner {
	position: relative;
	z-index: 2;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.amc-hs[ data-active="2" ] > .e-con-inner,
.amc-hs[ data-active="3" ] > .e-con-inner,
.amc-hs[ data-active="4" ] > .e-con-inner,
.amc-hs[ data-active="5" ] > .e-con-inner,
.amc-hs[ data-active="6" ] > .e-con-inner {
	opacity: 0;
	visibility: hidden;
}

/* -------------------------------------------------------------------------
 * Content panels for slides 2+
 *
 * Absolutely positioned, so they overlap for the crossfade and the hero does
 * not jump as the slides change. The cost is that they contribute nothing to
 * the hero's height, so anything taller than slide 1 gets clipped by the
 * `overflow:hidden` above — which is exactly what happened: slides 2 and 3 lost
 * 111px and 143px on a short viewport. `fitHero()` in hero-slider.js measures
 * each panel and raises the hero's min-height to the tallest, so the copy here
 * is free to be longer than slide 1's.
 *
 * That fix is JS. Keeping the copy near slide 1's length is still the right
 * instinct — it keeps the hero from growing tall on phones — which is why the
 * Arabic supporting line is dropped there (see the 767px block).
 * ---------------------------------------------------------------------- */

/* Buttons for banner4 (the only slide this panel renders content for now --
 * see inc/hero-slider.php, which sends no eyebrow/title/text for it) sit at
 * the BOTTOM of the panel, not centred. Measured directly off banner4: its
 * own content (eyebrow through the icon-row captions) ends at ~77% down,
 * leaving a genuinely empty ~23% band below it before the image's bottom
 * edge -- centring the actions div put it squarely on top of the paragraph
 * ("Cardiac, orthopaedic, cancer and neuro care...") instead. `padding-bottom`
 * is a percentage for the same reason as the `.e-con-inner` rule above: this
 * panel's height is `width / 2` (the aspect-ratio on `.amc-hs`), so a
 * percentage (relative to width, per the CSS box model) comes out to a
 * fixed fraction of the panel's own height at any viewport size. 3% width =
 * 6% height puts the button row's bottom edge at ~94% down -- inside the
 * empty band, clear of both the captions above and the image's edge below.
 *
 * Horizontally, `align-items:flex-start` + `padding-left:44%` moves the
 * buttons off centre (where they straddled banner4's diagonal teal/white
 * seam) to sit under the right-hand text column instead -- 44% is where
 * that column's own headline and icons start (measured off banner4 at
 * native proportions), so the buttons now read as belonging to that block
 * rather than floating across the whole banner. Percentage, not px, for the
 * same viewport-independence reason as everywhere else in this file. Reset
 * to centred on phones (below) -- at that width there is no room to spare
 * on either side of a button row that is already close to full-width. */
.amc-hs__panel {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
	padding: 0 20px 18px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.amc-hs[ data-active="2" ] .amc-hs__panel[ data-slide="2" ],
.amc-hs[ data-active="3" ] .amc-hs__panel[ data-slide="3" ],
.amc-hs[ data-active="4" ] .amc-hs__panel[ data-slide="4" ],
.amc-hs[ data-active="5" ] .amc-hs__panel[ data-slide="5" ],
.amc-hs[ data-active="6" ] .amc-hs__panel[ data-slide="6" ] {
	opacity: 1;
	visibility: visible;
}

/* The dots now have a 34px strip of their own at the bottom of the hero (the
 * `padding-bottom` on `.amc-hs` above). `.amc-hs__panel` is `inset: 0`, and
 * `inset` resolves against the positioned ancestor`s PADDING box, which
 * INCLUDES that strip -- so without this the bottom-aligned button row would
 * sit on the dots. Exactly the collision the mobile block records for 32px;
 * it is now handled at every width, not just on phones. */
.amc-hs.is-ready .amc-hs__panel {
	bottom: 34px;
}

.amc-hs__panel > * {
	margin: 0;
}

.amc-hs__eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #5AD1E3;
}

.amc-hs__title {
	max-width: 20ch;
	font-size: 58px;
	font-weight: 700;
	line-height: 1.15;
	color: #FFFFFF;
}

.amc-hs__text {
	max-width: 720px;
	font-size: 18px;
	line-height: 1.7;
	color: #DCE9F2;
}

/* Arabic.
 *
 * A system-font stack on purpose — no webfont request. Every platform AmalCure
 * is targeting ships a usable Arabic face (Segoe UI / Tahoma on Windows, Geeza
 * Pro on iOS and macOS, Noto Naskh on Android), and a hero that waits on a
 * font download is worse than one set in the system face. If the brand ever
 * wants a specific Arabic type, that is the point to add a webfont — and to
 * pair it with font-display:swap.
 *
 * The copy itself has NOT been reviewed by a native speaker. See the note at
 * the top of inc/hero-slider.php.
 */
.amc-hs__ar,
.amc-hs__text--ar {
	font-family: "Noto Kufi Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif;
}

.amc-hs__ar {
	max-width: 24ch;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.6;
	color: #5AD1E3;
}

.amc-hs__text--ar {
	max-width: 640px;
	font-size: 17px;
	line-height: 1.9;
	color: #BFD6E6;
}

/* -------------------------------------------------------------------------
 * Buttons — matched to the hero's two Elementor buttons.
 *
 * The ghost variant trades 2px of padding for its 2px border so both buttons
 * come out exactly the same height. Without that the outlined one sits 4px
 * taller than the filled one.
 * ---------------------------------------------------------------------- */

.amc-hs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.amc-hs__btn {
	display: inline-block;
	padding: 16px 34px;
	border: 0;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.amc-hs__btn--primary {
	background-color: #1A7686;
	color: #FFFFFF;
}

.amc-hs__btn--primary:hover,
.amc-hs__btn--primary:focus {
	background-color: #0E5866;
	color: #FFFFFF;
}

/* Navy, not white-on-transparent: banner4 is a light graphic, and a white
 * outline/white text combination is nearly invisible on it. Matches the
 * "View Treatments" button on slide 1 (see inc/hero-banner1-slide1.php). */
.amc-hs__btn--ghost {
	padding: 14px 32px;
	border: 2px solid rgba( 30, 41, 59, 0.65 );
	background-color: transparent;
	color: #031551;
}

.amc-hs__btn--ghost:hover,
.amc-hs__btn--ghost:focus {
	border-color: #031551;
	background-color: rgba( 30, 41, 59, 0.08 );
	color: #031551;
}

/* -------------------------------------------------------------------------
 * Navigation
 *
 * Hidden until the JS adds `is-ready`, so the page never shows a row of dots
 * and two arrows that do nothing because the script failed to load. Without
 * JS the hero is simply the original single hero, which is the right fallback.
 * ---------------------------------------------------------------------- */

.amc-hs__nav,
.amc-hs__arrow {
	display: none;
}

.amc-hs.is-ready .amc-hs__nav {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 10px;
	left: 0;
	display: flex;
	gap: 10px;
	justify-content: center;
}

.amc-hs__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Teal tint, NOT translucent white (2026-09-11). The dots used to sit ON
	 * the banner, where white-on-photograph read fine. They now sit in the white
	 * strip under it at every width, and rgba(255,255,255,0.4) on white is
	 * invisible -- only the active dot showed, so the control read as a single
	 * stray pill. Brand teal at 0.32 is the same weight against white that the
	 * white was against the old photograph. */
	background: rgba( 26, 118, 134, 0.32 );
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
}

.amc-hs__dot:hover {
	background: rgba( 26, 118, 134, 0.6 );
}

.amc-hs__dot[ aria-current="true" ] {
	width: 30px;
	border-radius: 6px;
	background: #1A7686;
}

.amc-hs.is-ready .amc-hs__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	transform: translateY( -50% );
	border: 1px solid rgba( 255, 255, 255, 0.65 );
	border-radius: 50%;
	/* Darker than it was, for the same reason as the dots: all six banners are
	 * light designs on a near-white ground, and a 0.35 scrim left a pale circle
	 * with a white chevron inside it -- the chevron washed out against its own
	 * button. Brand navy at 0.55 keeps the white chevron legible on every one. */
	background: rgba( 3, 21, 81, 0.55 );
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.amc-hs__arrow:hover {
	border-color: rgba( 255, 255, 255, 0.8 );
	background: rgba( 3, 21, 81, 0.8 );
}

.amc-hs__arrow svg {
	width: 20px;
	height: 20px;
}

.amc-hs__arrow--prev {
	left: 18px;
}

.amc-hs__arrow--next {
	right: 18px;
}

/* Visible keyboard focus on the controls — they sit on a photograph, so the
 * default UA ring is not reliably visible. */
.amc-hs__dot:focus-visible,
.amc-hs__arrow:focus-visible,
.amc-hs__btn:focus-visible {
	outline: 3px solid #5AD1E3;
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Breakpoints — Elementor's own (1024px tablet, 767px mobile)
 * ---------------------------------------------------------------------- */

@media ( max-width: 1024px ) {

	.amc-hs__title {
		font-size: 42px;
	}

	.amc-hs__ar {
		font-size: 22px;
	}
}

@media ( max-width: 767px ) {

	/* MOBILE DOES NOT TRY TO OVERLAY BUTTONS ON THE BANNER AT ALL.
	 *
	 * The `cover` + percentage-padding approach above works because each
	 * banner leaves a real gap in its own design (Banner1: between its icon
	 * row and its bottom strip; banner4: below its icon captions) that is
	 * big enough, in absolute pixels, to hold a button once the hero is a
	 * few hundred pixels tall. On a phone, two problems compound: the two
	 * buttons do not fit on one line at desktop size (they wrap, ~2.2x
	 * taller), and Banner1's own gap is only ~9% of the hero's height --
	 * at any hero height small enough to avoid heavy side-crop, that 9% is
	 * fewer pixels than even a single-row button needs. There is no ratio
	 * that satisfies both "not much crop" and "buttons fit in the gap" at
	 * once here -- shrinking the buttons to fit (tried first) still left
	 * them overlapping the tail of the icon row by a few percent.
	 *
	 * So mobile stops cropping altogether instead: `background-size:contain`
	 * (not `cover`) shows the WHOLE banner, and `background-position:top`
	 * plus a background-colour fallback puts it flush against the top of a
	 * slightly taller box, leaving a plain, image-free strip underneath
	 * where the buttons sit -- no banner content anywhere near them, so
	 * there is nothing left to overlap. `aspect-ratio:1.35/1` is sized to
	 * leave roughly that strip (at 375px wide: a 200px-tall image in a
	 * 278px box, an ~78px band) under both banners; contain fits by WIDTH
	 * in both cases since each banner is proportionally wider than 1.35:1,
	 * so there is no side-crop either. White matches the light edge both
	 * banners are photographed/designed against, so the seam is not visible. */
	.amc-hs {
		/* aspect-ratio: 1.35/1 was here until 2026-09-07. It left a 78px band at
		   375px (200px image in a 278px box) -- correct when written, then the
		   dots fix below added padding-bottom:32px on 2026-09-04 and cut the
		   usable band to 46px while the button block needs 60.7px. The buttons
		   climbed 5px back onto the banner: image 0..200, buttons 195..232.

		   A ratio cannot fix that, and that is the lesson: the band a ratio
		   leaves is PROPORTIONAL to width, while everything that must fit in it
		   (button height, the 32px dot strip) is a FIXED pixel count. They only
		   agree at one viewport width.

		   So the height is reserved directly. 53.31% is exactly Banner1's own
		   height as a fraction of its width (853/1600), and percentage padding
		   resolves against the containing block's WIDTH on every side -- the
		   same trick the .e-con-inner rule above relies on. The image paints
		   from the top of the padding box, so this is empty space BELOW it.
		   Verified live at 360/375/760px: a constant 22px gap at all three. */
		aspect-ratio: auto;

		/* MOBILE SHOWS THE WHOLE BANNER -- AmalCure`s final call, 2026-09-11.
		 *
		 * This went back and forth in one session, so the history matters:
		 *
		 *   1. `contain` (whole banner). At 375px a 3:1 banner is 125px tall, so
		 *      the headline reads at ~15px but the four icon captions land at
		 *      ~4.5px -- unreadable.
		 *   2. A left crop was asked for and shipped: first a flat 185%, which
		 *      wrongly cropped the same 46% at EVERY width up to 767px, then
		 *      `max(100%, 680px)` so the crop eased off as the viewport grew and
		 *      vanished above 680px. Captions reached ~8px.
		 *   3. AmalCure then asked for the FULL image on mobile. That is what
		 *      ships. The crop is gone.
		 *
		 * SO THE CAPTIONS ARE ~4.5px ON A PHONE AGAIN, BY CHOICE. Do not "fix"
		 * that by re-adding a crop -- it was removed deliberately, after being
		 * shown working. There is no CSS answer here: at 375px the only way to
		 * enlarge baked type is to show less of the image. The real fix is a
		 * mobile artwork set (item 16, CLAUDE.md section 9) -- new files from
		 * AmalCure`s designer, not a stylesheet change.
		 *
		 * 36.15% is 1/2.767, the TALLEST banner`s height over its width, so the
		 * reserved band never runs into the buttons. Same constant as the base
		 * rule; only the trailing gap differs (10px here, 14px there). */
		padding-top: calc(36.15% + 10px) !important;
		background-size: contain !important;
		background-position: top center !important;
		background-repeat: no-repeat !important;
		background-color: var( --amc-hs-surface );
	}

	.amc-hs > .e-con-inner {
		padding-top: 0;
	}

	.amc-hs__bg {
		background-size: contain !important;
		background-position: top center !important;
		background-color: var( --amc-hs-surface );
	}

	.amc-hs .elementor-button,
	.amc-hs__btn {
		padding: 10px 18px !important;
		font-size: 13px !important;
	}

	.amc-hs > .e-con-inner {
		padding-bottom: 4% !important;
	}

	.amc-hs__panel {
		align-items: center;
		gap: 16px;
		padding: 0 18px 4%;
	}

	.amc-hs__title {
		font-size: 32px;
	}

	.amc-hs__text {
		font-size: 16px;
	}

	.amc-hs__ar {
		font-size: 19px;
	}

	/* Dropped on phones. The panels are absolutely positioned so they cannot
	 * push the hero taller, and with the second Arabic line the copy on slides
	 * 2 and 3 no longer fits inside 88vh on a small screen. The Arabic HEADLINE
	 * stays on every viewport — that is the part the brief asked for. */
	.amc-hs__text--ar {
		display: none;
	}

	/* Arrows would land on top of the copy at this width. Swipe handles it. */
	.amc-hs.is-ready .amc-hs__arrow {
		display: none;
	}

	/* The dots were landing ON the hero's own buttons. Measured on a 375px
	   viewport: the button row occupies 217-264px inside a 278px-tall hero and
	   the nav at `bottom: 18px` sat at 249-260 — a 15px overlap, which reads as
	   a teal blob welded to the "Book Appointment" corner.

	   Elementor's container padding does NOT reach this element at this width
	   (computed padding is 0px/0px on mobile, and --min-height is ignored too),
	   so giving the hero its own bottom strip here fights nothing. */
	.amc-hs.is-ready {
		padding-bottom: 32px;
	}

	.amc-hs.is-ready .amc-hs__nav {
		bottom: 10px;
	}

	/* Slide 2's own buttons were landing ON those dots -- the same collision,
	   one layer up, and it predates the fix above. .amc-hs__panel is
	   position:absolute; inset:0, and inset:0 resolves against the positioned
	   ancestor's PADDING box, which INCLUDES the 32px strip. So the panel
	   reached into the strip and its bottom-aligned actions sat on the dots:
	   measured at 375px, actions 223..263 against dots 257..268, 6px overlap.
	   Pulling the panel's bottom edge up by the same 32px puts it back above
	   the strip. Measured after: actions end 258, dots start 284. */
	.amc-hs.is-ready .amc-hs__panel {
		bottom: 32px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion — no crossfade. The JS also skips autoplay, so the slider
 * becomes a plain set of manually-changed panels.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	.amc-hs__bg,
	.amc-hs__panel,
	.amc-hs > .e-con-inner,
	.amc-hs__dot,
	.amc-hs__btn,
	.amc-hs__arrow {
		transition: none;
	}
}