/*
Theme Name: AAH — Assisi Atonement Hospital
Theme URI: https://dom19.domanddom.com/
Description: Child theme of Hello Elementor for Assisi Atonement Hospital. Carries the original site's Tailwind design system, fonts and vendor libraries so Elementor-built pages render pixel-identically to the source site.
Author: DOM Technolabs
Version: 1.0.0
Template: hello-elementor
Text Domain: aah-child
Tags: elementor, hospital, healthcare
*/

/* Design-system CSS lives in assets/css/aah-tailwind-config.css and
   assets/css/aah-custom.css — see functions.php. Add overrides below. */


/* ---------------------------------------------------------------------------
   Conflicts between Hello Elementor's base CSS and the Tailwind utilities the
   design relies on. Each override is scoped as narrowly as the clash allows.
   --------------------------------------------------------------------------- */

/* Hello Elementor styles WordPress "sticky" posts with a bare `.sticky` rule
   (display:block; position:relative), which overrides Tailwind's `.sticky`
   position utility used by the site header. Give the utility back its meaning
   and keep the sticky-post styling on actual posts. */
.sticky {
	position: sticky;
}

article.sticky,
.post.sticky {
	display: block;
	position: relative;
}

/* Tailwind v4 emits its utilities inside `@layer utilities`. Elementor's
   frontend.min.css sets element defaults on unlayered rules, and unlayered
   declarations outrank every cascade layer no matter the specificity — so
   `.elementor img{height:auto}` was beating `.h-14`, `.h-[460px]` and friends,
   and `.elementor iframe{width:100%;margin:...}` was doing the same to the
   embedded maps.

   `revert-layer` rolls those declarations back to the value from the previous
   layer, i.e. whatever Tailwind resolved — its utility when the element has
   one, and Tailwind's own preflight default when it does not. */
.elementor img {
	height: revert-layer;
	max-width: revert-layer;
	border-radius: revert-layer;
}

.elementor embed,
.elementor iframe,
.elementor object,
.elementor video {
	width: revert-layer;
	max-width: revert-layer;
	margin: revert-layer;
	line-height: revert-layer;
}

/* ---------------------------------------------------------------------------
   Minimal scroll-reveal — applied automatically to every page section by
   aah-site.js (no changes needed to individual page content). The hero
   section is deliberately skipped so the page never opens looking empty.
   --------------------------------------------------------------------------- */
.aah-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.aah-reveal.aah-in-view {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.aah-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Mobile menu — off-canvas sidebar. Tailwind utility classes handle layout;
   this covers the one thing utilities can't: locking body scroll while open.
   --------------------------------------------------------------------------- */
body.aah-menu-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Homepage hero slider
   ---------------------------------------------------------------------------
   Slide 1 is the hospital's main gate; the rest are one poster per department.
   The markup lives in the homepage's "Hero" HTML widget, the Swiper is started
   by aah-site.js, and everything visual is here so the slide markup stays a
   plain list of sections an editor can reorder or delete.
   --------------------------------------------------------------------------- */
.aah-hero {
	position: relative;
	background: #0f172a;
}

.aah-hero-swiper {
	height: clamp(430px, 74vh, 780px);
}

@media (max-width: 640px) {
	.aah-hero-swiper {
		height: clamp(440px, 78vh, 620px);
	}
}

.aah-slide {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* The photograph fills the slide.
 *
 * Written as `.aah-slide .aah-slide-img`, not `.aah-slide-img`, on purpose. The
 * `.elementor img { height: revert-layer }` rule above is what lets Tailwind's
 * height utilities work inside Elementor, but for an element styled from plain
 * CSS rather than a utility class, "revert-layer" lands on Tailwind preflight's
 * `height: auto` — and at (0,1,1) it out-specifies a single class. The image
 * then rendered at its natural aspect, ~950px tall inside a 666px slide, so the
 * bottom third of the photograph (and object-position with it) simply fell
 * outside the frame. Two classes beat it. */
.aah-slide .aah-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The gate photograph was cropped with a shelf of empty road at the bottom for
   the headline to sit on. Biasing the crop low keeps that shelf on screen when
   the hero is shorter than the picture, so the headline never lands on the
   hospital's own name board. */
.aah-slide .aah-slide-img--gate {
	object-position: center 62%;
}

.aah-slide-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 23, 42, 0.9) 0%,
		rgba(15, 23, 42, 0.62) 30%,
		rgba(15, 23, 42, 0.14) 62%,
		rgba(15, 23, 42, 0.34) 100%
	);
}

/* Department slides sit under the hospital's own brand gradient, so the
   photograph behind them reads as texture rather than as a second subject. */
.aah-slide-scrim-brand {
	background:
		linear-gradient(120deg, rgba(10, 140, 186, 0.95) 0%, rgba(12, 171, 226, 0.88) 45%, rgba(226, 12, 171, 0.8) 100%),
		linear-gradient(to top, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0) 55%);
}

/* Client-requested specialty photography stays visible while copy remains
   legible over images ranging from bright lifestyle scenes to dark scans. */
.aah-slide-scrim-specialty {
	background:
		linear-gradient(90deg, rgba(8, 32, 50, 0.9) 0%, rgba(8, 32, 50, 0.72) 38%, rgba(8, 32, 50, 0.2) 72%, rgba(8, 32, 50, 0.12) 100%),
		linear-gradient(to top, rgba(8, 32, 50, 0.5) 0%, transparent 45%);
}

.aah-slide-inner {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	height: 100%;
	padding-block: 5rem 4rem;
}

.aah-slide-inner--bottom { align-items: flex-end; }
.aah-slide-inner--middle { align-items: center; }

.aah-hero h1,
.aah-hero h2 {
	text-shadow: 0 2px 24px rgba(15, 23, 42, 0.35);
}

/* Controls */
.aah-hero-nav {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: none;
	width: 3rem;
	height: 3rem;
	transform: translateY(-50%);
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	backdrop-filter: blur(6px);
	transition: background 0.3s ease, transform 0.3s ease;
	cursor: pointer;
}

.aah-hero-nav:hover {
	background: rgba(255, 255, 255, 0.28);
}

.aah-hero-prev { left: 1.5rem; }
.aah-hero-next { right: 1.5rem; }

@media (min-width: 1024px) {
	.aah-hero-nav { display: flex; }
}

.aah-hero .swiper-pagination {
	bottom: 1.25rem;
	z-index: 10;
}

.aah-hero .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #fff;
	opacity: 0.45;
	transition: opacity 0.3s ease, width 0.3s ease;
}

.aah-hero .swiper-pagination-bullet-active {
	opacity: 1;
	width: 26px;
	border-radius: 4px;
}

/* Ken-Burns drift on the active slide — slow enough to read as depth rather
   than as motion, and off entirely for reduced-motion users. */
.aah-hero-swiper .swiper-slide-active .aah-slide-img {
	animation: aahHeroDrift 12s ease-out forwards;
}

@keyframes aahHeroDrift {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

/* Slide copy fades up as the slide arrives. */
.aah-hero-swiper .aah-slide-anim {
	opacity: 0;
	transform: translateY(22px);
}

.aah-hero-swiper .swiper-slide-active .aah-slide-anim {
	animation: aahHeroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.aah-hero-swiper .swiper-slide-active .aah-slide-anim:nth-child(2) { animation-delay: 0.1s; }
.aah-hero-swiper .swiper-slide-active .aah-slide-anim:nth-child(3) { animation-delay: 0.2s; }
.aah-hero-swiper .swiper-slide-active .aah-slide-anim:nth-child(4) { animation-delay: 0.3s; }

@keyframes aahHeroIn {
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.aah-hero-swiper .swiper-slide-active .aah-slide-img { animation: none; }
	.aah-hero-swiper .aah-slide-anim { opacity: 1; transform: none; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Department image heroes
   --------------------------------------------------------------------------- */
.aah-dept-hero {
	position: relative;
	min-height: clamp(420px, 58vh, 620px);
	overflow: hidden;
	background: #0f172a;
}

.aah-dept-hero .aah-dept-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.aah-dept-hero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 32, 50, 0.92) 0%, rgba(8, 32, 50, 0.7) 42%, rgba(8, 32, 50, 0.16) 78%),
		linear-gradient(to top, rgba(8, 32, 50, 0.38), transparent 48%);
}

.aah-dept-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 58vh, 620px);
	padding-block: 5rem;
}

@media (max-width: 640px) {
	.aah-slide-scrim-specialty,
	.aah-dept-hero-scrim {
		background: linear-gradient(90deg, rgba(8, 32, 50, 0.86), rgba(8, 32, 50, 0.5));
	}

	.aah-dept-hero,
	.aah-dept-hero-inner {
		min-height: 460px;
	}
}

/* ---------------------------------------------------------------------------
   Page transitions
   ---------------------------------------------------------------------------
   Every page fades and lifts into place on arrival, and fades out again when a
   link to another page on this site is followed, so navigation reads as one
   continuous surface instead of a hard cut.

   `.aah-page-enter` is only ever added by aah-site.js, so a visitor without
   JavaScript (or with reduced motion) simply sees the page — content is never
   left hidden by CSS alone.
   --------------------------------------------------------------------------- */
.aah-page-enter {
	animation: aahPageIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes aahPageIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* The fade-out veil. Deliberately a separate overlay rather than fading the
   <body> itself: an opacity on <body> creates a stacking context and would
   drag the sticky header and any fixed overlay along with it. */
#aah-page-veil {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(135deg, rgba(12, 171, 226, 0.14) 0%, rgba(226, 12, 171, 0.12) 100%), #ffffff;
	transition: opacity 0.28s ease;
}

body.aah-page-leaving #aah-page-veil {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.aah-page-enter { animation: none; }
	#aah-page-veil { display: none; }
}

/* ---------------------------------------------------------------------------
   Header: room for the NABH badge
   ---------------------------------------------------------------------------
   With the accreditation mark added at the right-most end, the primary menu
   has less width to play with and the longer labels ("About Us", "Find a
   Doctor") were breaking onto a second line inside the 80px bar. Keeping each
   label on one line makes the row fail visibly (an overflow) rather than
   silently, so the spacing below is tuned against real measured widths.
   --------------------------------------------------------------------------- */
#navbar nav > div > ul > li > a,
#navbar nav > div > ul > li > .aah-menu-toggle {
	white-space: nowrap;
}

/* Between the point the desktop menu appears (1024px) and the point the badge
   does (1280px) the seven labels do not fit at 16px, and they were already
   breaking onto a second line here before the badge existed. One step down in
   type size buys the ~70px needed to keep them on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
	#navbar nav > div > ul {
		font-size: 0.875rem;
	}
}

/* ---------------------------------------------------------------------------
   Specialty icons Font Awesome Free doesn't have
   ---------------------------------------------------------------------------
   `fa-stomach` and `fa-kidneys` are Pro-only icons, so Gastroenterology and
   Nephrology rendered a blank square everywhere they were used (menu, cards,
   hero chips, doctor pages). They — and the two icons we draw ourselves,
   `fa-aah-scalpel` (General Surgery) and `fa-aah-mind` (Psychiatry) — are drawn
   here as an SVG mask filled with currentColor, so they size and colour
   exactly like a font icon. The `fa-` prefix is on purpose: the menu walker
   only picks up CSS classes that start with it.

   Written as `i.fa-…::before` so it beats Font Awesome's own `.fa-x:before`,
   which loads after this file.
   --------------------------------------------------------------------------- */
i.fa-stomach::before,
i.fa-kidneys::before,
i[class*="fa-aah-"]::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: var(--aah-glyph) center / contain no-repeat;
	mask: var(--aah-glyph) center / contain no-repeat;
}

.fa-stomach {
	--aah-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 1.5h3v4c0 1 .7 1.8 1.7 2 4 .8 6.8 4 6.8 7.8 0 4.4-3.8 7.2-8.3 7.2-2.7 0-4.6-1.1-5.6-2.6-.5-.7-1.4-.9-2.1-.5l-1.5.9v-3.4l.5-.3c2-1.2 4.5-.7 5.8 1.1.6.8 1.5 1.3 2.9 1.3 2.8 0 5.2-1.6 5.2-4.1 0-2.3-1.7-4.1-4.2-4.7-2.6-.6-4.2-2.6-4.2-5.1z'/%3E%3C/svg%3E");
}

.fa-kidneys {
	--aah-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2.5C3.8 2.5 1.5 5.8 1.5 9.8s2.3 7.2 5.3 7.2c1.7 0 2.7-1.1 2.7-2.6 0-1-.5-1.7-1.3-2.2-.8-.5-.8-1.6 0-2.1.8-.5 1.3-1.3 1.3-2.4 0-3-.6-5.2-2.5-5.2zm10 0c3.2 0 5.5 3.3 5.5 7.3s-2.3 7.2-5.3 7.2c-1.7 0-2.7-1.1-2.7-2.6 0-1 .5-1.7 1.3-2.2.8-.5.8-1.6 0-2.1-.8-.5-1.3-1.3-1.3-2.4 0-3 .6-5.2 2.5-5.2zM9.6 10.2h1.6V22H9.6zm3.2 0h1.6V22h-1.6z'/%3E%3C/svg%3E");
}

.fa-aah-scalpel {
	--aah-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 1.6c1.9 1.9 2.6 5.5.3 9.1-1.6 2.5-4.4 4.2-7.3 4.9l-2.6-2.6z'/%3E%3Cpath d='M9.4 12.2l2.4 2.4-7.9 7.9a1.7 1.7 0 0 1-2.4 0 1.7 1.7 0 0 1 0-2.4z'/%3E%3C/svg%3E");
}

.fa-aah-mind {
	--aah-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.8 1.5c-4.6 0-8.3 3.5-8.3 8 0 2.6 1.2 4.8 3.1 6.3v6.7h8.6v-3.1h2.6c1.2 0 2.1-.9 2.1-2.1v-3l1.9-.7c.6-.2.8-.9.4-1.4L18.6 9.3C18.2 5 14.9 1.5 10.8 1.5zm0 12.6-3.1-3c-.9-.9-.9-2.2 0-3 .9-.8 2.2-.8 3.1.2.9-1 2.2-1 3.1-.2.9.8.9 2.1 0 3z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Department cards (/departments/ and the homepage)
   ---------------------------------------------------------------------------
   Each card carries its own accent through two custom properties set inline
   by tools/09-department-details.php: `--dept-accent` (the brand-palette hue
   used for tints, the top bar and hover glow) and `--dept-deep` (a darker
   shade of it that passes 4.5:1 on white, used for any text).

   The whole card is clickable through a stretched ::after on the title link,
   which keeps the markup valid while the separate "Book" link sits above it.
   --------------------------------------------------------------------------- */
.aah-dept-card {
	--dept-accent: #0CABE2;
	--dept-deep: #08769b;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 1.75rem 1.5rem 1.25rem;
	border: 1px solid #e2e8f0;
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(15, 23, 42, 0.16);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.aah-dept-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--dept-accent), color-mix(in srgb, var(--dept-accent) 30%, #fff));
}

.aah-dept-card:hover,
.aah-dept-card:focus-within {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--dept-accent) 45%, #fff);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 24px 48px -18px color-mix(in srgb, var(--dept-accent) 55%, transparent);
}

.aah-dept-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.aah-dept-card-icon,
.aah-dept-feature-icon,
.aah-support-card-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	background: color-mix(in srgb, var(--dept-accent) 13%, #fff);
	color: var(--dept-deep);
	font-size: 1.5rem;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.aah-dept-card:hover .aah-dept-card-icon,
.aah-support-card:hover .aah-support-card-icon {
	background: var(--dept-deep);
	color: #fff;
	transform: rotate(-6deg) scale(1.05);
}

.aah-dept-card-count {
	padding: 0.3rem 0.7rem;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--dept-accent) 9%, #fff);
	color: var(--dept-deep);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.aah-dept-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.aah-dept-card-link:focus-visible {
	outline: none;
}

.aah-dept-card:has(.aah-dept-card-link:focus-visible) {
	outline: 3px solid var(--dept-accent);
	outline-offset: 3px;
}

.aah-dept-card-text {
	margin-top: 0.5rem;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.55;
}

.aah-dept-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 1.25rem;
}

.aah-dept-card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dept-deep);
	font-size: 0.875rem;
	font-weight: 700;
}

.aah-dept-card-more i {
	font-size: 0.75rem;
	transition: transform 0.3s ease;
}

.aah-dept-card:hover .aah-dept-card-more i,
.aah-support-card--link:hover .aah-dept-card-more i {
	transform: translateX(4px);
}

.aah-dept-card-book {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--dept-accent) 35%, #fff);
	border-radius: 9999px;
	background: #fff;
	color: var(--dept-deep);
	font-size: 0.75rem;
	font-weight: 700;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.aah-dept-card-book:hover,
.aah-dept-card-book:focus-visible {
	border-color: var(--dept-deep);
	background: var(--dept-deep);
	color: #fff;
}

/* A large, faint copy of the specialty icon as a background illustration. */
.aah-dept-card .aah-dept-card-mark {
	position: absolute;
	right: -0.9rem;
	bottom: -1.1rem;
	z-index: -1;
	color: var(--dept-accent);
	font-size: 6.5rem;
	line-height: 1;
	opacity: 0.07;
	pointer-events: none;
	transform: rotate(-12deg);
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.aah-dept-card:hover .aah-dept-card-mark {
	opacity: 0.12;
	transform: rotate(-4deg) scale(1.06);
}

/* ---------------------------------------------------------------------------
   Supporting services cards (/departments/)
   --------------------------------------------------------------------------- */
.aah-support-card {
	--dept-accent: #0CABE2;
	--dept-deep: #08769b;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1.35rem;
	border: 1px solid #e2e8f0;
	border-left: 4px solid var(--dept-accent);
	border-radius: 1.25rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 22px -14px rgba(15, 23, 42, 0.14);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.aah-support-card .aah-support-card-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.85rem;
	font-size: 1.2rem;
}

.aah-support-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 20px 40px -18px color-mix(in srgb, var(--dept-accent) 50%, transparent);
}

/* ---------------------------------------------------------------------------
   Department page overview: description, services and the side panel
   --------------------------------------------------------------------------- */
.aah-dept-overview {
	--dept-accent: #0CABE2;
	--dept-deep: #08769b;
}

.aah-dept-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--dept-accent) 11%, #fff);
	color: var(--dept-deep);
	font-size: 0.875rem;
	font-weight: 600;
}

.aah-dept-checklist {
	display: grid;
	gap: 0.75rem 1.5rem;
}

@media (min-width: 640px) {
	.aah-dept-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aah-dept-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: #334155;
	line-height: 1.45;
}

.aah-dept-checklist li i {
	margin-top: 0.15rem;
	color: var(--dept-deep);
}

.aah-dept-feature {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1.25rem;
	border: 1px solid color-mix(in srgb, var(--dept-accent) 22%, #fff);
	border-radius: 1.25rem;
	background: color-mix(in srgb, var(--dept-accent) 5%, #fff);
}

.aah-dept-feature .aah-dept-feature-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.85rem;
	background: #fff;
	font-size: 1.2rem;
}

.aah-dept-panel {
	position: relative;
	overflow: hidden;
	padding: 1.75rem;
	border: 1px solid #e2e8f0;
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -20px color-mix(in srgb, var(--dept-accent) 45%, rgba(15, 23, 42, 0.3));
}

/* Sticky from here, not with Tailwind's `lg:sticky`: the unlayered
   `position: relative` above would beat the layered utility. */
@media (min-width: 1024px) {
	.aah-dept-panel {
		position: sticky;
		top: 7rem;
	}
}

.aah-dept-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--dept-accent), color-mix(in srgb, var(--dept-accent) 30%, #fff));
}

.aah-dept-panel-title {
	margin-bottom: 0.9rem;
	color: #94a3b8;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aah-dept-panel-title ~ .aah-dept-panel-title {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f1f5f9;
}

.aah-dept-leads {
	display: grid;
	gap: 0.5rem;
}

.aah-dept-lead {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 -0.5rem;
	padding: 0.4rem 0.5rem;
	border-radius: 0.9rem;
	transition: background-color 0.25s ease;
}

.aah-dept-lead:hover {
	background: color-mix(in srgb, var(--dept-accent) 8%, #fff);
}

/* Two classes: a single-class height loses to `.elementor img { height: revert-layer }`. */
.aah-dept-panel .aah-dept-lead-photo,
.aah-dept-lead-initials {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	object-fit: cover;
}

.aah-dept-lead-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--dept-accent) 14%, #fff);
	color: var(--dept-deep);
	font-size: 0.9rem;
	font-weight: 700;
}

.aah-dept-lead-name {
	display: block;
	color: #1e293b;
	font-weight: 700;
	line-height: 1.25;
	transition: color 0.25s ease;
}

.aah-dept-lead:hover .aah-dept-lead-name {
	color: var(--dept-deep);
}

.aah-dept-lead-note {
	display: block;
	margin-top: 0.15rem;
	color: #64748b;
	font-size: 0.8rem;
	line-height: 1.35;
}

.aah-dept-glance {
	display: grid;
	gap: 0.7rem;
}

.aah-dept-glance li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: #334155;
	font-size: 0.9rem;
	line-height: 1.4;
}

.aah-dept-glance li i {
	width: 1.1rem;
	margin-top: 0.1rem;
	color: var(--dept-deep);
	text-align: center;
}

.aah-dept-panel-actions {
	display: grid;
	gap: 0.6rem;
	margin-top: 1.75rem;
}

.aah-dept-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--dept-deep);
	border-radius: 9999px;
	background: var(--dept-deep);
	color: #fff;
	font-weight: 700;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.aah-dept-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px var(--dept-accent);
}

.aah-dept-btn--ghost {
	border-color: color-mix(in srgb, var(--dept-accent) 35%, #fff);
	background: #fff;
	color: var(--dept-deep);
}

.aah-dept-btn--ghost:hover {
	background: color-mix(in srgb, var(--dept-accent) 8%, #fff);
}

@media (prefers-reduced-motion: reduce) {
	.aah-dept-card,
	.aah-dept-card *,
	.aah-support-card,
	.aah-support-card *,
	.aah-dept-btn {
		transition: none;
	}

	.aah-dept-card:hover,
	.aah-dept-card:focus-within,
	.aah-support-card:hover,
	.aah-dept-btn:hover {
		transform: none;
	}
}