/* ==========================================================================
   SAIS Elementor Widgets
   Shared brand tokens + layout for:
     1. News & Resources   (.sais-news)
     2. Testimonials       (.sais-testimonials)
     3. Featured Image     (.sais-featured)
   ========================================================================== */

:root {
	--sais-orange:          #f47721;
	--sais-blue:            #299eff;
	--sais-blue-text:       #1e6fd0; /* AA-contrast blue for inline text/focus */
	--sais-navy:            #171b41;
	--sais-primary:         #1a3765; /* headings / doc & membership titles */
	--sais-surface:         #f7f8fa; /* light section background */
	--sais-border:          #e5e7eb;
	--sais-text-body:       #2f3542;
	--sais-text-secondary:  #6b7280;
	--sais-white:           #ffffff;
	--sais-radius:          20px;
	--sais-radius-sm:       12px;
	/* ---- Mobile design system (applied at <=767px) ---- */
	--sais-h1-m:            32px;
	--sais-h2-m:            24px;
	--sais-h3-m:            20px;
	--sais-body-m:          15px;
	--sais-section-pad-m:   48px;
	--sais-media-cap-m:     220px;
	/* Local font aliases now resolve to the Global Fonts (Site Settings) so the
	   whole site's families are controlled in one place; the literal names are
	   only fallbacks if a global is ever unset. Nothing hardcoded. */
	--sais-heading-font:    var(--e-global-typography-saish2-font-family, "Batica Sans"), "Poppins", "Segoe UI", sans-serif;
	--sais-body-font:       var(--e-global-typography-saisbody-font-family, "Givonic"), "Inter", "Segoe UI", sans-serif;
	--sais-tag-font:        "Inter", "Segoe UI", sans-serif;
}

/* Reset-ish helpers scoped to our widgets */
.sais-news *,
.sais-testimonials *,
.sais-featured * {
	box-sizing: border-box;
}

/* ==========================================================================
   1. NEWS & RESOURCES
   ========================================================================== */

.sais-news {
	max-width: 1140px;
	margin-inline: auto;
	padding: 0 15px;
}

.sais-news__header {
	text-align: center;
	max-width: 672px;
	margin: 0 auto 56px;
}

.sais-news__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: clamp(28px, 4vw, 36px); /* unified section-heading scale = homepage H2 */
	line-height: 1.2;
	margin: 0 0 26px;
}

.sais-news__subtitle {
	font-family: var(--sais-body-font);
	color: var(--sais-text-body);
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

.sais-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 640fr) minmax(0, 797fr);
	column-gap: 7.71%; /* Figma: 120px gap / 1557px frame */
	align-items: stretch; /* left (featured) column matches the right (list) height */
}

/* When the featured article is disabled, the list spans the full width. */
.sais-news__grid--list-only {
	grid-template-columns: 1fr;
}

/* --- Tag pill (shared) --- */
.sais-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 100px;
	background: var(--sais-blue);
	color: var(--sais-white);
	font-family: var(--sais-tag-font);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.3px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --- Featured article (left) --- */
.sais-news__featured,
.sais-news__article {
	text-decoration: none;
	color: inherit;
}

.sais-news__featured:hover,
.sais-news__article:hover {
	text-decoration: none;
}

.sais-news__featured {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sais-news__media {
	position: relative;
	width: 100%;
	min-height: 340px;
	flex: 1 1 auto; /* grows so the featured image fills the column height */
	border-radius: var(--sais-radius);
	overflow: hidden;
	/* Flex container that positions the tag (Featured Tag controls drive
	   justify-content / align-items / padding). Default: bottom-left. */
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 20px;
}

.sais-news__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sais-news__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sais-navy);
	opacity: 0.10;
	border-radius: inherit;
}

/* Tag sits above the image + overlay (it's an in-flow flex item now). */
.sais-news .sais-tag {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

.sais-news__featured-title {
	font-family: var(--e-global-typography-saish3-font-family);
	color: var(--sais-orange);
	font-size: var(--e-global-typography-saish3-font-size);
	font-weight: var(--e-global-typography-saish3-font-weight);
	line-height: 1.3;
	margin: 30px 0 0;
	max-width: 609px;
}

.sais-news__featured-text {
	font-family: var(--e-global-typography-saisbodylg-font-family);
	color: var(--sais-text-secondary);
	font-size: var(--e-global-typography-saisbodylg-font-size);
	font-weight: var(--e-global-typography-saisbodylg-font-weight);
	line-height: 1.5;
	margin: 20px 0 0;
	max-width: 609px;
}

.sais-news__readmore {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	font-family: var(--e-global-typography-saish4-font-family);
	color: var(--sais-blue);
	font-size: var(--e-global-typography-saish4-font-size);
	text-decoration: underline;
	text-underline-offset: 4px;
	letter-spacing: 0.02em;
	width: fit-content;
	transition: gap 0.2s ease, opacity 0.2s ease;
}

.sais-news__readmore:hover {
	color: var(--sais-blue);
	gap: 18px;
	opacity: 0.85;
}

.sais-news__readmore svg {
	width: 26px;
	height: auto;
	flex-shrink: 0;
}

/* --- Article list (right) --- */
.sais-news__list {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.sais-news__article {
	display: grid;
	grid-template-columns: minmax(0, 280fr) minmax(0, 477fr);
	column-gap: 5.02%; /* Figma: 40px gap / 797px article frame */
	align-items: stretch; /* thumbnail matches the text-block height */
	text-decoration: none;
}

.sais-news__thumb {
	position: relative;
	width: 100%;
	min-height: 120px; /* floor; otherwise stretches to match the text-block height */
	border-radius: var(--sais-radius);
	overflow: hidden;
	/* Flex container for the tag (Tag Placement controls); default bottom-right. */
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 16px;
}

.sais-news__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sais-news__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sais-navy);
	opacity: 0.10;
	border-radius: inherit;
}


.sais-news__article-title {
	font-family: var(--e-global-typography-saish4-font-family);
	color: var(--sais-orange);
	font-size: var(--e-global-typography-saish4-font-size);
	font-weight: var(--e-global-typography-saish4-font-weight);
	line-height: 1.3;
	margin: 0;
}

.sais-news__article-text {
	font-family: var(--e-global-typography-saissmall-font-family);
	color: var(--sais-text-secondary);
	font-size: var(--e-global-typography-saissmall-font-size);
	line-height: 1.6;
	margin: 12px 0 0;
}

/* Responsive — News (font-size now follows the saissmall global's own responsive sizes) */
@media (max-width: 1024px) {
	.sais-news__grid { column-gap: 40px; }
}

/* --- "View latest news" button (hidden on desktop unless opted in) --- */
.sais-news__mbtn-wrap { display: none; text-align: center; margin-top: 34px; }
.sais-news-btnall--yes .sais-news__mbtn-wrap { display: block; }
.sais-news__mbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 34px;
	border-radius: 100px;
	background: var(--sais-blue);
	color: var(--sais-white);
	font-family: var(--sais-heading-font);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.2px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.sais-news__mbtn:hover { background: var(--sais-blue-text); color: var(--sais-white); transform: translateY(-1px); }

/* --- Mobile slider pagination dots (shown only on the mobile slider) --- */
.sais-news__dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
}
.sais-news__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #cfd6e4;
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}
/* Expand the tap target to ~24px (WCAG 2.5.8) without changing the visual dot,
   mirroring the testimonial dots. */
.sais-news__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}
.sais-news__dot:focus-visible {
	outline: 2px solid var(--sais-blue-text, #299eff);
	outline-offset: 3px;
}
.sais-news__dot.is-active {
	width: 24px;
	border-radius: 100px;
	background: var(--sais-orange);
}

@media (max-width: 767px) {
	.sais-news__grid { grid-template-columns: 1fr; gap: 40px; }
	.sais-news__article { grid-template-columns: 1fr; gap: 16px; }
	.sais-news__thumb { aspect-ratio: 16 / 10; }

	/* Button + dots show on mobile so the page stays short. */
	.sais-news__mbtn-wrap { display: block; }
	.sais-news--mslider .sais-news__dots { display: flex; }

	/* Article list becomes a horizontal swipe slider (scroll-snap, no JS). */
	.sais-news--mslider .sais-news__list {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		gap: 16px;
		margin: 0 -15px;
		padding: 4px 15px 14px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sais-news--mslider .sais-news__list::-webkit-scrollbar { display: none; }
	.sais-news--mslider .sais-news__list > * {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
	.sais-news--mslider .sais-news__article { align-items: stretch; }

	/* Equal image height — MOBILE ONLY (so desktop keeps its tall featured +
	   proportional thumbnails). Driven by --sais-news-eqimg-h from the control. */
	.sais-news-eqimg--yes .sais-news__media,
	.sais-news-eqimg--yes .sais-news__thumb {
		height: var(--sais-news-eqimg-h, 200px);
		min-height: 0;
		aspect-ratio: auto;
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   2. TESTIMONIALS SLIDER
   ========================================================================== */

/* Same hazard as the document library: container-type below makes this box
   contribute zero intrinsic width, so it collapses inside a row-direction
   Elementor flex container (it survives today only because its parent happens
   to be column-direction). Pin the chain to a definite width. */
.elementor-widget-sais-testimonials,
.elementor-widget-sais-testimonials > .elementor-widget-container {
	width: 100%;
}

.sais-testimonials {
	width: 100%;
	position: relative;
	max-width: 1140px;
	margin-inline: auto;
	padding: 40px 0 60px;
	/* Adapt to the actual column width the widget is dropped into (not the
	   viewport) so the overlapping composition — and the floating button —
	   stay correctly proportioned in narrow columns as well as full width. */
	container-type: inline-size;
	container-name: saistesti;
}

.sais-testimonials__stage {
	position: relative;
}

/* Static image — stays put while the quote cards slide. */
.sais-testimonial__photo {
	position: relative;
	width: 56%;
	aspect-ratio: 425 / 400; /* Figma photo is ~square, not tall-portrait */
	border-radius: var(--sais-radius);
	overflow: hidden;
	margin-left: 18.5%;
	z-index: 1;
}

.sais-testimonial__photo img { object-position: center top; }

.sais-testimonial__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Only the quote box changes — the image stays static. The cards are stacked in
   one place and cross-fade between reviews (no overflow clipping, so the card's
   soft shadow renders fully and no neighbouring card can ever show through). */
.sais-testimonials__viewport {
	position: relative;
	z-index: 3;
	width: 69%;
	/* Sits mostly below the photo, overlapping only its bottom edge, with a small
	   right-hand gap — matching the Figma composition. */
	margin: -4% 5% 0 auto;
}

.sais-testimonials__track {
	display: grid;
}

.sais-testimonial {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
}

.sais-testimonial.is-active {
	opacity: 1;
	visibility: visible;
}

.sais-testimonial__card {
	position: relative;
	width: 100%;
	background: var(--sais-white);
	border-radius: var(--sais-radius);
	box-shadow: 0 20px 50px -20px rgba(41, 44, 124, 0.14); /* softened toward Figma spec while keeping the clipped-box fix */
	padding: 48px 56px 44px 87px;
	/* Clip the accent bar to the card's rounded corners (the outset box-shadow
	   is not affected by overflow, so it still renders in full). */
	overflow: hidden;
}

/* Orange accent bar — the card's coloured left border. Runs the full height at
   the left edge; the card's overflow:hidden clips it to the rounded corners so
   it aligns perfectly with the top-left and bottom-left. */
.sais-testimonial__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 14px;
	background: var(--sais-orange);
}

/* Faint vertical divider to the left of the quote (Figma "Line detail") */
.sais-testimonial__divider {
	position: absolute;
	left: 55px;
	top: 49px;
	width: 1px;
	height: 139px;
	background: #e4e7ec;
}

.sais-testimonial__quote {
	font-family: var(--sais-body-font);
	color: var(--sais-text-body);
	font-size: 20px;
	line-height: 1.6;
	margin: 0 0 44px;
}

.sais-testimonial__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
}

.sais-testimonial__name {
	font-family: var(--sais-body-font);
	color: var(--sais-blue);
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
	white-space: normal;
}

.sais-testimonial__stars {
	display: inline-flex;
	gap: 6px;
	color: var(--sais-orange);
	flex-shrink: 0;
}

.sais-testimonial__stars svg {
	width: 22px;
	height: 22px;
	display: block;
}

.sais-testimonial__stars .is-empty {
	color: #d9dde3;
}

/* Decorative rainbows */
.sais-testimonials__deco {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.sais-testimonials__deco--top img    { transform: rotate(var(--sais-testi-deco-top-rot, 180deg)); }
.sais-testimonials__deco--bottom img { transform: rotate(var(--sais-testi-deco-bottom-rot, 0deg)); }

.sais-testimonials__deco img {
	display: block;
	width: 100%;
	height: auto;
}

.sais-testimonials__deco--top {
	width: 22%;
	top: -2%;
	right: 4%;
	z-index: 4; /* sits ABOVE the photo (z-index 1), as in Figma */
}

.sais-testimonials__deco--bottom {
	width: 28%;
	left: -6%;
	bottom: 22%; /* sits at the photo's bottom-left corner, not down by the card */
	z-index: 2; /* above the photo (z-index 1) so its right edge bleeds onto the image */
}

/* Single "next" toggle — reset hard so no theme button styles bleed in.
   Anchored to the card's top-right corner (where the image bottom meets the
   card top), matching the Figma placement. */
.sais-testimonials__nav {
	position: absolute;
	top: 34%;
	right: 19%;
	z-index: 4;
}

/* The double-class selector (0-2-0 specificity) beats theme/Elementor button
   styles without !important, so the Style-tab colour/size controls can still
   override these defaults. */
.sais-testimonials .sais-testimonials__btn {
	-webkit-appearance: none;
	appearance: none;
	/* Size tracks the column width so it never looks oversized in a narrow
	   column (min 46px) nor too large at full width (max 64px). */
	width: clamp(46px, 6cqi, 64px);
	height: clamp(46px, 6cqi, 64px);
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sais-white);
	background-image: none;
	color: var(--sais-blue);
	box-shadow: 0 10px 30px rgba(41, 44, 124, 0.15);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: none;
	letter-spacing: normal;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sais-testimonials .sais-testimonials__btn:hover {
	transform: scale(1.06);
	box-shadow: 0 14px 34px rgba(41, 44, 124, 0.22);
}

.sais-testimonials .sais-testimonials__btn:focus-visible {
	outline: 2px solid var(--sais-blue-text);
	outline-offset: 3px;
}

.sais-testimonials__btn svg {
	width: 22px;
	height: 22px;
}

/* Autoplay pause/play control (shown only when autoplay is on). Uses the shared
   nav-button styling; the icon is pure CSS so it inherits the button's colour. */
.sais-testimonials__nav { display: inline-flex; gap: 10px; }
.sais-testimonials__pauseicon {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
}
.sais-testimonials__pauseicon::before,
.sais-testimonials__pauseicon::after {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 1px;
	width: 4px;
	border-radius: 1px;
	background: currentColor;
}
.sais-testimonials__pauseicon::before { left: 2px; }
.sais-testimonials__pauseicon::after  { right: 2px; }
/* Paused → a play triangle. */
.sais-testimonials__pausebtn.is-paused .sais-testimonials__pauseicon::before {
	left: 3px;
	width: 0;
	border-radius: 0;
	background: none;
	border-left: 11px solid currentColor;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
.sais-testimonials__pausebtn.is-paused .sais-testimonials__pauseicon::after { display: none; }

.sais-testimonials__btn--prev svg {
	transform: rotate(180deg);
}

.sais-testimonials.is-single .sais-testimonials__nav {
	display: none;
}

/* Dots */
.sais-testimonials__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.sais-testimonials__dot {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #d9dde3;
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

/* Expand the tap target to ~26px (WCAG 2.5.8) without changing the visual dot. */
.sais-testimonials__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.sais-testimonials__dot.is-active {
	background: var(--sais-orange);
	width: 26px;
	border-radius: 6px;
}

.sais-testimonials__dot:focus-visible {
	outline: 2px solid var(--sais-blue-text);
	outline-offset: 3px;
}

.sais-testimonials.is-single .sais-testimonials__dots {
	display: none;
}

/* "Show review" control OFF — hide the quote card, nav and dots so only the
   image and the decorative arch shapes remain. */
.sais-testimonials.is-noreview .sais-testimonials__viewport,
.sais-testimonials.is-noreview .sais-testimonials__nav,
.sais-testimonials.is-noreview .sais-testimonials__dots {
	display: none;
}
.sais-testimonials.is-noreview .sais-testimonials__stage {
	justify-content: center;
}

/* Responsive — Testimonials.
   Element widths and offsets are driven by the "Layout & Positioning" controls,
   which each carry a mobile default that produces the stacked layout. This block
   only covers the structural bits that aren't slider-driven, so the widget
   stacks cleanly on phones (and the position controls stay fully editable). */
@media (max-width: 767px) {
	.sais-testimonial__card { padding: 32px 24px 32px 40px; }
	.sais-testimonial__divider { display: none; }
	.sais-testimonial__quote { font-size: 18px; }
	.sais-testimonials__nav {
		position: static;
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}
}

/* Very small screens — tighten side padding. */
@media (max-width: 480px) {
	.sais-testimonials { padding-inline: 16px; }
}

/* Respect reduced-motion for the crossfade + button micro-interactions. */
@media (prefers-reduced-motion: reduce) {
	.sais-testimonial,
	.sais-testimonials .sais-testimonials__btn,
	.sais-testimonials__dot {
		transition: none;
	}
	.sais-testimonials .sais-testimonials__btn:hover {
		transform: none;
	}
}

/* ==========================================================================
   3. FEATURED IMAGE + PATTERN
   ========================================================================== */

.sais-featured {
	position: relative;
	max-width: 1000px;
	margin-inline: auto;
	padding: 60px 20px;
}

.sais-featured__inner {
	position: relative;
	display: flex;
	justify-content: flex-start;
}

.sais-featured__media {
	position: relative;
	z-index: 2;
	/* width is driven by the max_width control (default 88%); max-width keeps the
	   705px cap always applied so a % control value never oversizes it. */
	width: 88%;
	max-width: 705px;
	aspect-ratio: 705 / 471;
	border-radius: var(--sais-radius);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(23, 27, 65, 0.12);
}

.sais-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sais-featured__pattern {
	position: absolute;
	z-index: 1;
	top: var(--sais-fp-y, 50%);
	right: var(--sais-fp-x, 0);
	transform: translateY(-50%) rotate(var(--sais-fp-rot, 0deg));
	width: 40%;
	max-width: 360px;
	opacity: var(--sais-fp-op, 1);
	pointer-events: none;
	user-select: none;
}

.sais-featured__pattern img {
	display: block;
	width: 100%;
	height: auto;
}

.sais-featured--pattern-left .sais-featured__inner {
	justify-content: flex-end;
}

.sais-featured--pattern-left .sais-featured__pattern {
	right: auto;
	left: var(--sais-fp-x, 0);
	transform: translateY(-50%) scaleX(-1) rotate(var(--sais-fp-rot, 0deg));
}

@media (max-width: 767px) {
	/* Featured-image collapse fix (CPD / Membership fees + Thought-Leadership).
	   When this widget sits in a flex row/column that STACKS on mobile, the media's
	   height comes only from `aspect-ratio`, which contributes ZERO intrinsic
	   height during the flex-item sizing pass (verified: in-flow images, cqw and
	   container-query lengths all still collapse — the flex container treats its
	   own width as indefinite in that pass). The widget then collapses to ~0 and
	   the image overflows onto whatever is below.
	   Fix: give the MEDIA a definite viewport-unit height (not the widget). A
	   definite length survives the sizing pass, so the flex item wraps the media
	   PLUS the widget's own vertical padding correctly — which a min-height on the
	   widget could not do (it can't know each instance's padding, so padded
	   instances still overflowed). 58vw ≈ the 705:471 crop at the media's mobile
	   width (~90vw); the image still object-fit:covers the box, so the crop is
	   preserved. Desktop keeps its aspect-ratio (this block is ≤767 only). QA 1.9.126. */
	/* Full-width on phones. !important beats the max-width control's DESKTOP default
	   (88%), which Elementor emits at all widths and would otherwise leave side gaps
	   on mobile (its mobile_default of 100% is never emitted to CSS). */
	.sais-featured__media { width: 100% !important; max-width: 100% !important; height: 58vw; aspect-ratio: auto; }
	.sais-featured__pattern { width: 45%; opacity: 0.9; }
}

/* ==========================================================================
   4. DOCUMENT CARDS CAROUSEL
   ========================================================================== */

.sais-cards {
	position: relative;
	max-width: 1100px;
	margin-inline: auto;
	--sais-cards-pad: 56px;
	padding: 20px var(--sais-cards-pad);
	--sais-cards-per-view: 4;
	--sais-cards-gap: 24px;
}

.sais-cards__viewport {
	overflow: hidden;
}

.sais-cards__track {
	display: flex;
	gap: var(--sais-cards-gap);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.sais-card {
	flex: 0 0 calc((100% - (var(--sais-cards-per-view) - 1) * var(--sais-cards-gap)) / var(--sais-cards-per-view));
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--sais-white);
	border: 1px solid #ececf1;
	border-radius: 16px;
	padding: 28px 22px;
	box-shadow: 0 6px 24px rgba(23, 27, 65, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sais-card:hover {
	box-shadow: 0 12px 32px rgba(23, 27, 65, 0.10);
	transform: translateY(-3px);
}

/* Full-bleed banner image filling the top of the card. align-self:stretch beats
   the card's align-items:center so it spans the full width; the negative margins
   break it out of the card's 28px/22px padding to reach the top + side edges. */
.sais-card__media {
	align-self: stretch;
	width: auto;
	height: 180px;                    /* fallback; the "Image height" control drives this */
	margin: -28px -22px 22px;
	border-radius: 16px 16px 0 0;     /* top corners match the card; bottom sits flush */
	overflow: hidden;
	flex-shrink: 0;
}

.sais-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sais-card__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: 20px;
	line-height: 1.3;
	margin: 18px 0 0;
}

.sais-card__text {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 15px;
	line-height: 1.6;
	margin: 12px 0 0;
}

.sais-card__link {
	font-family: var(--sais-body-font);
	color: var(--sais-blue);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: auto;             /* pin to the card bottom so links align across the row */
	padding-top: 16px;
	display: inline-block;
	transition: opacity 0.2s ease;
}

.sais-card__link:hover {
	color: var(--sais-blue);
	opacity: 0.8;
}

/* Nav arrows */
.sais-cards__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--sais-navy);
	color: var(--sais-white);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.sais-cards__arrow:hover {
	background: #223072;
}

.sais-cards__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.sais-cards__arrow svg {
	width: 16px;
	height: 16px;
}
.sais-cards__arrow i { font-size: 16px; line-height: 1; }
.sais-cards__arrow img { width: 16px; height: 16px; object-fit: contain; }

/* Sit the arrows right against the card edges (~2px) at any breakpoint, keyed
   to the container padding so they always touch the cards. The Navigation Arrows
   controls can nudge them in/out via --sais-arrow-x. */
.sais-cards__arrow--prev { left: calc(var(--sais-cards-pad) - 42px - var(--sais-arrow-x, 0px)); }
.sais-cards__arrow--next { right: calc(var(--sais-cards-pad) - 42px - var(--sais-arrow-x, 0px)); }
/* Only the built-in chevron flips for "prev"; a custom icon is used as-is. */
.sais-cards__arrow--prev:not(.is-custom) svg { transform: rotate(180deg); }

.sais-cards.is-static .sais-cards__arrow { display: none; }

/* Responsive — Cards */
@media (max-width: 1024px) {
	.sais-cards { --sais-cards-per-view: 3 !important; --sais-cards-pad: 48px; }
}

@media (max-width: 767px) {
	.sais-cards { --sais-cards-per-view: 2 !important; --sais-cards-pad: 44px; }
}

@media (max-width: 500px) {
	.sais-cards { --sais-cards-per-view: 1 !important; }
}

/* ==========================================================================
   5. MEMBERSHIP  (.sais-membership) — merged from sais-membership widget
   ========================================================================== */

.sais-membership {
	position: relative;
	background-color: transparent;
	/* White margins (top/bottom) let the arch tips bleed onto white, as in the Figma frame. */
	padding: 100px 0 130px;
	box-sizing: border-box;
}

.sais-membership *,
.sais-membership *::before,
.sais-membership *::after {
	box-sizing: border-box;
}

/* Full-bleed layer: breaks out of the (e.g. 1140px) content container to the full
   viewport width, so the grey band and arches bleed to the browser edges as in Figma.
   overflow:hidden clips the arches at the viewport edges (no horizontal scroll). */
.sais-membership__bleed {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	width: calc(100vw - (100vw - 100%)); /* excludes OS scrollbar width so no h-scroll on Win/Linux */
	transform: translateX(-50%);
	/* Clip horizontally to the viewport (no h-scroll) but let the arches bleed
	   vertically onto the white above/below, as in the Figma frame. */
	overflow-x: clip;
	overflow-y: visible;
	z-index: 0;
	pointer-events: none;
}

/* The grey "surface" band (var(--sais-surface)) — sits inside the white margins, full-bleed width. */
.sais-membership__surface {
	position: absolute;
	left: 0;
	right: 0;
	top: 100px;
	bottom: 130px;
	background-color: var(--sais-surface);
	z-index: 0;
}

.sais-membership__inner {
	position: relative;
	z-index: 2;
	max-width: 1232px;
	margin: 0 auto;
	/* Vertical rhythm inside the grey band (controls the band height). */
	padding: 88px 24px 100px;
}

/* ---------------- Header ---------------- */
.sais-membership__head {
	max-width: 800px;
	margin: 0 auto 48px;
	text-align: center;
}

.sais-membership__title {
	margin: 0 0 16px;
	font-family: "Batica Sans", "Poppins", sans-serif;
	font-size: clamp(28px, 4vw, 36px); /* unified section-heading scale = homepage H2 */
	line-height: 1.2;
	font-weight: 400;
	color: var(--sais-primary);
}

.sais-membership__desc {
	margin: 0;
	font-family: "Givonic", "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 450;
	color: #2f3542;
}

/* ---------------- Cards grid ---------------- */
.sais-membership__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: stretch;
	/* Constrains the card row so the cards aren't full container width. */
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.sais-membership__card {
	position: relative;
	min-height: 300px;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	box-shadow: 0 24px 48px -24px rgba(20, 30, 60, 0.35);
	isolation: isolate;
}

/* Image + readability overlay */
.sais-membership__card-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sais-membership__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.sais-membership__card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 34, 66, 0) 25%, rgba(28, 34, 66, 0.55) 100%);
}

.sais-membership__card:hover .sais-membership__card-media img {
	transform: scale(1.05);
}

/* Content */
.sais-membership__card-content {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	padding: 32px 24px 34px;
	text-align: center;
}

.sais-membership__card-title {
	margin: 0;
	font-family: "Batica Sans", "Poppins", sans-serif;
	font-size: 28px;
	line-height: 1.3;
	font-weight: 400;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Button — pill */
.sais-membership__card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Height is driven by padding (see Button Padding control) so the control
	   actually changes the button height — no fixed min-height to mask it. */
	padding: 19px 28px;
	border-radius: 100px;
	background-color: #ffffff;
	color: #1e477b;
	font-family: "Batica Sans", "Poppins", sans-serif;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.44px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sais-membership__card-btn:hover {
	background-color: #1e477b;
	color: #ffffff;
	transform: translateY(-2px);
}

/* ---------------- Decorative nested-arch motif (SAIS brand) ---------------- */
.sais-membership__arc {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	background: url("../images/arch.svg") center / contain no-repeat;
}

/* Figma proportions expressed against the viewport (design frame = 1920px wide),
   so the arches scale with the browser and bleed to its edges regardless of the
   content-container width (e.g. 1140px).
   TL: 771/1920 = 40.16vw, left -392/1920 = -20.42vw. Rotated 180deg (∩). */
.sais-membership__arc--tl {
	width: 40.16vw;
	height: 40.16vw;
	top: -2px;
	/* Position is clamped with max() so it stops sliding once the arch reaches its
	   max size (~1544px viewport, where 40.16vw = 620px, -20.42vw = -315px). Below
	   that both size and offset scale together; above it both freeze, so the arch
	   stays put on wide monitors instead of drifting. */
	left: max(-315px, -20.42vw);
	/* background-image, not an <img>, so the rotation lives on the box */
	transform: rotate(var(--sais-membership-arc-tl-rot, 180deg));
}

/* BR: 660/1920 = 34.38vw, right -313/1920 = -16.30vw. Upright (U). */
.sais-membership__arc--br {
	width: 34.38vw;
	height: 34.38vw;
	/* Clamped at the max-size viewport (~1542px, where -16.30vw = -251px). */
	right: max(-251px, -16.30vw);
	bottom: -79px;
	transform: rotate(var(--sais-membership-arc-br-rot, 0deg));
}

/* Responsiveness: bound the vw-scaled arches so they scale smoothly but never
   balloon on wide monitors or overwhelm the stacked cards on small screens.
   max-* is orthogonal to the Size control (which sets width/height), so it caps
   the value without overriding/fighting the control. */
.sais-membership__arc--tl { max-width: 620px; max-height: 620px; }
.sais-membership__arc--br { max-width: 530px; max-height: 530px; }
@media (max-width: 1024px) {
	.sais-membership__arc--tl { max-width: 340px; max-height: 340px; }
	.sais-membership__arc--br { max-width: 290px; max-height: 290px; }
}
@media (max-width: 600px) {
	.sais-membership__arc--tl { max-width: 170px; max-height: 170px; }
	.sais-membership__arc--br { max-width: 150px; max-height: 150px; }
}

/* ---------------- Responsive ---------------- */
/* Arches scale with the viewport via vw, so only the vertical rhythm and type
   need adjusting at smaller breakpoints. */
@media (max-width: 1200px) {
	.sais-membership {
		padding: 110px 0 120px;
	}
	.sais-membership__surface {
		top: 110px;
		bottom: 120px;
	}
	.sais-membership__inner {
		padding: 100px 24px 110px;
	}
	.sais-membership__title {
		font-size: 40px;
	}
	.sais-membership__card-title {
		font-size: 30px;
	}
	.sais-membership__card-btn {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.sais-membership {
		padding: 70px 0 80px;
	}
	.sais-membership__surface {
		top: 70px;
		bottom: 80px;
	}
	.sais-membership__inner {
		padding: 56px 20px 64px;
	}
	.sais-membership__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.sais-membership__title {
		font-size: 34px;
	}
	.sais-membership__desc {
		font-size: 16px;
	}
	.sais-membership__card {
		min-height: 340px;
	}
	.sais-membership__card-title {
		font-size: 26px;
	}
}

/* ==========================================================================
   6. DOCUMENT LIBRARY  (.sais-doclib)
   ========================================================================== */

/* Elementor drops the widget into a flex container as a content-sized item
   (flex: 0 1 auto). The container-type on __inner below makes that box
   contribute ZERO intrinsic width, which collapses the entire widget to its
   own padding. Give the chain a definite width so the query container has a
   real width to measure and nothing is sized from its contents. */
.elementor-widget-sais-document-library,
.elementor-widget-sais-document-library > .elementor-widget-container {
	width: 100%;
}

.sais-doclib {
	width: 100%;
	position: relative;
	/* Figma: 151px of clear space under the last card (content ends 6862, the
	   section ends 7013). At 80px the end arch reached three cards up instead
	   of tucking behind the last one. */
	padding: 80px 20px 151px;
	box-sizing: border-box;
	/* NOTE: no overflow here — it would break the sticky side-nav.
	   The arcs are clipped by the __bleed layer below instead. */
}

.sais-doclib * { box-sizing: border-box; }

/* Full-size layer that clips the bleeding arcs to the section, without
   becoming an overflow ancestor of the sticky nav. */
/* Figma 24:442 "Section Background": x497..1920 on a 1920 page, i.e. it starts
   to the RIGHT of the side nav (which sits on white) and bleeds off the page's
   right edge. right: calc(50% - 50vw) reaches the viewport edge from a centred
   box, whatever width the library is set to. */
.sais-doclib__surface {
	position: absolute;
	top: var(--sais-doclib-surface-top, 0px);
	bottom: 0;
	left: var(--sais-doclib-surface-left, 26.33%);
	right: calc(50% - 50vw);
	background-color: var(--sais-doclib-surface-bg, transparent);
	z-index: 0;
	pointer-events: none;
}

.sais-doclib__bleed {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Reach the viewport edges from a centred box. inset:0 clipped the arches at
	   the widget's own edge, cutting the end arch off mid-curve; the design has
	   it bleeding past the page edge instead. This also makes the arch offsets
	   page-relative, which is how Figma specifies them. */
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	overflow: hidden;
	/* Behind .sais-doclib__inner (z-index 1): the design tucks the end arch
	   under the last card so only the part beside and below it shows. The
	   Arch layer control can raise it to 2. */
	z-index: 0;
	pointer-events: none;
}

.sais-doclib__inner {
	position: relative;
	z-index: 1;
	/* Figma sizes the library against its own 1808px span. Making that span the
	   query container lets every value below be expressed as a share of it, so
	   the type and the fr-based grid scale together instead of drifting apart. */
	width: 100%;
	container-type: inline-size;
	container-name: saisdoclib;
	max-width: 1240px;
	/* Left-aligned inside the section padding, not centred: Figma puts the
	   library at x21..1829 on a 1920 page — flush with the 20px padding, with
	   the slack (and the beige surface) bleeding off to the right. Centring it
	   shifted the whole grid ~35px right and threw off where the end arch
	   crosses the document column. */
	margin-inline: 0 auto;
	display: grid;
	/* Figma: nav 456 + gap 120 + content column 1232 = 1808 (the library's
	   full span). 1159 is the doc-row width, not the column. */
	/* Nav column width is control-driven (Navigation column width); empty keeps
	   the default proportional 456fr. */
	grid-template-columns: minmax(0, var(--sais-doclib-nav-col, 456fr)) minmax(0, var(--sais-doclib-docs-col, 1232fr));
	column-gap: 6.637%;
	align-items: start;
}

/* --- Side nav --- */
/* Sticky by default (Sticky side nav control). It travels over the left arch as
   the page scrolls, which is fine because the column is a solid block painted
   above the arch layer — that opaque background is what makes sticky usable. */
.sais-doclib__nav {
	align-self: start;
	/* A solid block so the arch cannot show through the column, and above the
	   arch layer whatever that is set to. */
	position: relative;
	z-index: 1;
	background-color: var(--sais-doclib-nav-bg, #ffffff);
	padding: var(--sais-doclib-nav-pad, 0px);
	border-radius: var(--sais-doclib-nav-radius, 0px);
}

/* Clear gutter so the Navigate column never butts against the grey surface
   layer (at mid-desktop widths the surface starts ~2px inside the nav's right
   edge). Desktop-only: the mobile dropdown is full-width and needs no gutter. */
@media (min-width: 1025px) {
	.sais-doclib__nav { padding-right: 32px; }
}

.sais-doclib-navsticky--sticky .sais-doclib__nav {
	position: sticky;
	/* Clear the FIXED site header: its live height is published as --sais-header-h
	   by sais-mobile-nav.js (updates on resize), so the "Navigate" title never
	   slides under it. The Sticky offset control (--sais-doclib-nav-top) is the
	   gap below the header. */
	top: calc(var(--sais-header-h, 176px) + var(--sais-doclib-nav-top, 16px));
	/* Above the arch layer even when the Arch layer control raises it to 2. */
	z-index: 3;
}

.sais-doclib__nav-title {
	font-family: var(--sais-heading-font);
	color: #252641;
	font-size: clamp(18px, 1.6593cqi, 30px);   /* Figma 30 */
	line-height: 1.3;
	margin: 0 0 clamp(16px, 1.6cqi, 28px);   /* tightened from Figma 58 — the big gap read as empty */
}

.sais-doclib__nav-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--sais-white);
	border: 1px solid var(--sais-border);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	padding: 16px 20px;
	font-family: var(--sais-heading-font);
	font-size: 18px;
	color: #252641;
	cursor: pointer;
}

.sais-doclib__nav-toggle svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s ease; }
.sais-doclib__nav.is-open .sais-doclib__nav-toggle svg { transform: rotate(180deg); }

.sais-doclib__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.1062cqi, 20px);   /* Figma 20 */
}

.sais-doclib__nav-link {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.6cqi, 11px);
	min-height: clamp(44px, 3.0cqi, 54px);
	/* Tighter left padding + a capped font keep even the longest category
	   ("Promotion of Access to Information") on a single line, so every pill is
	   the same height instead of some wrapping to two lines. */
	padding: 10px clamp(10px, 0.9cqi, 14px) 10px clamp(12px, 1.0cqi, 16px);
	background: var(--sais-white);
	border: 1px solid var(--sais-border);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	text-decoration: none;
	color: var(--sais-primary);
	font-family: var(--sais-heading-font);
	/* Default cap keeps the longest category on one line in the ~268px column.
	   NOT !important, so the "Navigation link font" Typography control can set a
	   custom size; labels use nowrap + ellipsis, so a larger size truncates
	   cleanly rather than wrapping. */
	font-size: clamp(12px, 0.95cqi, 13px);
	line-height: 1.3;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
/* Labels wrap to show in full (a larger font from the Typography control would
   otherwise truncate them); the pill grows to fit. */
.sais-doclib__nav-text {
	white-space: normal;
	overflow-wrap: break-word;
	min-width: 0;
}

.sais-doclib__nav-link:hover {
	transform: translateX(3px);
	box-shadow: 0 6px 16px rgba(20, 30, 60, 0.14);
	color: var(--sais-primary);
}

.sais-doclib__nav-icon {
	display: inline-flex;
	color: var(--sais-orange);
	font-size: clamp(15px, 1.2721cqi, 23px);   /* Figma 23 */
	flex-shrink: 0;
}

.sais-doclib__nav-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Document search — live filter above the documents column. Matches the document
   rows' 94.07% width so its right edge lines up with the cards below it. */
.sais-doclib__search { position: relative; width: 94.07%; margin-bottom: 24px; }
.sais-doclib__search-icon {
	position: absolute;
	left: 18px; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px;
	color: var(--sais-primary, #1a3765);
	opacity: 0.5;
	pointer-events: none;
}
/* !important beats the theme/Elementor default form-input styles (which were
   forcing 16px left padding — putting the text under the icon — and a 3px radius). */
.sais-doclib__search .sais-doclib__search-input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px 18px 15px 50px !important;
	font-family: var(--sais-body-font);
	font-size: 16px !important;
	line-height: 1.4;
	color: var(--sais-primary, #1a3765);
	background: #ffffff !important;
	border: 1px solid var(--sais-border, #e5e7eb) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sais-doclib__search .sais-doclib__search-input:focus {
	outline: none;
	border-color: var(--sais-orange, #f47721) !important;
	box-shadow: 0 0 0 3px rgba(244, 119, 33, 0.15);
}
/* Hide the native search clear/decoration so the field stays clean. */
.sais-doclib__search-input::-webkit-search-decoration,
.sais-doclib__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sais-doclib__search-input::placeholder { color: #9aa2b1; }
.sais-doclib__doc.is-hidden,
.sais-doclib__section.is-hidden,
.sais-doclib__nav-list li.is-hidden { display: none !important; }

/* ---- Navigation layout: TOP BAR (alternative to the left column) ----
   Desktop only; on mobile both layouts converge to the collapsible top nav
   the widget already ships. The bar sticks under the header and mirrors the
   Page Nav pill (filled navy active tab). */
@media ( min-width: 768px ) {
	.sais-doclib-navlayout--bar .sais-doclib__inner { display: block; }
	.sais-doclib-navlayout--bar .sais-doclib__content { width: 100%; min-width: 0; }
	.sais-doclib-navlayout--bar .sais-doclib__nav {
		position: sticky;
		top: calc( var(--sais-header-h, 90px) + var(--sais-doclib-nav-top, 12px) );
		z-index: 6;
		width: max-content;
		max-width: 100%;
		margin: 0 auto 30px;
		padding: 8px;
		background: var(--sais-doclib-nav-bg, #ffffff);
		border-radius: 100px;
		box-shadow: 0 6px 24px rgba( 23, 27, 65, 0.08 );
	}
	.sais-doclib-navlayout--bar .sais-doclib__nav-title,
	.sais-doclib-navlayout--bar .sais-doclib__nav-toggle,
	.sais-doclib-navlayout--bar .sais-doclib__nav .sais-doclib__nav-icon { display: none; }
	.sais-doclib-navlayout--bar .sais-doclib__nav-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
		margin: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sais-doclib-navlayout--bar .sais-doclib__nav-list::-webkit-scrollbar { display: none; }
	.sais-doclib-navlayout--bar .sais-doclib__nav-list li { flex: 0 0 auto; margin: 0; }
	.sais-doclib-navlayout--bar .sais-doclib__nav .sais-doclib__nav-link {
		white-space: nowrap;
		border: 0;
		box-shadow: none;
		background: transparent;
		border-radius: 100px;
		padding: 10px 18px;
	}
	.sais-doclib-navlayout--bar .sais-doclib__nav .sais-doclib__nav-link:hover {
		background: #eef2f7;
		box-shadow: none;
	}
	.sais-doclib-navlayout--bar .sais-doclib__nav .sais-doclib__nav-link.is-active {
		/* !important beats Elementor's per-element active box-shadow (equal specificity, loads later). */
		background: var(--sais-primary, #1a3765) !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	.sais-doclib-navlayout--bar .sais-doclib__nav .sais-doclib__nav-link.is-active .sais-doclib__nav-text { color: #ffffff; }
	/* Clear the header AND the sticky bar when a tab scrolls to its section. */
	.sais-doclib-navlayout--bar .sais-doclib__section {
		scroll-margin-top: calc( var(--sais-header-h, 90px) + var(--sais-doclib-nav-top, 12px) + 78px );
	}
}

.sais-doclib__noresults {
	margin: 0;
	padding: 28px 24px;
	text-align: center;
	color: #6b7280;
	font-family: var(--sais-body-font);
	font-size: 16px;
	background: var(--sais-surface, #f7f8fa);
	border-radius: 12px;
}

/* --- Content --- */
.sais-doclib__content { min-width: 0; }

.sais-doclib__section {
	/* Clear the FIXED site header when a "Navigate" link scrolls to a section —
	   otherwise the section's heading lands behind the header (was a hardcoded
	   44px; the header is ~126px, so the target looked like the wrong section).
	   --sais-header-h is published live by sais-mobile-nav.js. QA 1.9.127. */
	scroll-margin-top: calc(var(--sais-header-h, 90px) + 16px);
	margin-bottom: 56px;
}

.sais-doclib__section:last-child { margin-bottom: 0; }

.sais-doclib__section-title {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: clamp(26px, 2.6549cqi, 48px);   /* Figma 48 */
	line-height: 1.2;
	margin: 0 0 clamp(20px, 2.1018cqi, 38px);   /* Figma 38 */
}

.sais-doclib__docs {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.6593cqi, 30px);
}

.sais-doclib__doc {
	width: 94.07%;   /* Figma rows are 1159 inside the 1232 column */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(14px, 1.3274cqi, 24px);
	min-height: clamp(64px, 6.6372cqi, 120px);   /* Figma 120 */
	padding: 0 clamp(18px, 2.1018cqi, 38px) 0 clamp(18px, 2.4336cqi, 44px);   /* Figma 38 right / 44 left */
	background: var(--sais-white);
	border: 1px solid var(--sais-border);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sais-doclib__doc:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(20, 30, 60, 0.16);
}

.sais-doclib__doc-title {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: clamp(16px, 1.6593cqi, 30px);   /* Figma 30 */
	line-height: 1.3;
}

.sais-doclib__doc-download {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--sais-orange);
	flex-shrink: 0;
}

.sais-doclib__doc-download-label {
	font-family: var(--sais-body-font);
	font-weight: 700;
	font-size: clamp(13px, 1.1062cqi, 20px);   /* Figma 20 */
	line-height: 1.6;
}

.sais-doclib__doc-icon { width: clamp(28px, 3.4845cqi, 63px); height: clamp(28px, 3.4845cqi, 63px); flex-shrink: 0; display: block; }

/* --- Decorative arcs --- */
.sais-doclib__arc {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	opacity: 0.9;
}

.sais-doclib__arc img { display: block; width: 100%; height: auto; }
.sais-doclib__arc--tl img { transform: rotate(var(--sais-doclib-arc-tl-rot, 180deg)); }
.sais-doclib__arc--br img { transform: rotate(var(--sais-doclib-arc-br-rot, 0deg)); }

/* Figma: left arch is the larger one (~385px) sitting ~33% down; bottom-right
   arch is smaller (~227px). Scaled to the ~1140 container. Driven by custom
   properties so each value is exposed as a control (Style -> Brand arcs). */
.sais-doclib {
	/* Measured from Figma (1920 frame; the library renders ~1:1 there because
	   its inner box is 94.2vw = the design's 1808 span):
	     left arch  24:876  386x386 at x147, y3167  -> 2047 below the section top
	     end arch   24:443  227x228 at x1715, y6728 -> 22px past the page edge,
	                                                   58px above the section end
	   The vertical offsets are px on purpose. A % is measured against the
	   section height, which grows with every document added, so the arches
	   would never stay where the design puts them. */
	--sais-doclib-arc-tl: 386px;
	--sais-doclib-arc-tl-x: 147px;
	--sais-doclib-arc-tl-y: 2047px;
	--sais-doclib-arc-br: 227px;
	--sais-doclib-arc-br-x: -22px;
	--sais-doclib-arc-br-y: 58px;
}
.sais-doclib__arc--tl {
	width: var(--sais-doclib-arc-tl);
	top: var(--sais-doclib-arc-tl-y);
	left: var(--sais-doclib-arc-tl-x);
}

.sais-doclib__arc--br {
	width: var(--sais-doclib-arc-br);
	right: var(--sais-doclib-arc-br-x);
	bottom: var(--sais-doclib-arc-br-y);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.sais-doclib__inner { grid-template-columns: 1fr; gap: 20px; }
	/* On mobile the nav is a STICKY dropdown pill below the header, so a section
	   jump must clear the header AND the pill (~64px) or the heading lands behind
	   the pill. QA 1.9.127. */
	.sais-doclib__section { scroll-margin-top: calc(var(--sais-header-h, 90px) + 84px); }
	/* Drop the white column block on mobile — it exists only to hide the arch
	   behind the DESKTOP nav column. On mobile the nav is a single dropdown pill
	   (with its own background), so the block just reads as an empty box around it. */
	.sais-doclib__nav { position: sticky; top: 0; z-index: 6; padding-top: 10px; background: transparent; }
	/* the collapsed mobile nav is a control, so it stays sticky regardless */
	.sais-doclib__nav-title { display: none; }
	.sais-doclib__nav-toggle { display: flex; }
	.sais-doclib__nav-list {
		display: none;
		margin-top: 12px;
	}
	.sais-doclib__nav.is-open .sais-doclib__nav-list { display: flex; }
}

@media (max-width: 767px) {
	.sais-doclib { padding: 56px 16px; }
	.sais-doclib__doc {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 20px 24px;
	}
	.sais-doclib__section-title { margin-bottom: 20px; }
	.sais-doclib__doc-title { font-size: 18px; }
	.sais-doclib__docs { gap: 20px; }
	.sais-doclib {
		--sais-doclib-arc-tl: 150px;
		--sais-doclib-arc-tl-x: -70px;
		--sais-doclib-arc-tl-y: 60px;
		--sais-doclib-arc-br: 110px;
		--sais-doclib-arc-br-x: -50px;
		--sais-doclib-arc-br-y: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sais-doclib__doc,
	.sais-doclib__nav-link,
	.sais-doclib__nav-toggle svg { transition: none; }
}

/* ==========================================================================
   7. ACCESSIBILITY — focus states + reduced motion (all widgets)
   ========================================================================== */

/* Visible keyboard focus for every interactive element. */
.sais-news__featured:focus-visible,
.sais-news__article:focus-visible,
.sais-testimonials__btn:focus-visible,
.sais-testimonials__dot:focus-visible,
.sais-card__link:focus-visible,
.sais-cards__arrow:focus-visible,
.sais-membership__card-btn:focus-visible,
.sais-featured__media:focus-visible,
.sais-doclib__nav-link:focus-visible,
.sais-doclib__nav-toggle:focus-visible,
.sais-doclib__doc:focus-visible,
.sais-examgrid__card:focus-visible,
.sais-sdp__web:focus-visible,
.sais-sdp__num:focus-visible,
.sais-sdp__contact:focus-visible {
	outline: 3px solid #1e6fd0;
	outline-offset: 3px;
}

/* Fallback for browsers without :focus-visible. */
.sais-testimonials__btn:focus,
.sais-cards__arrow:focus,
.sais-doclib__nav-toggle:focus {
	outline: 3px solid #1e6fd0;
	outline-offset: 3px;
}
.sais-testimonials__btn:focus:not(:focus-visible),
.sais-cards__arrow:focus:not(:focus-visible),
.sais-doclib__nav-toggle:focus:not(:focus-visible) {
	outline: none;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.sais-news *,
	.sais-testimonials *,
	.sais-featured *,
	.sais-cards *,
	.sais-membership *,
	.sais-doclib *,
	.sais-examgrid *,
	.sais-sdp *,
	.sais-courses *,
	.sais-memcat * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.sais-card:hover,
	.sais-doclib__doc:hover,
	.sais-doclib__nav-link:hover,
	.sais-featured__media:hover,
	.sais-membership__card:hover .sais-membership__card-media img,
	.sais-testimonials__btn:hover,
	.sais-membership__card-btn:hover,
	a.sais-examgrid__card:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   8. MEMBERSHIP CATEGORIES  (.sais-memcat) — reuses the .sais-cards carousel
   ========================================================================== */

/* The arcs bleed above and below the section, but Elementor wrappers default
   to overflow:hidden which clips them off. Unclip the ancestors — the arcs
   are still contained horizontally by .sais-memcat__bleed (overflow-x: clip)
   below, so this cannot introduce a horizontal page scrollbar.
   NOTE: do not add overflow-x:clip here. It lands on the inner boxed
   container too and clips the section's own content. */
.e-con:has(.elementor-widget-sais-membership-categories),
.elementor-section:has(.elementor-widget-sais-membership-categories) {
	overflow: visible;
}

.sais-memcat {
	position: relative;
	padding: 80px 20px 90px;
	box-sizing: border-box;
}

.sais-memcat * { box-sizing: border-box; }

/* Light surface panel with the rounded bottom-right corner (as in the Figma). */
.sais-memcat__surface {
	position: absolute;
	/* Figma: the panel runs off the left edge and stops at 81% of the section,
	   leaving white to its right — measured 364/1920 = 19%. */
	inset: 0 19% 0 0;
	background-color: var(--sais-surface);
	border-bottom-right-radius: 100px;
	z-index: 0;
}

/* Bleed layer: clip only horizontally (no page h-scroll) but let the arcs
   bleed vertically off the section top/bottom, as in the Figma frame — instead
   of a hard rectangular cut. */
.sais-memcat__bleed {
	position: absolute;
	inset: 0;
	overflow-x: clip;
	overflow-y: visible;
	z-index: 0;
	pointer-events: none;
}

/* Arc placement is proportional to the section width so it holds at any
   viewport. Values measured off the Figma frame (page width 1920):
     arc size        302/1920 = 15.7%
     top-right arc   right 113px = 5.9%;  top -255px = -84.4% of the arc
     bottom-left arc left -153px = -8%;   bottom +147px = +48.7% of the arc
   translateY() resolves against the element's own height, and the arc is
   square, so the vertical offsets stay locked to the arc size. The 180deg
   rotation lives on the <img> so the span's translate stays in page axes. */
/* Arc geometry is driven by custom properties so every value is exposed as an
   Elementor control (Style -> Brand arcs). Defaults are the measured Figma
   values: arc 302/1920 = 15.7%; top-right right 113/1920 = 5.9% and top
   -255/302 = -84.4% of the arc; bottom-left bottom +147/302 = +48.7%. */
.sais-memcat {
	--sais-memcat-arc: 15.7%;
	--sais-memcat-arc-bl-x: 0px;
	--sais-memcat-arc-bl-y: 48.7%;
	--sais-memcat-arc-r-x: 5.9%;
	--sais-memcat-arc-r-y: -84.4%;
}
.sais-memcat__arc { position: absolute; width: var(--sais-memcat-arc); }
.sais-memcat__arc img { display: block; width: 100%; height: auto; }
/* In the Figma the bottom-left arc's right edge is flush with the content
   column's left edge (both at 149/1920). Anchoring it to the content edge
   keeps them flush at every width instead of overlapping the note text —
   max() handles viewports narrower than the 1240 content cap. */
.sais-memcat__arc--bl {
	left: calc(max(0px, 50% - 620px) - var(--sais-memcat-arc) + var(--sais-memcat-arc-bl-x));
	bottom: 0;
	transform: translateY(var(--sais-memcat-arc-bl-y));
}
.sais-memcat__arc--r  {
	right: var(--sais-memcat-arc-r-x);
	top: 0;
	transform: translateY(var(--sais-memcat-arc-r-y));
}
.sais-memcat__arc--bl img { transform: rotate(var(--sais-memcat-arc-bl-rot, 0deg)); }
.sais-memcat__arc--r img  { transform: rotate(var(--sais-memcat-arc-r-rot, 180deg)); }

.sais-memcat__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
}

.sais-memcat__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.2;
	margin: 0 0 40px;
}

.sais-memcat__note {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 16px;
	line-height: 1.6;
	max-width: 660px;
	margin: 40px 0 0;
	/* Sit above the decorative corner arch (bleed layer is z:0). */
	position: relative;
	z-index: 2;
}
/* Keep the footnote clear of the bottom-left corner arch: once it wraps to extra
   lines at narrower desktop widths its lower lines dip into the arch's bulge. */
@media (min-width: 1025px) {
	.sais-memcat__note { padding-left: 60px; box-sizing: border-box; }
}

/* --- Icon-card variant of the shared carousel --- */
.sais-cards.is-memcat .sais-card {
	border-radius: 20px;
	border-color: var(--sais-border);
	box-shadow: none;
	padding: 40px 28px;
	min-height: 360px;
	justify-content: flex-start;
	gap: 20px;
}

.sais-cards.is-memcat .sais-card:hover {
	box-shadow: 0 14px 40px rgba(23, 27, 65, 0.08);
}

/* Optional per-card link: a stretched overlay anchor makes the whole card
   clickable without disturbing the flex layout of its contents. */
.sais-card--linked { position: relative; }
.sais-memcat__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

.sais-card__icon {
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sais-card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sais-cards.is-memcat .sais-card__title {
	font-size: 24px;
	margin: 4px 0 0;
}

.sais-cards.is-memcat .sais-card__text {
	font-size: 16px;
	color: var(--sais-text-secondary);
	margin: 0;
}

@media (max-width: 767px) {
	.sais-memcat { padding: 56px 16px 64px; }
	.sais-memcat__surface { inset: 0; border-bottom-right-radius: 60px; }
	/* 15.7% of a phone width is only ~59px, too small to read as the brand
	   arc — scale it up. The translateY offsets are relative to the arc's own
	   size, so the vertical bleed stays proportional automatically. */
	.sais-memcat { --sais-memcat-arc: 34%; --sais-memcat-arc-r-x: 2%; }
	.sais-memcat__title { margin-bottom: 28px; }
	.sais-cards.is-memcat .sais-card { min-height: 0; }
}

/* ==========================================================================
   9. EXAM FEES GRID  (.sais-examgrid)
   ========================================================================== */

.sais-examgrid {
	padding: 60px 20px;
	box-sizing: border-box;
}

.sais-examgrid * { box-sizing: border-box; }

.sais-examgrid__inner {
	max-width: 1240px;
	margin-inline: auto;
}

.sais-examgrid__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 48px;
}

.sais-examgrid__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.sais-examgrid__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	min-height: 300px;
	padding: 44px 28px;
	background: var(--sais-white);
	border: 1px solid var(--sais-border);
	border-radius: 20px;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.sais-examgrid__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 40px rgba(23, 27, 65, 0.10);
}

.sais-examgrid__icon {
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 6px;
}

.sais-examgrid__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sais-examgrid__name {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: 24px;
	line-height: 1.3;
	margin: 0;
}

.sais-examgrid__price {
	font-family: var(--sais-heading-font);
	color: var(--sais-blue);
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
}

.sais-examgrid__note {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	margin: 40px auto 0;
	max-width: 760px;
}

/* Column counts come from the widget's responsive `columns` control
   (3 / 2 / 1 at desktop / <=1024 / <=767); base grid media queries were removed
   so they don't contradict the emitted control CSS. */
@media (max-width: 767px) {
	.sais-examgrid__card { min-height: 0; }
}

/* ==========================================================================
   10. SDP PROVIDERS  (.sais-sdp) — reuses the .sais-cards carousel
   ========================================================================== */

.sais-sdp {
	position: relative;
	padding: 80px 20px 90px;
	box-sizing: border-box;
}

.sais-sdp * { box-sizing: border-box; }

.sais-sdp__surface {
	position: absolute;
	inset: 0 8% 0 0;
	background-color: var(--sais-surface);
	border-bottom-right-radius: 100px;
	z-index: 0;
}

.sais-sdp__bleed {
	position: absolute;
	inset: 0;
	overflow-x: clip;
	overflow-y: visible;
	z-index: 0;
	pointer-events: none;
}

.sais-sdp__arc { position: absolute; }
.sais-sdp__arc img { display: block; width: 100%; height: auto; }
.sais-sdp__arc--bl img { transform: rotate(var(--sais-sdp-arc-bl-rot, 0deg)); }
.sais-sdp__arc--tr img { transform: rotate(var(--sais-sdp-arc-tr-rot, 180deg)); }
/* Bottom-left + top-right arches. Values are custom properties so they're
   exposed as controls (Style -> Brand arcs). */
.sais-sdp {
	--sais-sdp-arc: 236px;
	--sais-sdp-arc-x: -92px;
	--sais-sdp-arc-y: -54px;
	--sais-sdp-arc-tr: 271px;
	--sais-sdp-arc-tr-x: -150px;
	--sais-sdp-arc-tr-y: -40px;
}
.sais-sdp__arc--bl {
	width: var(--sais-sdp-arc);
	left: var(--sais-sdp-arc-x);
	bottom: var(--sais-sdp-arc-y);
}
.sais-sdp__arc--tr {
	width: var(--sais-sdp-arc-tr);
	right: var(--sais-sdp-arc-tr-x);
	top: var(--sais-sdp-arc-tr-y);
}

.sais-sdp__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
}

.sais-sdp__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.2;
	margin: 0 0 40px;
	max-width: 720px;
}

.sais-sdp__note {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 16px;
	line-height: 1.6;
	max-width: 660px;
	margin: 40px 0 0;
}

.sais-sdp__note strong { font-weight: 700; }

/* Align the heading + note with the first provider card. The carousel is
   max-width:1100 centred inside the 1240 inner, then inset by --sais-cards-pad
   (56/48/44 across breakpoints). These wrappers share that exact 1100 box, so a
   matching padding-left lands their text on the first card's left edge at every
   width. The "Heading & note left inset" control overrides padding-left directly
   (higher specificity) — these values are the always-present fallback. */
.sais-sdp__head,
.sais-sdp__foot {
	box-sizing: border-box;
	max-width: 1100px;
	margin-inline: auto;
	padding-left: 56px;
}
@media (max-width: 1024px) {
	.sais-sdp__head, .sais-sdp__foot { padding-left: 48px; }
}
@media (max-width: 767px) {
	.sais-sdp__head { padding-left: 44px; }
	/* Note centred on mobile (per request): drop the first-card indent and centre
	   it. !important overrides the "left indent" control's padding on phones. */
	.sais-sdp__foot { padding-left: 0 !important; padding-right: 0 !important; text-align: center; }
	.sais-sdp__note { margin-inline: auto; }
}

/* --- SDP detail card variant of the shared carousel --- */
.sais-cards.is-sdp .sais-card {
	border-radius: 20px;
	border-color: var(--sais-border);
	box-shadow: none;
	padding: 36px 28px;
	min-height: 400px;
	/* Centre content vertically: cards stretch to the tallest card, so shorter
	   ones (1-line vs wrapped 2-line titles) stay balanced top-to-bottom instead
	   of stranding dead space at the bottom — holds at any card width. */
	justify-content: center;
	gap: 22px;
	text-align: center;
}

.sais-cards.is-sdp .sais-card:hover {
	box-shadow: 0 14px 40px rgba(23, 27, 65, 0.08);
}

.sais-sdp__name {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: 24px;
	line-height: 1.3;
	margin: 0;
}

.sais-sdp__block { display: flex; flex-direction: column; gap: 2px; }

.sais-sdp__line,
.sais-sdp__value {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	word-break: break-word;
}

.sais-sdp__web {
	font-family: var(--sais-body-font);
	color: var(--sais-blue);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	text-decoration: none;
	word-break: break-word;
}

.sais-sdp__web:hover { text-decoration: underline; color: var(--sais-blue); }

.sais-sdp__contact { color: inherit; text-decoration: none; }
.sais-sdp__contact:hover { text-decoration: underline; }

.sais-sdp__label {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	line-height: 1.6;
	margin: 0;
}

a.sais-sdp__num { color: var(--sais-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
a.sais-sdp__num:hover { color: var(--sais-primary); }

@media (max-width: 767px) {
	.sais-sdp { padding: 56px 16px 64px; }
	.sais-sdp__surface { inset: 0; border-bottom-right-radius: 60px; }
	.sais-cards.is-sdp .sais-card { min-height: 0; }
}

/* ==========================================================================
   11. FEES CTA  (.sais-fees)
   ========================================================================== */
.sais-fees {
	position: relative;
	max-width: 1240px;
	margin-inline: auto;
	background-color: #0d2547;
	border-radius: 24px;
	padding: 90px 40px;
	/* overflow VISIBLE by default so the rainbow arch spills out over the card
	   and bleeds across the section / off the page edge (matches the design).
	   The "Clip arch to card" control switches this to hidden if wanted. */
	overflow: visible;
	box-sizing: border-box;
}
.sais-fees * { box-sizing: border-box; }

.sais-fees__inner {
	position: relative;
	z-index: 2;
	max-width: 700px;
	margin-inline: auto;
	text-align: center;
}

.sais-fees__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.2;
	font-weight: 400;
	max-width: 560px;
	margin: 0 auto 18px;
}

.sais-fees__desc {
	font-family: var(--sais-body-font);
	color: #ffffff;
	font-size: 18px;
	line-height: 1.6;
	margin: 0 auto 34px;
}

.sais-fees__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sais-body-font);
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
	background-color: var(--sais-blue);
	padding: 16px 34px;
	border-radius: 100px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
/* .sais-fees__btn:hover — handled by the UNIFIED BUTTON SYSTEM block below */
.sais-fees__btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Upright rainbow arch, crown near the top, sized by the card HEIGHT so its legs
   always bleed off the bottom (and the right) regardless of how tall the card
   grows — matches the Figma reference. Clipped by the card's overflow:hidden. */
.sais-fees__arch {
	position: absolute;
	bottom: 0; /* legs flush with the bottom of the card */
	right: -12%;
	/* Sized off the card WIDTH (which box padding never changes) so adjusting
	   the box padding moves the copy but never resizes/shifts the arch. */
	width: 42%;
	aspect-ratio: 1 / 1;
	height: auto;
	--sais-arch-rotate: 180deg;
	transform: rotate(var(--sais-arch-rotate));
	pointer-events: none;
	user-select: none;
	z-index: 1;
	line-height: 0;
}
.sais-fees__arch img { display: block; width: 100%; height: 100%; }

/* The arch is absolutely positioned to bleed off the card's right edge and
   "disappear into the right" of the page. Its Elementor host section ships with
   overflow-x:visible, so the arch extended the whole DOCUMENT's width (~272px of
   overflow on the homepage). That stray horizontal overflow (a) shows a phantom
   horizontal scrollbar on desktop and (b) perturbs Elementor's layout/resize on
   the homepage, which helped trigger Elementor Pro's sticky-nav crash there
   (SAIS Fees CTA present = menu broke; removed = menu worked). Clip the arch at
   the container that holds it: it still bleeds to the page edge, just never past
   it. overflow-x:clip (paired with the default overflow-y:visible) leaves all
   vertical content/shadows untouched. */
.e-con:has( .sais-fees__arch ),
.elementor-section:has( .sais-fees__arch ) { overflow-x: clip; }

@media (max-width: 767px) {
	.sais-fees__arch { opacity: 0.35; }
}

/* ============================================================================
 * §12  CONTACT FORM  (SAIS Contact Form — extends Elementor Pro Form)
 *
 * The widget adds the class .sais-contact to its wrapper (and .sais-arches--yes
 * when arches are on). Everything below styles Elementor Pro's real form markup
 * (.elementor-form / .elementor-field-textual / .elementor-button) to match the
 * Figma reference, plus two decorative rainbow arches painted as ::before /
 * ::after so they render in both the editor and on the front end.
 * ========================================================================== */
.sais-contact {
	position: relative;
	/* Arch geometry — all overridable per-instance by the Rainbow Arches controls
	   (size / horizontal offset / vertical offset / rotation) for both shapes. */
	--sais-tl-size: 200px;
	--sais-tl-x: -95px;
	--sais-tl-y: -60px;
	--sais-tl-rot: 180deg;
	--sais-br-size: 210px;
	--sais-br-x: -70px;
	--sais-br-y: -70px;
	--sais-br-rot: 130deg;
}

/* Decorative arches (hidden unless the "Show arches" switch adds .sais-arches--yes) */
.sais-contact::before,
.sais-contact::after {
	content: "";
	position: absolute;
	z-index: 0;
	display: none;
	background: no-repeat center / contain url(../images/rainbow.svg);
	pointer-events: none;
}
.sais-arches--yes.sais-contact::before,
.sais-arches--yes.sais-contact::after {
	display: block;
}
/* Top-left: rotation controlled by --sais-tl-rot (default 180deg = crown up ∩) */
.sais-contact::before {
	width: var(--sais-tl-size);
	height: var(--sais-tl-size);
	top: var(--sais-tl-y);
	left: var(--sais-tl-x);
	transform: rotate(var(--sais-tl-rot));
}
/* Bottom-right: rotation controlled by --sais-br-rot (default 0deg = crown down ∪) */
.sais-contact::after {
	width: var(--sais-br-size);
	height: var(--sais-br-size);
	bottom: var(--sais-br-y);
	right: var(--sais-br-x);
	transform: rotate(var(--sais-br-rot));
}

/* Keep the actual form above the arches (Pro form OR the .sais-cform widget) */
.sais-contact .elementor-form,
.sais-contact .sais-cform {
	position: relative;
	z-index: 1;
}

/* Roomier gaps between fields, matching the reference */
.sais-contact .elementor-form .elementor-field-group {
	margin-bottom: 6px;
}

/* --- Inputs + textarea: pill / rounded, thin light-blue border --- */
.sais-contact .elementor-form .elementor-field-group .elementor-field-textual {
	border: 1.5px solid #a9c9f0;
	border-radius: 100px;
	background-color: #ffffff;
	color: #1e6fd0;
	padding: 18px 28px;
	font-family: var(--sais-body-font);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.2s ease;
}
.sais-contact .elementor-form .elementor-field-group textarea.elementor-field-textual {
	border-radius: 22px;
	min-height: 300px;
	padding: 22px 28px;
	resize: vertical;
}
.sais-contact .elementor-form .elementor-field-textual::placeholder {
	color: #3f8ae0;
	opacity: 1;
}
.sais-contact .elementor-form .elementor-field-textual:focus {
	border-color: var(--sais-blue);
	outline: none;
	box-shadow: none;
}

/* --- Send button: ochre-orange pill, bottom-left --- */
.sais-contact .elementor-form .elementor-field-type-submit {
	justify-content: flex-start;
}
.sais-contact .elementor-form .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #d5872e;
	color: #ffffff;
	border: none;
	border-radius: 100px;
	padding: 16px 42px;
	min-height: 0;
	font-family: var(--sais-heading-font);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 0.2px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.sais-contact .elementor-form .elementor-button:hover {
	background-color: #c2761f;
	transform: translateY(-1px);
}

/* On small screens, tuck the arches in a little so they don't overwhelm */
@media (max-width: 767px) {
	.sais-arches--yes.sais-contact::before,
	.sais-arches--yes.sais-contact::after {
		opacity: 0.4;
	}
}

/* ============================================================================
 * §13  FEES TABLE  (SAIS Fees Table)
 * ========================================================================== */
.sais-feestable {
	width: 100%;
	box-sizing: border-box;
}
.sais-feestable * { box-sizing: border-box; }

/* Category row */
.sais-feestable__cat {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 18px;
}
.sais-feestable__rule {
	flex: 0 0 auto;
	width: 80px;
	height: 2px;
	background-color: #171b41;
}
.sais-feestable__cat-label {
	font-family: var(--sais-body-font);
	color: var(--sais-orange);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	white-space: nowrap;
}
.sais-feestable__vat {
	margin-left: auto;
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 16px;
	white-space: nowrap;
}

/* Rows */
.sais-feestable__rows { width: 100%; }
.sais-feestable__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0;
	border-bottom: 1px solid #cfe4fb;
}
/* "Hide divider below last row" toggle. */
.sais-feestable-nolast--yes .sais-feestable__row:last-child { border-bottom-width: 0; }

.sais-feestable__label { min-width: 0; }
.sais-feestable__label-main {
	display: block;
	font-family: var(--sais-heading-font);
	color: #1a3765;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
}
.sais-feestable__sublabel {
	display: block;
	margin-top: 8px;
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 17px;
	line-height: 1.4;
}
.sais-feestable__price {
	flex: 0 0 auto;
	font-family: var(--sais-heading-font);
	color: #1a3765;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	white-space: nowrap;
	text-align: right;
}

/* Terms box */
.sais-feestable__tc {
	margin-top: 34px;
	background-color: var(--sais-surface);
	border-radius: 20px;
	padding: 30px 40px;
}
.sais-feestable__tc-heading {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: 19px;
	font-weight: 600;
	margin-bottom: 16px;
}
.sais-feestable__tc-list {
	margin: 0;
	padding-left: 22px;
	color: var(--sais-text-secondary);
	font-family: var(--sais-body-font);
	font-size: 18px;
	line-height: 1.6;
}
.sais-feestable__tc-list li { padding-left: 8px; margin-bottom: 6px; }
.sais-feestable__tc-list li:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.sais-feestable__label-main,
	.sais-feestable__price { font-size: 20px; }
	.sais-feestable__cat { flex-wrap: wrap; gap: 12px; }
	.sais-feestable__vat { margin-left: 0; width: 100%; }
}

/* ============================================================================
 * §14  SHAPE  (SAIS Shape — standalone decorative rainbow/arch)
 * ========================================================================== */
/* A placed shape is meant to bleed past its section. Elementor's Overflow:
   Hidden slices it at the section box, so on any container that DIRECTLY holds
   a placed shape, clip only on the horizontal axis — that still prevents a
   horizontal page scrollbar (the shape bleeds off the page edge as in Figma)
   while letting it spill above and below the section instead of being cut.
   Deliberately scoped with '>' : applying overflow to an inner boxed container
   would clip the section's own content. */
/* A placed shape is measured from its own container, so that container must be
   the containing block — and must NOT clip, or a shape anchored inside a boxed
   column gets sliced at the column edge instead of bleeding past it. */
.e-con:has(.elementor-widget-sais-shape.sais-shape-abs--yes),
.e-con-inner:has(.elementor-widget-sais-shape.sais-shape-abs--yes),
.elementor-section:has(.elementor-widget-sais-shape.sais-shape-abs--yes) {
	overflow: visible;
	position: relative;
}

/* Clipping happens once, at the full-width section: shapes bleed freely inside
   it (vertically too) but never past the viewport, so the page gains no
   horizontal scrollbar. Listed after the rule above so it wins on the section. */
.e-con-full:has(.elementor-widget-sais-shape.sais-shape-abs--yes),
.e-con-boxed:has(.elementor-widget-sais-shape.sais-shape-abs--yes),
.elementor-section:not(.elementor-section-boxed):has(.elementor-widget-sais-shape.sais-shape-abs--yes) {
	/* .e-con-boxed is itself viewport-width (its .e-con-inner is the centred
	   1140 box), so clipping here clips the bleeding shape at the VIEWPORT edge,
	   not the content edge — a shape in a boxed top-level section no longer
	   causes a horizontal page scrollbar. */
	overflow-x: clip;
	overflow-y: visible;
}

.sais-shape { line-height: 0; }
/* Give an inline (non-absolute) shape a stacking context so the Layer (z-index)
   control works without needing "Absolute" on. Absolute shapes get position:
   absolute from the Placement control, which takes over. */
.elementor-widget-sais-shape:not(.sais-shape-abs--yes) { position: relative; }
.sais-shape__img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	transform: rotate(var(--sais-shape-rot, 0deg)) scaleX(var(--sais-shape-flip, 1));
	transform-origin: center;
}

/* Responsiveness: many Shape instances set only a desktop width (often fixed px,
   e.g. 448px), so on smaller screens they kept that full size and overwhelmed /
   sat inconsistently against the content. These caps scale every decorative
   shape down with the viewport on tablet/phone — only affecting shapes wider
   than the cap, so small shapes and the Figma-set desktop sizes are untouched.
   height:auto keeps the aspect ratio. */
@media (max-width: 1024px) {
	.elementor-widget-sais-shape .sais-shape__img { max-width: 40vw; }
}
@media (max-width: 767px) {
	.elementor-widget-sais-shape .sais-shape__img { max-width: 34vw; }
}
@media (max-width: 480px) {
	.elementor-widget-sais-shape .sais-shape__img { max-width: 30vw; }
}

/* ============================================================================
 * §15  DESIGNATIONS GRID  (SAIS Designations Grid)
 * ========================================================================== */
.sais-desig { width: 100%; box-sizing: border-box; }
.sais-desig * { box-sizing: border-box; }

.sais-desig__head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.sais-desig__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	margin: 0 0 18px;
}
.sais-desig__subtitle {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

.sais-desig__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.sais-desig__card {
	background-color: #ffffff;
	border-radius: 20px;
	padding: 40px 28px 34px;
	box-shadow: 0 20px 50px rgba(23, 27, 65, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}
.sais-desig__icon { line-height: 0; }
/* The uploaded icon SVGs carry preserveAspectRatio="none" + width/height="100%",
   so they have no usable intrinsic ratio and height:auto collapses to the SVG's
   fallback height — the art gets stretched (squashed). Pin the box to the icon
   viewBox ratio (76.4791 x 90) so the forced stretch is proportional. */
.sais-desig__icon img,
.sais-desig__modal-icon img { width: 66px; height: auto; aspect-ratio: 76.4791 / 90; display: block; }

.sais-desig__code {
	font-family: var(--sais-heading-font);
	color: #1a3765;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	margin: 6px 0 0;
}
.sais-desig__name {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	flex: 1 1 auto;
}
.sais-desig__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	padding: 11px 26px;
	border: 1px solid var(--sais-blue);
	border-radius: 100px;
	background-color: transparent;
	color: var(--sais-blue);
	font-family: var(--sais-body-font);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sais-desig__btn:hover {
	background-color: var(--sais-blue);
	border-color: var(--sais-blue);
	color: #ffffff;
}

@media (max-width: 1024px) {
	.sais-desig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sais-desig__grid { grid-template-columns: 1fr; }
}

/* --- Designations "Find out More" popup (modal) --- */
.sais-desig__btn { cursor: pointer; }
.sais-desig__modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.sais-desig__modal[hidden] { display: none; }
.sais-desig__modal * { box-sizing: border-box; }
.sais-desig__modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 37, 71, 0.55);
	cursor: pointer;
	/* Reveal via .is-open (added a frame after unhide) rather than a keyframe on a
	   display-toggled element — that painted a frame of the final state first (the
	   "flash"). Starting at opacity:0 and transitioning in is flash-free. */
	opacity: 0;
	transition: opacity 0.22s ease;
}
.sais-desig__modal.is-open .sais-desig__modal-overlay { opacity: 1; }
.sais-desig__modal-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px); /* accurate on mobile (excludes URL bar) */
	overflow-y: auto;
	background: #ffffff;
	border: 2px solid var(--sais-blue);
	border-radius: 22px;
	padding: 52px 48px 46px;
	text-align: center;
	box-shadow: 0 30px 90px rgba(13, 37, 71, 0.28);
	transform-origin: center center;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.sais-desig__modal.is-open .sais-desig__modal-card { opacity: 1; transform: none; }
.sais-desig__modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	background: #eef1f6;
	color: #5b6472;
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	border-radius: 50%;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sais-desig__modal-close:hover { background: #171b41; color: #ffffff; }
.sais-desig__modal-close:focus-visible { outline: 2px solid var(--sais-blue); outline-offset: 2px; }
.sais-desig__modal-icon { line-height: 0; display: inline-block; }
.sais-desig__modal-icon img { width: 76px; height: auto; aspect-ratio: 76.4791 / 90; display: block; }
.sais-desig__modal-title {
	font-family: var(--sais-heading-font);
	color: #1a3765;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 400;
	margin: 22px 0 0;
}
.sais-desig__modal-desc {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 16px;
	line-height: 1.6;
	margin: 18px 0 0;
}
.sais-desig__modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	padding: 15px 36px;
	border-radius: 100px;
	background: var(--sais-blue);
	color: #ffffff;
	font-family: var(--sais-body-font);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.sais-desig__modal-btn:hover { background: var(--sais-blue-text); color: #ffffff; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
	.sais-desig__modal-card,
	.sais-desig__modal-overlay { transition: none; }
	.sais-desig__modal-card { transform: none; }
}

@media (max-width: 480px) {
	.sais-desig__modal-card { padding: 44px 26px 34px; }
	.sais-desig__modal-title { font-size: 24px; }
}

/* ============================================================================
 * §17  MAP  (SAIS Map — interactive Google map with the brand pin)
 * ========================================================================== */
/* The map's only child is an iframe (300px intrinsic) or an empty div that JS
   fills, so it has no intrinsic width of its own — width:100% is circular
   against a content-sized flex parent and the map renders ~300px wide in a
   row-direction Elementor container. Pin the chain. */
.elementor-widget-sais-map,
.elementor-widget-sais-map > .elementor-widget-container {
	width: 100%;
}

.sais-map {
	position: relative;
	width: 100%;
	height: 690px;
	background: var(--sais-surface, #f7f8fa);
	overflow: hidden;
}
.sais-map--embed iframe { display: block; border: 0; width: 100%; height: 100%; }

/* Editor-only: explains why the branded map is not showing. */
.sais-map__notice {
	margin: 0 0 8px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fff4e5;
	border: 1px solid #f0b775;
	color: #7a4a12;
	font-family: var(--sais-body-font);
	font-size: 13px;
	line-height: 1.5;
}

/* Label beside the pin (design: orange, heading font, two short lines). */
.sais-map__label {
	position: absolute;
	font-family: var(--sais-heading-font);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 500;
	max-width: 260px;
	white-space: normal;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

/* Address card overlaying the top-left of the map (title + address + directions). */
.sais-map__wrap { position: relative; }
.sais-map__card {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 5;
	max-width: min(320px, calc(100% - 40px));
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(20, 30, 60, 0.16);
	padding: 18px 20px;
	font-family: var(--sais-body-font);
}
.sais-map__card-title {
	margin: 0 0 6px;
	font-family: var(--sais-heading-font);
	font-size: 18px;
	line-height: 1.25;
	color: var(--sais-primary, #1a3765);
}
.sais-map__card-addr {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4b5563;
}
.sais-map__card-dir {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 12px;
	font-family: var(--sais-heading-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--sais-orange, #f47721);
	text-decoration: none;
}
.sais-map__card-dir:hover,
.sais-map__card-dir:focus-visible { text-decoration: underline; }
@media (max-width: 767px) {
	.sais-map__card { top: 12px; left: 12px; right: 12px; max-width: none; padding: 14px 16px; }
}

.sais-map--error {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--sais-text-secondary, #6b7280);
	font-family: var(--sais-body-font);
	text-align: center;
}

@media (max-width: 767px) {
	.sais-map__label { font-size: 16px; max-width: 180px; }
}

/* ============================================================================
 * §18  CONTACT FORM  (SAIS Contact Form)
 * ========================================================================== */
/* Figma stacks the form 20 / 40 / 20 apart, not evenly — so the spacing is
   carried by margins (each one controllable) rather than a single flex gap. */
.sais-cform { display: flex; flex-direction: column; gap: 0; width: 100%; position: relative; }

/* The field labels are for screen readers only — the design shows placeholders.
   Do NOT rely on the theme's .screen-reader-text: when a theme doesn't define
   it (block themes often don't) all three labels render as visible text between
   the fields and the form falls apart. Scoped so it cannot fight the theme's. */
.sais-cform .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Spacing hangs off the field wrappers, never off input-to-input adjacency:
   the screen-reader <label> sits between the inputs, so an `input + input`
   selector silently matches nothing and the gaps collapse to zero. */
.sais-cform__field + .sais-cform__field { margin-top: 15px; }              /* Figma 20 */
.sais-cform__field + .sais-cform__field--message { margin-top: 31px; }     /* Figma 40 */
.sais-cform__submit { margin-top: 15px; }                                  /* Figma 20 */
.sais-cform__field { display: flex; flex-direction: column; }
.sais-cform__notice   { margin-bottom: 15px; }
.sais-cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sais-cform__input,
.sais-cform__textarea {
	width: 100%;
	background: #ffffff;
	border: 1px solid var(--sais-blue, #299eff);
	font-family: var(--sais-body-font);
	font-size: var(--e-global-typography-saisbody-font-size);
	line-height: 1.6;
	color: var(--sais-primary, #1a3765);
	padding: 10px 21px;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sais-cform__input { height: 46px; border-radius: 80px; }
.sais-cform__textarea { height: 261px; border-radius: 20px 20px 80px 20px; resize: vertical; padding-top: 14px; }

.sais-cform__input:focus,
.sais-cform__textarea:focus {
	outline: none;
	border-color: var(--sais-blue-text, #1e6fd0);
	box-shadow: 0 0 0 3px rgba(41, 158, 255, 0.18);
}

.sais-cform__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;      /* Figma button 60 high -> 46 at page scale */
	padding: 9px 18px;     /* Figma 12/24 -> 9/18; keeps the box at 46 */
	border: 0;
	border-radius: 100px;
	background: var(--sais-orange, #f47721);
	color: #ffffff;
	font-family: var(--sais-heading-font);
	font-size: 17px;
	letter-spacing: 0.44px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.sais-cform__submit:hover { transform: translateY(-1px); }

.sais-cform__notice {
	margin: 0 0 15px;
	padding: 12px 18px;
	border-radius: 12px;
	font-family: var(--sais-body-font);
	font-size: 15px;
	line-height: 1.5;
}
.sais-cform__notice--ok  { background: #eaf7ee; color: #1c6b34; }
.sais-cform__notice--err { background: #fdecea; color: #a3271c; }


/* ============================================================================
   19. SPEC TABLE  (.sais-spec)
   Education pages: knowledge modules, practical modules, important dates and
   the work-experience lists are all this one table.
   Figma (1920 frame): columns 655 / 398 / 398 in a 1465 table, rows 120 apart,
   row text 30px navy, headings 20px orange over an 80px rule, 1px #299eff
   dividers spanning the full width.
   ========================================================================== */

.sais-spec {
	--sais-spec-c1: 39.4%;   /* Figma slot 577 of 1465 */
	--sais-spec-c2: 27.2%;
	--sais-spec-rule-w: 62px;
	--sais-spec-rule-gap: 23px;
	width: 100%;
}

/* Fill the container even when the parent flex container uses align-items:center
   (Elementor's container "Align: Center"). Without this the widget wrapper is a
   content-sized flex item, so the table is never truly full width AND it shrinks
   whenever the row font size changes (smaller text -> narrower content -> narrower
   table). Forcing the wrapper to 100% breaks that font-to-width dependency. */
.elementor-widget-sais-spec-table,
.elementor-widget-sais-spec-table > .elementor-widget-container { width: 100%; }

.sais-spec *, .sais-spec *::before, .sais-spec *::after { box-sizing: border-box; }

.sais-spec__head { margin-bottom: 45px; }   /* Figma 58 */

.sais-spec__head,
.sais-spec__row {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
}

.sais-spec__head-cell,
.sais-spec__cell {
	min-width: 0;
	flex: 0 0 var(--sais-spec-c2);
}

/* The first column is the wide one; the numeric columns share the remainder. */
.sais-spec__head-cell:first-child,
.sais-spec__cell--1 {
	flex: 0 0 var(--sais-spec-c1);
	padding-right: 24px;
}

.sais-spec--cols-1 .sais-spec__head-cell:first-child,
.sais-spec--cols-1 .sais-spec__cell--1 { flex: 1 1 auto; padding-right: 0; }

/* Two-column (e.g. Category + Entry Criteria) tables. The numeric column widths
   are tuned for the 3-column module tables, so in a 2-column table the second
   column would otherwise sit at the narrow numeric slot and leave a large gap on
   the right. Here it fills the remaining width instead, and rows top-align so the
   short first-column label lines up with the first line of the wrapped criteria.
   (Both are overridable by the vertical-alignment control at higher specificity.) */
.sais-spec--cols-2 .sais-spec__cell--num,
.sais-spec--cols-2 .sais-spec__head-cell:not(:first-child) {
	flex: 1 1 auto;
}
.sais-spec--cols-2 .sais-spec__row { align-items: flex-start; }

.sais-spec__head-cell {
	display: flex;
	align-items: center;
	gap: var(--sais-spec-rule-gap);
}

.sais-spec__head-rule {
	display: block;
	flex: 0 0 auto;
	width: var(--sais-spec-rule-w);
	height: 1px;
	background-color: #f47721;
}

.sais-spec__head-label {
	font-family: var(--sais-heading-font);
	font-size: 15px;            /* Figma 20 */
	line-height: 1.4;
	letter-spacing: 0.2em;      /* Figma 20% tracking */
	color: var(--sais-orange);
	white-space: nowrap;
}

.sais-spec__row {
	border-bottom: 1px solid var(--sais-blue);
	min-height: 92px;           /* Figma 120 */
	padding: 10px 0;
}

/* Optional rules top and bottom, both control-driven. */
.sais-spec-top--yes .sais-spec__row:first-child { border-top: 1px solid var(--sais-blue); }
/* body-scoped so it beats the divider_width control default (which Elementor emits
   at .elementor-element-XXXX specificity); the --bottom--yes rule after it still
   wins when the last divider is turned on. */
body .sais-spec__row:last-child { border-bottom-width: 0; }
.sais-spec-bottom--yes .sais-spec__row:last-child { border-bottom-width: 1px; }

.sais-spec__cell {
	font-family: var(--sais-heading-font);
	font-size: 23px;            /* Figma 30 */
	line-height: 1.3;
	color: var(--sais-primary);
}

@media (max-width: 1024px) {
	.sais-spec { --sais-spec-c1: 52%; --sais-spec-c2: 24%; }
	.sais-spec__cell { font-size: 19px; }
	.sais-spec__row { min-height: 72px; }
}

@media (max-width: 767px) {
	.sais-spec__head { display: none; }
	.sais-spec__row {
		flex-wrap: wrap;
		min-height: 0;
		padding: 16px 0;
		gap: 6px 16px;
	}
	.sais-spec__cell { overflow-wrap: anywhere; }
	.sais-spec__row { flex-direction: column; align-items: stretch; gap: 0; padding: 18px 0; }
	.sais-spec__cell--1 {
		flex: none; padding: 0; font-size: 17px; margin-bottom: 10px;
		font-family: var(--sais-heading-font); color: var(--sais-primary);
	}
	/* Single-column spec tables are plain lists — on mobile they must HUG their
	   content. The per-row min-height (≈92px, set on desktop so multi-line,
	   multi-column rows align) otherwise strands a one-line item at the top of a
	   tall row with a big empty gap below it (the "broken accordion" look on the
	   FMP competency lists). !important beats Elementor's generated per-element
	   min-height. Multi-column tables keep their uniform rows. See QA 1.9.126. */
	.sais-spec--cols-1 .sais-spec__row { min-height: 0 !important; padding: 13px 0 !important; }
	.sais-spec--cols-1 .sais-spec__cell--1 { margin-bottom: 0 !important; }
	/* 2-col criteria: full-width wrapped bullet list. */
	.sais-spec--cols-2 .sais-spec__cell--num { flex: none; font-size: 15px; }
	.sais-spec--cols-2 .sais-spec__cell .crit li { padding-left: 16px; }
	/* 3-col dates, two-column aligned: semester label pinned left, date pinned
	   right, baselines aligned; date never wraps so short and long dates share one
	   clean right column. */
	.sais-spec--cols-3 .sais-spec__cell--num {
		flex: none; display: flex; justify-content: space-between; align-items: baseline;
		gap: 12px; padding: 6px 0; font-size: 15px; color: var(--sais-primary);
		white-space: nowrap;
	}
	.sais-spec--cols-3 .sais-spec__cell--num[data-h]::before {
		content: attr(data-h); flex: 0 0 auto;
		font-family: var(--sais-heading-font); font-size: 11px; letter-spacing: 0.08em;
		color: var(--sais-text-secondary); margin: 0;
	}
}




/* Section 2 exam checklist — rendered as an HTML widget so the plugin-asset
   icons load without needing a media-library attachment id. */
.sais-examlist { display: flex; flex-direction: column; gap: 15px; }
.sais-examlist__row { display: flex; align-items: center; gap: 32px; }
.sais-examlist__badge { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
	background: #fbfbfb; display: flex; align-items: center; justify-content: center; }
.sais-examlist__badge img { width: 27px; height: 27px; object-fit: contain; }
.sais-examlist__label { font-family: var(--sais-heading-font); color: #fff; font-size: 18px; line-height: 1.3; }
@media (max-width: 767px) { .sais-examlist__label { font-size: 16px; } }

/* Courses accordion custom panel content (e.g. the exemptions table). */
.sais-courses__custom { color: #2f3542; }
.sais-courses__custom p { font-family: var(--sais-body-font); font-size: 18px; line-height: 1.6; margin: 0 0 16px; }
.sais-courses__custom .exempt-head { display: flex; margin: 24px 0 8px; }
.sais-courses__custom .exempt-head span { display: flex; align-items: center; gap: 18px; font-family: var(--sais-heading-font); font-size: 15px; letter-spacing: 0.2em; color: var(--sais-orange); }
.sais-courses__custom .exempt-head .c1 { flex: 0 0 44%; }
.sais-courses__custom .exempt-head .c2 { flex: 1 1 auto; }
.sais-courses__custom .exempt-head span::before { content: ""; width: 48px; height: 1px; background: var(--sais-orange); flex: 0 0 auto; }
.sais-courses__custom .exempt-row { display: flex; align-items: flex-start; border-bottom: 1px solid var(--sais-blue); padding: 20px 0; }
.sais-courses__custom .exempt-row .subj { flex: 0 0 44%; padding-right: 20px; font-family: var(--sais-heading-font); font-size: 23px; line-height: 1.3; color: var(--sais-primary); }
.sais-courses__custom .exempt-row .crit { flex: 1 1 auto; font-family: var(--sais-body-font); font-size: 18px; line-height: 1.6; color: #2f3542; }
.sais-courses__custom .exempt-note, .sais-courses__custom .exempt-note b { color: var(--sais-orange); }
.sais-courses__custom .exempt-docs { margin-top: 32px; }
.sais-courses__custom .exempt-docs h4 { font-family: var(--sais-heading-font); color: var(--sais-orange); font-size: 22px; margin: 0 0 12px; }
.sais-courses__custom .exempt-docs ol { padding-left: 22px; }
@media (max-width: 767px) {
	.sais-courses__custom .exempt-head { display: none; }
	.sais-courses__custom .exempt-row { flex-direction: column; gap: 8px; }
	.sais-courses__custom .exempt-row .subj { flex: 0 0 auto; padding-right: 0; }
}

/* Rich criteria cells (allow_html): bullet list with orange emphasis. */
/* Rich-text (WYSIWYG) cell content: the editor wraps text in <p> and can add
   lists — reset default margins so it sits cleanly in a cell, and give lists
   sensible spacing. (The .crit rules below still style legacy criteria markup.) */
.sais-spec__cell > p { margin: 0; }
.sais-spec__cell > p + p { margin-top: 8px; }
.sais-spec__cell ul:not(.crit),
.sais-spec__cell ol:not(.crit) { margin: 0; padding-left: 20px; }
.sais-spec__cell ul:not(.crit) li,
.sais-spec__cell ol:not(.crit) li { margin-bottom: var(--sais-crit-gap, 4px); }
.sais-spec__cell ul:not(.crit) li:last-child,
.sais-spec__cell ol:not(.crit) li:last-child { margin-bottom: 0; }
/* When the whole list item is bolded, bold its number/bullet too — the ::marker
   inherits weight from the <li>, not from the inner <strong>, so it would
   otherwise stay regular while the text is bold. Scoped to fully-bold items
   (:has(> strong)) so plain lists keep normal-weight markers. */
.sais-spec__cell ul:not(.crit) li:has(> strong)::marker,
.sais-spec__cell ul:not(.crit) li:has(> b)::marker,
.sais-spec__cell ol:not(.crit) li:has(> strong)::marker,
.sais-spec__cell ol:not(.crit) li:has(> b)::marker { font-weight: 700; }
.sais-spec__cell a { color: var(--sais-blue-text, #1e6fd0); }

.sais-spec__cell .crit { margin: 0; padding: 0; list-style: none; }
.sais-spec__cell .crit li { position: relative; padding-left: 18px; margin-bottom: var(--sais-crit-gap, 6px); }
.sais-spec__cell .crit li::before { content: "\2022"; position: absolute; left: 0; color: currentColor; }
.sais-spec__cell .crit .and { color: var(--sais-orange); display: block; margin: 2px 0 var(--sais-crit-gap, 6px); }
.sais-spec__cell .crit ol { margin: var(--sais-crit-gap, 4px) 0 0; padding-left: 20px; }
.sais-spec__cell .crit ol li { color: var(--sais-orange); padding-left: 0; margin-bottom: var(--sais-crit-gap, 4px); }
.sais-spec__cell .crit ol li::before { content: none; }

/* ============================================================================
   20. COURSES ACCORDION  (.sais-courses)
   Education "Course Information": navy section of collapsible course rows;
   each expands to a light panel with study-unit cards and a semester table.
   Figma (1920 frame): heading 64, intro 24, group 48, row 30, cards r20.
   ========================================================================== */

.sais-courses {
	background-color: #1d427b;
	padding: 106px 0;
	width: 100%;
}
.sais-courses *, .sais-courses *::before, .sais-courses *::after { box-sizing: border-box; }

.sais-courses__inner {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 20px;
}

.sais-courses__heading {
	font-family: var(--sais-heading-font);
	font-weight: 400;
	color: var(--sais-orange);
	font-size: 49px;               /* Figma 64 */
	line-height: 1.2;
	margin: 0 0 29px;
	text-align: center;
}

.sais-courses__intro {
	font-family: var(--sais-body-font);
	color: #fff;
	font-size: 18px;           /* Figma 24 */
	line-height: 1.6;
	margin: 0 auto 69px;
	max-width: 82%;
	text-align: center;
}

.sais-courses__group { margin-top: 62px; }
.sais-courses__group:first-of-type { margin-top: 0; }
/* Figma alternates the group label colour: Courses orange, Exemptions blue. */
.sais-courses__group:nth-of-type(2n) .sais-courses__group-label { color: var(--sais-blue); }

.sais-courses__group-label {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: 37px;           /* Figma 48 */
	line-height: 1.2;
	margin: 0 0 31px;
}

/* --- Row (accordion header) --- */
/* Figma spaces the rows out (pitch ≈ row height + a navy gap after the divider);
   without this the rows read too dense against the design. */
/* No inter-item margin when closed: that margin sat below each row's divider and
   made the divider closer to the title above it than below it. With margin 0 and
   symmetric row padding, the divider is centred between titles. Open items get the
   separation back so an expanded panel isn't flush against the next row. */
.sais-courses__item {
	border: 0;
	margin-bottom: 0;
	/* When JS scrolls an opened item to the top (scrollIntoView), leave room for
	   the sticky header + a little breathing space. --sais-header-h is measured by
	   the mobile-nav script; 90px is a safe fallback. */
	scroll-margin-top: calc(var(--sais-header-h, 90px) + 20px);
}
.sais-courses__item.is-open { margin-bottom: 16px; }
.sais-courses__item:last-child { margin-bottom: 0; }
/* Heading wrapper for the accordion trigger (ARIA APG). display:contents keeps
   it layout-neutral so the button still lays out exactly as before. */
.sais-courses__rowhead { display: contents; margin: 0; }

.sais-courses__row {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--sais-blue);
	/* Symmetric padding keeps the divider centred between titles (was 12px, which
	   with the old item margin made the spacing uneven above vs below the line). */
	padding: 20px 0;
	min-height: 58px;
	cursor: pointer;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	color: inherit;
	font: inherit;
}

/* The row is a <button>, and the Elementor global Kit rounds every button to
   100px (.elementor-kit-NN button — specificity 0,1,1). This 2-class rule
   (0,2,0) beats it so the row's bottom border reads as a straight divider, per
   Figma, instead of curving up at the ends. */
.sais-courses .sais-courses__row { border-radius: 0; }

.sais-courses__bullet {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--sais-orange);
}

.sais-courses__row-title {
	flex: 1 1 auto;
	min-width: 0;
	/* The row is a <button>, which the theme/Kit sets to white-space:nowrap;
	   the title inherits it and long titles overflow (cut off on mobile).
	   Force normal wrapping. */
	white-space: normal;
	overflow-wrap: anywhere;
	font-family: var(--sais-heading-font);
	color: #fff;
	font-size: 23px;             /* Figma 30 */
	line-height: 1.3;
}

/* + / - toggle drawn in CSS so it needs no icon asset. */
.sais-courses__toggle {
	flex: 0 0 auto;
	position: relative;
	width: 17px;
	height: 17px;
}
.sais-courses__toggle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 42%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--sais-orange);
	border-bottom: 2px solid var(--sais-orange);
	transform: translate(-50%, -50%) rotate(45deg);
	transform-origin: center;
	transition: transform 0.25s ease;
}
/* Open row title goes orange by default — set in base CSS, not only via the
   control, so it holds even if Elementor emits no generated rule. */
.sais-courses__item.is-open .sais-courses__row-title { color: var(--sais-orange); }
.sais-courses__item.is-open .sais-courses__toggle::before {
	top: 58%;
	transform: translate(-50%, -50%) rotate(-135deg);
}

.sais-courses__row:focus-visible {
	outline: 2px solid var(--sais-orange);
	outline-offset: 3px;
}
/* The active theme's reset.css gives every <button> a pink hover background
   (button:hover { background:#cc3366 }). Neutralise it and use an orange row
   title as the hover affordance, matching the open state. */
.sais-courses__row:hover,
.sais-courses__row:focus {
	background: transparent;
}
.sais-courses__row:hover .sais-courses__row-title {
	color: var(--sais-orange);
}

/* --- Panel --- */
.sais-courses__panel {
	background-color: var(--sais-surface);
	border-radius: 0 0 15px 15px;
	overflow: hidden;
	transition: height 0.32s ease;
}
.sais-courses__panel[hidden] { display: none; }
.sais-courses__panel-inner { padding: 45px 42px; }

/* Optional heading shown at the top of an open panel (per-row control). */
.sais-courses__panel-heading {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: 28px;
	line-height: 1.2;
	margin: 0 0 14px;
}

.sais-courses__panel-intro {
	font-family: var(--sais-body-font);
	color: #2f3542;
	font-size: 18px;
	line-height: 1.6;
	margin: 0 0 31px;
	max-width: 100%;
}

/* --- Study-unit cards: a 4-per-view slider with dot navigation --- */
.sais-courses__cards {
	--sais-cu-pv: 4;              /* cards per view (desktop) */
	--sais-cu-gap: 21px;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sais-cu-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 24px;
}
.sais-courses__cards::-webkit-scrollbar { display: none; }
.sais-courses__swipe-hint { display: none; }
.sais-courses__cards-wrap { position: relative; }
.sais-courses__card {
	flex: 0 0 calc((100% - (var(--sais-cu-pv) - 1) * var(--sais-cu-gap)) / var(--sais-cu-pv));
	scroll-snap-align: start;
	background-color: #fff;
	border-radius: 15px;
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;          /* Figma centres the icon, title and subtitle */
	justify-content: flex-start;  /* top-align so every card's icon + title line up across the row */
	text-align: center;
	min-height: 170px;            /* modest floor; the flex row still equalises all cards to the tallest */
}

/* Dot navigation (built by sais-courses.js). Panels are light, so dots are
   navy-grey with an orange active state. */
.sais-courses__dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 44px;
}
.sais-courses__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #cdd5e0;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.sais-courses__dot:hover,
.sais-courses__dot:focus { background: #9aa7bd; outline: none; }
.sais-courses__dot.is-active { background: var(--sais-orange); transform: scale(1.15); }
.sais-courses__card-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--sais-orange);
	margin-bottom: 22px;
}
.sais-courses__card-num {
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: var(--sais-heading-font);
	font-size: 17px;
	line-height: 1;
}
.sais-courses__card-icon svg { width: 100%; height: 100%; fill: currentColor; }
.sais-courses__card-icon img { width: 100%; height: 100%; object-fit: contain; }
.sais-courses__card-title {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: 20px;      /* Figma 26 */
	line-height: 1.2;
	margin-bottom: 9px;
}
.sais-courses__card-sub {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary);
	font-size: 14px;        /* Figma 18 */
	line-height: 1.4;
}

/* --- Dates table (same shape as the spec table) --- */
.sais-courses__dates { --c1: 44.7%; --c2: 27.2%; }
.sais-courses__dates-head,
.sais-courses__dates-row { display: flex; align-items: center; width: 100%; }
.sais-courses__dates-hcell { display: flex; align-items: center; gap: 23px; }
.sais-courses__dates-hcell--1 { flex: 0 0 var(--c1); }
.sais-courses__dates-hcell:not(.sais-courses__dates-hcell--1) { flex: 0 0 var(--c2); }
.sais-courses__dates-rule { flex: 0 0 auto; width: 62px; height: 1px; background-color: var(--sais-orange); }
.sais-courses__dates-row {
	border-bottom: 1px solid var(--sais-blue);
	min-height: 92px;
	padding: 8px 0;
}
.sais-courses__dates-head { margin-bottom: 15px; }
.sais-courses__dates-label {
	/* Fill the header cell after the orange rule. (Was flex:0 0 var(--c1); but as
	   a child of the cell that % resolved against the cell, not the row, leaving
	   too little width so "1ST SEMESTER" wrapped to two lines.) */
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: 15px;
	letter-spacing: 0.2em;
}
.sais-courses__dates-sem {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sais-heading-font);
	color: var(--sais-orange);
	font-size: 15px;
	letter-spacing: 0.2em;
}
.sais-courses__dates-cell {
	flex: 0 0 var(--c2);
	font-family: var(--sais-heading-font);
	color: var(--sais-primary);
	font-size: 23px;
	line-height: 1.3;
}
.sais-courses__dates-cell--1 { flex: 0 0 var(--c1); padding-right: 20px; }
.sais-courses__dates-row.is-exam .sais-courses__dates-cell { color: var(--sais-orange); }

@media (max-width: 1024px) {
	.sais-courses__cards { --sais-cu-pv: 2; }
	.sais-courses__heading { font-size: 34px; }
	.sais-courses__group-label { font-size: 30px; }
	.sais-courses__row-title { font-size: 20px; }
}
@media (max-width: 767px) {
	/* Study units become a swipeable slider to save vertical space — a long
	   course (15 units) would otherwise be a very tall stack on a phone.
	   A right-edge fade cues that there is more to swipe. */
	.sais-courses__cards-wrap { position: relative; }
	.sais-courses__cards-wrap::after {
		content: "";
		position: absolute;
		top: 0; right: -18px; bottom: 14px;
		width: 40px;
		background: linear-gradient(to right, rgba(247,248,250,0), var(--sais-surface));
		pointer-events: none;
	}
	.sais-courses__cards-wrap.is-end::after { opacity: 0; transition: opacity .2s; }
	.sais-courses__cards {
		--sais-cu-pv: 1;              /* one full-width card per view on phones */
		--sais-cu-gap: 14px;
		scroll-padding-left: 18px;
		margin-inline: -18px;         /* bleed to the panel edges */
		padding: 4px 18px 14px;
	}
	/* Swipe hint pill */
	.sais-courses__swipe-hint {
		display: none;
		font-family: var(--sais-body-font);
		font-size: 13px;
		color: var(--sais-text-secondary);
		margin: -6px 0 10px;
	}
	.sais-courses__swipe-hint::before { content: "\2190\2192  "; }
	.sais-courses__swipe-hint { display: block; }
	.sais-courses__intro, .sais-courses__panel-intro { max-width: 100%; }
	.sais-courses__panel-inner { padding: 24px 18px; }
	/* Each milestone becomes a tidy stacked card: title, then a label -> value
	   row per semester, so the values line up and read cleanly on a phone. */
	.sais-courses__dates-head { display: none; }
	.sais-courses__dates-row {
		flex-direction: column; align-items: stretch; flex-wrap: nowrap;
		min-height: 0; gap: 0; padding: 16px 0;
	}
	.sais-courses__dates-cell--1 {
		flex: none; padding: 0; margin-bottom: 10px;
		font-family: var(--sais-heading-font); font-size: 17px; color: var(--sais-primary);
	}
	/* Two-column aligned: semester label pinned left, date pinned right, baselines
	   aligned; the date never wraps so short and long dates share one clean right
	   column. */
	.sais-courses__dates-cell[data-h] {
		flex: none; display: flex; justify-content: space-between; align-items: baseline;
		gap: 12px; padding: 6px 0; font-size: 15px; color: var(--sais-primary);
		white-space: nowrap;
	}
	.sais-courses__dates-cell[data-h]::before {
		content: attr(data-h); flex: 0 0 auto;
		font-family: var(--sais-heading-font); font-size: 11px; letter-spacing: 0.08em;
		color: var(--sais-text-secondary); margin: 0;
	}
	.sais-courses__dates-row.is-exam .sais-courses__dates-cell[data-h]::before { color: var(--sais-orange); }
	.sais-courses__row-title { font-size: 18px; }
	/* Tighten the generous desktop rhythm for a phone — the 106px section pad,
	   69px card/intro margins and 62px group gaps leave huge dead space at 375. */
	.sais-courses { padding: 52px 0; }
	.sais-courses__heading { margin-bottom: 20px; }
	.sais-courses__intro { margin-bottom: 34px; }
	.sais-courses__group { margin-top: 40px; }
	.sais-courses__group-label { margin-bottom: 18px; }
	.sais-courses__panel-intro { margin-bottom: 20px; }
	.sais-courses__cards { margin-bottom: 28px; }
}


/* Responsive robustness: content-bearing labels/buttons keep nowrap on desktop
   (for the pill look) but wrap on mobile so a long label never breaks the row. */
@media (max-width: 767px) {
	.sais-tag,
	.sais-membership__card-btn,
	.sais-feestable__cat-label,
	.sais-desig__btn,
	.sais-feestable__price { white-space: normal; }
	/* Pill buttons: allow them to be full-width and centre their wrapped text. */
	.sais-membership__card-btn,
	.sais-desig__btn { text-align: center; }
}


/* ============================================================================
   MOBILE DESIGN SYSTEM  (<=767px) — one consistent scale across all widgets.
   ========================================================================== */
@media (max-width: 767px) {
	/* Media caps: feature/hero images become a band, not a full screen. */
	.sais-media-cap img,
	.sais-card__media img,
	.sais-featured__media img,
	.sais-testimonial__photo img {
		max-height: var(--sais-media-cap-m);
		object-fit: cover;
		width: 100%;
	}
	/* News media is a fixed-height card (min-height 340) whose image is absolutely
	   positioned to fill it — the shared media cap was shrinking the image to a
	   220px band and leaving an empty strip below. Let it stretch to fill instead. */
	.sais-news__media img { height: 100% !important; max-height: none !important; }
	.sais-media-cap .elementor-widget-container,
	.sais-media-cap img { max-height: var(--sais-media-cap-m); }

	/* Consistent section rhythm for SAIS sections that opt in. */
	.sais-section-pad {
		padding-top: var(--sais-section-pad-m) !important;
		padding-bottom: var(--sais-section-pad-m) !important;
	}
}

/* ============================================================================
   QA 1.9.78 — verified fixes from the full-site audit.
   ========================================================================== */

/* (i) The active theme reset.css sets button:hover{background:#cc3366} (pink) on
   EVERY <button>. A class+pseudo selector (0,2,0) out-specifies that element-level
   reset (0,1,1), so restoring each SAIS button's resting background on hover kills
   the pink flash. (The accordion row is handled in §20 above.) */
.sais-cform__submit:hover        { background: var(--sais-orange); }
.sais-doclib__nav-toggle:hover,
.sais-doclib__nav-toggle:focus   { background: var(--sais-white); }
.sais-news__dot:hover            { background: #cfd6e4; }
.sais-testimonials__dot:hover    { background: #d9dde3; }

/* (j) WCAG AA contrast: #299eff (--sais-blue) as TEXT on white is only ~2.8:1.
   Use the project's AA-safe blue (--sais-blue-text #1e6fd0, already a token) for
   text/labels; --sais-blue stays for decorative fills. */
.sais-examgrid__price            { color: var(--sais-blue-text); }
.sais-desig__btn                 { color: var(--sais-blue-text); }

/* (f) Document-library cards fill the single-column width on tablet/mobile
   instead of keeping the desktop 94.07% (which left a ragged right gutter). */
@media (max-width: 1024px) {
	.sais-doclib__doc { width: 100%; }
}

/* (f) Fees CTA reduces its 90px/40px desktop padding on phones, matching the
   rhythm every other section already uses at <=767px.
   (Mobile padding is governed by the widget's box_padding mobile_default 48/24;
   the former base override here was dead code and has been removed.) */

/* (f) Fee-table category row: the VAT note (margin-left:auto + nowrap) overflowed
   its narrow column across the whole tablet range because the wrap only kicked in
   at <=767px. Wrap the row and let the VAT note take its own full-width line from
   tablet down, so it never pushes past the viewport (no horizontal page scroll). */
@media (max-width: 1024px) {
	.sais-feestable__cat { flex-wrap: wrap; gap: 12px; }
	.sais-feestable__vat { margin-left: 0; width: 100%; white-space: normal; }
}

/* (c) Spec-table tablet/mobile column + row overrides must beat Elementor's
   per-instance generated desktop rule (.elementor-element-XXXX .sais-spec, 0,2,0).
   Scoping under body raises these to (0,2,1) so the responsive narrowing wins —
   e.g. table 2's long milestone names get 52% col 1 on tablet, not 39.4%. */
@media (max-width: 1024px) {
	body .sais-spec { --sais-spec-c1: 52%; --sais-spec-c2: 24%; }
	body .sais-spec__row { min-height: 72px; }        /* beats the row_min_height 92px control default at tablet */
}
@media (max-width: 767px) {
	body .sais-spec__row { min-height: 0; padding-top: 18px; padding-bottom: 18px; }  /* beats row_pad 10px default */
}

/* (j) Keyboard focus visibility for the Designations card + modal buttons,
   which were omitted from the shared focus-visible group. */
.sais-desig__btn:focus-visible,
.sais-desig__modal-btn:focus-visible {
	outline: 2px solid var(--sais-orange);
	outline-offset: 3px;
}

/* ============================================================================
   SINGLE-POST (NEWS) — shortcode-driven title + related news grid.
   ========================================================================== */
.sais-post-title {
	margin: 0; color: #fff; text-align: center;
	font-family: var(--sais-heading-font); font-weight: 400;
	font-size: 56px; line-height: 1.15;
}
@media (max-width: 767px) { .sais-post-title { font-size: 32px; } }

.sais-related { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.sais-related__head { font-family: var(--sais-heading-font); color: var(--sais-primary); font-size: 32px; margin: 0 0 28px; }
.sais-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sais-related__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e9f0; border-radius: 16px; overflow: hidden; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.sais-related__card:hover { box-shadow: 0 12px 30px rgba(26,55,101,.12); transform: translateY(-2px); }
.sais-related__media { display: block; height: 180px; background: #dbe4f1 center center / cover no-repeat; }
.sais-related__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.sais-related__date { font-family: var(--sais-body-font); color: var(--sais-text-secondary); font-size: 13px; }
.sais-related__title { font-family: var(--sais-heading-font); color: var(--sais-primary); font-size: 19px; line-height: 1.3; }
@media (max-width: 1024px) { .sais-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sais-related__grid { grid-template-columns: 1fr; } }

/* ============================================================
   GLOBAL FONT BINDING — single source of truth = Site Settings > Global Fonts.

   HYBRID MODEL (globals as default, per-element still editable):
   • Elementor Heading / Text Editor / Button widgets get their DEFAULT size from
     the low-specificity tag rules just below (h1..h6.elementor-heading-title,
     .elementor-widget-text-editor, .elementor-button). These read the globals via
     CSS vars — so changing a global updates every default in one place — but they
     are deliberately kept BELOW Elementor's per-element control specificity
     (0,2,0) and use NO !important. Result: the global is the default, yet the
     per-element Typography control overrides it natively. Elements are NOT linked
     to the global (no __globals__), because a link makes Elementor ignore the
     per-element Size (that was why "typography controls didn't work").
   • SAIS custom widgets / theme post title / nav menus render their own markup
     with no Elementor typography control, so they read the globals through the
     CSS vars below (with !important, since nothing competes there). Nothing is
     hardcoded — every value is a global var.
   Roles: saish1 Page Title · saish2 Section · saish3 Sub-heading · saish4 Card
   title · saisbody Body · saissmall Small · saiseyebrow Eyebrow · saisbutton.
   ============================================================ */
/* --- Elementor widget DEFAULTS come from the SYSTEM globals that Elementor
   auto-applies at (0,2,0): every heading → Primary, every Text Editor → Text,
   every button → Accent. Those three globals are set (Site Settings > Global
   Fonts) to the design tokens — Primary = section-heading (Batica), Text = body
   (Givonic 14), Accent = button (Batica 15) — so the DEFAULT is correct AND the
   per-element Typography control overrides it natively (both live at 0,2,0, and
   the per-element rule is emitted later). That is why there is deliberately NO
   generic heading / text / button rule here: any such rule would only re-break
   the per-element control (which is exactly what was happening before).

   The two role-tagged DISPLAY styles (page-hero title .sais-hd-hero → saish1,
   eyebrow label .sais-hd-eyebrow → saiseyebrow) get their default from the
   compound selector below. Because .sais-hd-hero sits on the SAME element as
   .elementor-widget-heading, the selector is (0,3,0) — it beats Elementor's
   Primary default (0,2,0) with NO !important, yet still loses to the per-element
   Typography control (0,4,0), so these stay editable too. Restyle site-wide by
   editing the saish1 / saiseyebrow globals. --- */
.sais-hd-hero.elementor-widget-heading .elementor-heading-title {
	font-family: var(--e-global-typography-saish1-font-family);
	font-size: var(--e-global-typography-saish1-font-size);
	font-weight: var(--e-global-typography-saish1-font-weight);
	line-height: var(--e-global-typography-saish1-line-height);
}
.sais-hd-eyebrow.elementor-widget-heading .elementor-heading-title {
	font-family: var(--e-global-typography-saiseyebrow-font-family);
	font-size: var(--e-global-typography-saiseyebrow-font-size);
	font-weight: var(--e-global-typography-saiseyebrow-font-weight);
	line-height: var(--e-global-typography-saiseyebrow-line-height);
	letter-spacing: var(--e-global-typography-saiseyebrow-letter-spacing);
	text-transform: var(--e-global-typography-saiseyebrow-text-transform);
}
/* --- H1 / Page Title (theme post title + custom hero title) --- */
.sais-post-title,
.sais-bm__title {
	font-family: var(--e-global-typography-saish1-font-family);
	font-size: var(--e-global-typography-saish1-font-size);
	font-weight: var(--e-global-typography-saish1-font-weight);
	line-height: var(--e-global-typography-saish1-line-height);
}
/* --- H2 / Section Heading (custom widget heads) --- */
.sais-desig__head, .sais-membership__head,
.sais-news__header, .sais-related__head, .sais-spec__head, .sais-fees__title {
	font-family: var(--e-global-typography-saish2-font-family);
	font-size: var(--e-global-typography-saish2-font-size);
	font-weight: var(--e-global-typography-saish2-font-weight);
	line-height: var(--e-global-typography-saish2-line-height);
}
/* --- H3 / Sub-heading (custom card + item titles) --- */
.sais-card__title, .sais-desig__title, .sais-examgrid__title, .sais-membership__title,
.sais-memcat__title, .sais-news__title, .sais-related__title, .sais-sdp__title,
/* Fees price removed from this H3 (36px) binding — Figma has it at the table's
   24px navy Batica (its base rule), equal to the row label. */
.sais-desig__code, .sais-bm__code, .sais-bm__price, .sais-examgrid__price {
	font-family: var(--e-global-typography-saish3-font-family);
	font-size: var(--e-global-typography-saish3-font-size);
	font-weight: var(--e-global-typography-saish3-font-weight);
	line-height: var(--e-global-typography-saish3-line-height);
}
/* --- H4 / small titles + names (custom) --- */
/* Designation name removed from this H4 (30px Batica) binding — Figma has it as
   small grey Givonic body (its base rule: 16px, --sais-text-secondary). */
.sais-examgrid__name, .sais-sdp__name, .sais-testimonial__name,
.sais-desig__subtitle, .sais-news__subtitle {
	font-family: var(--e-global-typography-saish4-font-family);
	font-size: var(--e-global-typography-saish4-font-size);
	font-weight: var(--e-global-typography-saish4-font-weight);
	line-height: var(--e-global-typography-saish4-line-height);
}
/* --- Body (custom widget copy) --- */
.sais-bm__desc, .sais-card__text, .sais-desig__desc,
.sais-fees__desc, .sais-membership__desc, .sais-memcat__note, .sais-sdp__note,
.sais-examgrid__note, .sais-bm__note, .sais-testimonial__quote, .sais-cform__textarea {
	font-family: var(--e-global-typography-saisbody-font-family);
	font-size: var(--e-global-typography-saisbody-font-size);
	font-weight: var(--e-global-typography-saisbody-font-weight);
	line-height: var(--e-global-typography-saisbody-line-height);
}
/* --- Body Small (custom) --- */
/* .sais-feestable__sublabel removed from this binding — it has its own base rule
   (17px body secondary) and a per-element "Sub-label typography" control, which
   the global binding was overriding so the control appeared to do nothing. */
.sais-bm__period, .sais-related__date {
	font-family: var(--e-global-typography-saissmall-font-family);
	font-size: var(--e-global-typography-saissmall-font-size);
	line-height: var(--e-global-typography-saissmall-line-height);
}
/* --- Eyebrow / label (custom) --- */
/* Fees row label removed from this eyebrow (12px) binding — the row label is a
   24px navy Batica value (its base rule), equal to the price, not an eyebrow. */
.sais-examlist__label, .sais-feestable__label,
.sais-map__label, .sais-sdp__label, .sais-examlist__badge, .sais-bm__eyebrow,
.sais-news__tag, .sais-spec__head-label {
	font-family: var(--e-global-typography-saiseyebrow-font-family);
	font-size: var(--e-global-typography-saiseyebrow-font-size);
	font-weight: var(--e-global-typography-saiseyebrow-font-weight);
	line-height: var(--e-global-typography-saiseyebrow-line-height);
	letter-spacing: var(--e-global-typography-saiseyebrow-letter-spacing);
	text-transform: var(--e-global-typography-saiseyebrow-text-transform);
}
/* --- Buttons (custom widget buttons) --- */
.sais-bm__btn, .sais-desig__btn, .sais-desig__modal-btn, .sais-fees__btn,
.sais-testimonials__btn, .sais-cform__submit, .sais-mnav__btn {
	font-family: var(--e-global-typography-saisbutton-font-family);
	font-size: var(--e-global-typography-saisbutton-font-size);
	font-weight: var(--e-global-typography-saisbutton-font-weight);
	line-height: var(--e-global-typography-saisbutton-line-height);
}
/* Footer links & text follow Body (no !important; the compound selectors below
   out-rank the theme/menu defaults, and a per-widget typography control still
   overrides them). */
.elementor-location-footer .elementor-widget-container a,
.elementor-location-footer .elementor-widget-container li,
.elementor-location-footer .elementor-nav-menu .elementor-item {
	font-family: var(--e-global-typography-saisbody-font-family);
	font-size: var(--e-global-typography-saissmall-font-size);
}

/* ---- FOOTER — rebuilt responsive layout (template #254). The 5-column desktop
   row (logo / Explore / Resources / Contact / Newsletter) collapses to a wrapped
   grid: logo on a full-width row, the three link/contact columns share a row, and
   the newsletter spans full width. Everything is left-aligned to one clean edge.
   Mobile (<=767, further down) narrows the link columns to a 2-up grid. This pair
   of blocks owns the entire small-screen footer — no competing rules. ---- */
@media (max-width: 1024px) {
	.elementor-location-footer > .e-con > .e-con-inner {
		flex-flow: row wrap !important;
		align-items: flex-start !important;
		gap: 34px 26px !important;
	}
	.elementor-location-footer > .e-con > .e-con-inner > .e-con {
		width: auto !important;
		max-width: none !important;
		text-align: left !important;
		align-items: flex-start !important;
		padding: 0 !important;
		border-top: 0 !important;
	}
	/* Logo and newsletter take a full row each; the three middle columns share one. */
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-797c575 { flex: 0 1 100% !important; order: 1 !important; }
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-a1ccb1a { flex: 1 1 calc(33.333% - 18px) !important; order: 2 !important; } /* Explore */
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-ab5a19b { flex: 1 1 calc(33.333% - 18px) !important; order: 3 !important; } /* Resources */
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-71f29b1 { flex: 1 1 calc(33.333% - 18px) !important; order: 4 !important; } /* Contact */
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-a87f4d3 { flex: 0 1 100% !important; order: 5 !important; } /* Newsletter */
	.elementor-location-footer .elementor-widget-theme-site-logo img { margin: 0 !important; }

	/* Column headings (first text widget in each column): orange, uppercase. */
	.elementor-location-footer .e-con > .elementor-widget-text-editor:first-child {
		color: var(--sais-orange, #f47721) !important;
		text-transform: uppercase;
		letter-spacing: 0.11em;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.elementor-location-footer .e-con > .elementor-widget-text-editor:first-child * { color: inherit !important; }

	/* Link lists: left-aligned, single column, comfortable tap spacing. */
	.elementor-location-footer .elementor-icon-list-items { display: block !important; }
	.elementor-location-footer .elementor-icon-list-item { justify-content: flex-start !important; padding: 7px 0 !important; }
	.elementor-location-footer .elementor-icon-list-item a { justify-content: flex-start !important; }

	/* Newsletter: field stacked above the button, full width, left. */
	.elementor-location-footer .elementor-widget-form .elementor-form-fields-wrapper {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-location-footer .sais-nlform { width: 100% !important; max-width: 440px !important; margin: 0 !important; }
	.elementor-location-footer .sais-nlform .elementor-field-group:not(.elementor-field-type-submit) { width: 100% !important; max-width: none !important; }
	.elementor-location-footer .sais-nlform input.elementor-field-textual { width: 100% !important; }

	/* The single decorative contact icon crowds the stack — hide it. */
	.elementor-location-footer .elementor-element-71f29b1 .elementor-widget-icon { display: none !important; }

	/* Copyright row: left-aligned, muted (override the widget's own centre align). */
	.elementor-location-footer > .e-con:last-child .e-con-inner { text-align: left !important; align-items: flex-start !important; }
	.elementor-location-footer > .e-con:last-child .elementor-widget-text-editor,
	.elementor-location-footer > .e-con:last-child .elementor-widget-text-editor .elementor-widget-container { text-align: left !important; }
	.elementor-location-footer > .e-con:last-child .elementor-widget-text-editor:first-child {
		color: var(--sais-text-secondary, #9fb0c8) !important;
		text-transform: none;
		letter-spacing: normal;
		font-weight: 400;
	}
}
/* Header main nav -> Navigation global. (0,3,0) beats the menu default; a
   per-widget nav Typography control (higher specificity) still overrides it. */
.sais-sticky-header .elementor-nav-menu--main .elementor-item {
	font-family: var(--e-global-typography-saisnav-font-family);
	font-size: var(--e-global-typography-saisnav-font-size);
	font-weight: var(--e-global-typography-saisnav-font-weight);
	line-height: var(--e-global-typography-saisnav-line-height);
}
/* With the "News" page the primary menu now has 7 top-level items. Tighten the
   desktop item padding so they all stay on one row inside the header's nav slot
   (the nav area is a fixed width; at 10px padding a 7th item wrapped to a 2nd
   line). Desktop only — the mobile popup menu is unaffected. */
@media ( min-width: 1025px ) {
	.sais-sticky-header .elementor-nav-menu--main .elementor-item {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}
/* Narrow-desktop band (just above the mobile breakpoint): the nav slot is too
   small for 7 full-size items, so shrink type + padding a touch to keep one row
   rather than let it wrap. Self-contained to this band. */
@media ( min-width: 1025px ) and ( max-width: 1149px ) {
	.sais-sticky-header .elementor-nav-menu--main .elementor-item {
		font-size: 13px !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
}

/* ============================================================
   BECOME A MEMBER — branded pricing cards (matches homepage type)
   ============================================================ */
.sais-bm { width: 100%; }
.sais-bm__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: stretch;
}
.sais-bm__card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e4e9f0;
	border-radius: 20px;
	padding: 32px 30px 30px;
	box-shadow: 0 12px 34px rgba(26, 55, 101, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sais-bm__card:hover { box-shadow: 0 18px 46px rgba(26, 55, 101, 0.12); transform: translateY(-2px); }
.sais-bm__eyebrow {
	font-family: var(--sais-body-font);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--sais-orange, #f47721);
	font-size: 12px;
	font-weight: 600;
}
.sais-bm__title {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary, #1a3765);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.3;
	margin: 12px 0 6px;
}
.sais-bm__code {
	font-family: var(--sais-body-font);
	color: var(--sais-blue-text, #1e6fd0);
	font-size: 14px;
	font-weight: 600;
}
.sais-bm__desc {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary, #6b7280);
	font-size: 14px;
	line-height: 1.6;
	margin: 14px 0 26px;
}
/* Footer (price + button) pins to the card bottom so the "Become a Member"
   buttons line up across the row — including when prices are hidden. */
.sais-bm__foot { margin-top: auto; }
.sais-bm__price {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary, #1a3765);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
}
.sais-bm__period {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary, #6b7280);
	font-size: 13px;
	font-weight: 400;
}
.sais-bm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 13px 28px;
	background: var(--sais-blue, #299eff);
	color: #ffffff;
	font-family: var(--sais-body-font);
	font-size: 15px;
	font-weight: 600;
	border-radius: 100px;
	text-decoration: none;
}
/* .sais-bm__btn:hover — handled by the UNIFIED BUTTON SYSTEM block below */
.sais-bm__note {
	max-width: 860px;
	margin: 40px auto 0;
	text-align: center;
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary, #6b7280);
	font-size: 14px;
	line-height: 1.6;
}
@media (max-width: 1024px) { .sais-bm__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sais-bm__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PREMIUM MOBILE MENU  (full-screen navy popup)
   Driven by html.sais-nav-open (set by sais-mobile-nav.js).
   ============================================================ */
/* Popup is relocated to <body> by sais-mobile-nav.js (tag .sais-mnav-popup) so
   it escapes the sticky header's containing context. Hidden on desktop. */
.sais-mnav-popup { display: none; }

/* Mobile: stop decorative arches/shapes that bleed past the page edge from
   creating horizontal scroll. `clip` (not hidden) keeps position:sticky working. */
@media (max-width: 1024px) {
	/* Horizontal-overflow guard on BODY only. It must NOT go on <html>: overflow-x
	   clip/hidden on the ROOT SCROLLER silently disables scrollTo / scrollIntoView
	   (this is what broke the accordion scroll-to-top — no JS scroll method worked,
	   only physical wheel/touch). Body clips the decorative arches' horizontal
	   spill while <html> keeps the default, JS-controllable document scroll.
	   NOTE: applying this to BODY at DESKTOP widths ALSO breaks JS scroll (overflow-x
	   clip forces overflow-y to compute to clip, so body stops scrolling and
	   window.scrollTo/scrollIntoView freeze). Keep it mobile-only; fix desktop
	   overflow at the offending element instead (see the homepage fees-CTA rule). */
	body { overflow-x: clip !important; max-width: 100% !important; }
}

/* "Hide brand shapes on mobile" toggle — added to each shape widget's Spacing
   section (prefix_class puts sais-noshapes-mob--yes on the widget wrapper). One
   rule hides every shape flavour: arches (__arc / __arch), their __bleed
   wrappers, the featured-image rainbow pattern, and the standalone Shape widget. */
@media (max-width: 767px) {
	.sais-noshapes-mob--yes [class*="__arc"],
	.sais-noshapes-mob--yes [class*="__bleed"],
	.sais-noshapes-mob--yes .sais-featured__pattern,
	.sais-noshapes-mob--yes .sais-shape,
	.sais-noshapes-mob--yes .sais-shape__img { display: none !important; }
}

/* ============================================================
   FOOTER NEWSLETTER (Elementor Form widget) — matched to Figma:
   400px blue-outlined pill input, blue placeholder, orange pill button below.
   ============================================================ */
.sais-nlform .elementor-form-fields-wrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 12px !important;
}
.sais-nlform .elementor-field-group { width: 100% !important; max-width: 400px !important; margin: 0 !important; padding: 0 !important; }
.sais-nlform .elementor-field-group.elementor-field-type-submit { width: auto !important; max-width: none !important; }
.sais-nlform input.elementor-field-textual {
	width: 100% !important;
	height: 48px !important;
	/* Figma 122:3270 — input has NO fill, sits transparent on the navy footer with a blue pill outline. */
	background: transparent !important;
	border: 1px solid #299eff !important;
	border-radius: 80px !important;
	padding: 0 28px !important;
	color: #299eff !important;
	font-family: var(--e-global-typography-saissmall-font-family);
	font-size: var(--e-global-typography-saissmall-font-size);
	box-shadow: none !important;
}
.sais-nlform input.elementor-field-textual::placeholder { color: #299eff !important; opacity: 1 !important; }
.sais-nlform .elementor-button {
	background: #f47721 !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 100px !important;
	padding: 15px 36px !important;
	font-family: var(--e-global-typography-saisbutton-font-family);
	font-size: var(--e-global-typography-saisbutton-font-size);
	letter-spacing: 0.02em;
}
/* .sais-nlform .elementor-button:hover — handled by the UNIFIED BUTTON SYSTEM block below */

/* Lock page scroll while the mobile menu is open. The JS sets body.overflow, but
   on mobile the scroll container is often <html>, so lock both. The popup keeps
   its own overflow-y:auto, so a long menu still scrolls inside the overlay. */
html.sais-nav-open,
html.sais-nav-open body {
	overflow: hidden !important;
	height: 100% !important;
	touch-action: none;
}
/* …but the overlay itself must still scroll/touch when its content overflows. */
html.sais-nav-open .sais-mnav-popup { touch-action: pan-y; }

/* Scroll reveal is driven entirely by inline styles in sais-reveal.js (a
   class-based hidden state did not reliably apply to Elementor containers in
   this theme's cascade). No CSS needed here. */

@media (max-width: 1024px) {
	/* Header bar sits above the popup so the logo + close (X) stay usable. */
	.sais-sticky-header { z-index: 100000 !important; }
	/* Hide the desktop CTA buttons in the bar — they are cloned into the popup. */
	.sais-sticky-header .elementor-widget-button { display: none !important; }

	/* Hamburger: right-aligned in its widget, WHITE on the transparent header over
	   the dark hero (legible), NAVY once the header goes solid on scroll. */
	.sais-sticky-header .elementor-widget-nav-menu > .elementor-widget-container { display: flex !important; justify-content: flex-end !important; }
	/* The bars are drawn by an inline SVG whose FILL is a fixed dark grey — set the
	   fill (not just color) so the icon is actually white on the hero. */
	/* display:flex forced so the hamburger shows even if Elementor's touch JS path
	   fails to reveal it (homepage-only crash left it hidden). DISPLAY only — a
	   hidden sticky-clone toggle stays visibility:hidden, so no duplicate appears. */
	.sais-sticky-header .elementor-menu-toggle { display: flex !important; color: #ffffff !important; margin-left: auto !important; margin-right: 0 !important; }
	/* Soft dark shadow keeps the white bars legible even over LIGHT patches of the
	   hero (e.g. the homepage cut-out's bright area) — invisible on dark areas. */
	.sais-sticky-header .elementor-menu-toggle svg { fill: #ffffff !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
	/* Navy scrolled header → keep the hamburger white (was navy for the old white header). */
	html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-menu-toggle { color: #ffffff !important; }
	html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-menu-toggle svg { fill: #ffffff !important; }

	/* When the menu is open, blend the bar into the navy popup. */
	html.sais-nav-open .sais-sticky-header { background: transparent !important; box-shadow: none !important; }
	html.sais-nav-open .sais-sticky-header .elementor-widget-theme-site-logo img { filter: brightness(0) invert(1) !important; }
	html.sais-nav-open .sais-sticky-header .elementor-menu-toggle { color: #ffffff !important; }
	html.sais-nav-open .sais-sticky-header .elementor-menu-toggle svg { fill: #ffffff !important; }
	html.sais-nav-open .elementor-menu-toggle__icon--open { display: none !important; }
	html.sais-nav-open .elementor-menu-toggle__icon--close { display: block !important; }

	/* Full-screen popup. */
	.sais-mnav-popup {
		display: flex !important;
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: linear-gradient(165deg, #12294a 0%, #0d2547 100%) !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		/* Top padding clears the absolutely-positioned logo; the menu + CTA then each
		   take margin-top:auto so the gap below the logo equals the gap above the
		   buttons (balanced, "neat"). */
		padding: clamp(92px, 25vw, 108px) 28px calc(34px + env(safe-area-inset-bottom, 0px)) !important;
		overflow-y: auto !important;
		/* Sit ABOVE the sticky header (z 100000) so its white scrolled state can
		   never paint over the menu, and nothing intercepts taps on the first
		   item. The popup carries its own logo + close (injected by the JS). */
		z-index: 100001 !important;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
		pointer-events: none;
	}
	html.sais-nav-open .sais-mnav-popup {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
	}
	/* Menu list takes the top auto-margin so the gap below the logo matches the
	   CTA's gap above the buttons (the CTA already has margin-top:auto). Two equal
	   auto-margins split the free space evenly above the menu and above the CTA. */
	/* Higher specificity (nav + ul) so it beats the "margin:0 !important" list reset
	   below — otherwise only the CTA gets margin-top:auto and the menu stays glued
	   under the logo (gap below logo 3px vs 23px above buttons). Two equal auto
	   margins now split the free space evenly: gap below logo == gap above buttons. */
	nav.sais-mnav-popup > ul.elementor-nav-menu {
		margin-top: auto !important;
		margin-bottom: 0 !important;
	}

	/* In-popup logo (top-left) + close (top-right), living in the popup's top
	   padding band. The logo is inverted to white to read on the navy overlay. */
	.sais-mnav-popup .sais-mnav__logo {
		position: absolute !important;
		top: calc(20px + env(safe-area-inset-top, 0px));
		left: 50%; transform: translateX(-50%);
		z-index: 3; line-height: 0;
	}
	.sais-mnav-popup .sais-mnav__logo img {
		height: clamp(64px, 19vw, 92px); width: auto; display: block;
		filter: brightness(0) invert(1);
	}
	.sais-mnav-popup .sais-mnav__close {
		position: absolute !important;
		top: calc(20px + env(safe-area-inset-top, 0px)); right: 28px;
		width: 48px; height: 48px; padding: 0;
		display: flex; align-items: center; justify-content: center;
		background: transparent; border: 2px solid var(--sais-orange, #f47721);
		border-radius: 10px; color: #ffffff; cursor: pointer; z-index: 3;
		transition: background 0.2s ease, color 0.2s ease;
	}
	.sais-mnav-popup .sais-mnav__close:hover,
	.sais-mnav-popup .sais-mnav__close:focus-visible {
		background: var(--sais-orange, #f47721); color: #ffffff; outline: none;
	}

	/* Reset the browser/Elementor list chrome so links sit flush-left, full width. */
	.sais-mnav-popup .elementor-nav-menu,
	.sais-mnav-popup .elementor-nav-menu ul,
	.sais-mnav-popup ul.elementor-nav-menu {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		text-align: center !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
	}
	.sais-mnav-popup .elementor-nav-menu li,
	.sais-mnav-popup .menu-item { width: 100% !important; margin: 0 !important; }
	.sais-mnav-popup .elementor-item {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		color: #ffffff !important;
		font-family: var(--e-global-typography-saisnav-font-family);
		font-size: var(--e-global-typography-saisbodylg-font-size);
		font-weight: var(--e-global-typography-saisnav-font-weight);
		line-height: 1.2;
		letter-spacing: 0.01em;
		padding: 16px 0 !important;
		margin: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
		background: transparent !important;
		text-align: center !important;
	}
	.sais-mnav-popup .elementor-nav-menu > li:last-of-type > .elementor-item { border-bottom: 0 !important; }
	.sais-mnav-popup .current-menu-item > .elementor-item,
	.sais-mnav-popup .elementor-item.elementor-item-active,
	.sais-mnav-popup .elementor-item:hover { color: var(--sais-orange, #f47721) !important; }
	/* Sub-menu toggle arrow + nested items. */
	.sais-mnav-popup .elementor-nav-menu .sub-arrow,
	.sais-mnav-popup .elementor-nav-menu .sub-arrow i { color: var(--sais-orange, #f47721) !important; }
			/* Sub-menu items are Elementor's a.elementor-sub-item (NOT .elementor-item),
		   so they were unstyled here and fell through to Elementor's dark default
		   colour — near-invisible on the navy popup. Readable light colour, clear
		   indent with a hairline, orange hover/active. */
		.sais-mnav-popup .elementor-nav-menu ul .elementor-item,
		.sais-mnav-popup .elementor-sub-item {
			display: block !important;
			position: relative;
			color: rgba(255, 255, 255, 0.72) !important;
			font-family: var(--e-global-typography-saisnav-font-family);
			/* Same size as the top-level items (user request); hierarchy is carried
			   by the lighter weight + colour, not a smaller size. !important beats
			   Elementor's own submenu font-size rule (equal specificity, later source). */
			font-size: var(--e-global-typography-saisbodylg-font-size) !important;
			font-weight: 400;
			line-height: 1.3;
			/* Equal padding to the top-level items so every row shares one rhythm. */
			padding: 16px 0 !important;
			text-align: center !important;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
			background: transparent !important;
		}
		/* Left tick removed — it doesn't read with centre-aligned items. */
		.sais-mnav-popup .elementor-sub-item::before { content: none; }
		.sais-mnav-popup .elementor-sub-item:hover,
		.sais-mnav-popup .current-menu-item > .elementor-sub-item,
		.sais-mnav-popup .elementor-sub-item.elementor-item-active {
			color: var(--sais-orange, #f47721) !important;
		}

	/* CTAs pinned to the bottom of the screen. */
	.sais-mnav-popup .sais-mnav__cta {
		margin-top: auto;
		padding-top: 30px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.sais-mnav-popup .sais-mnav__btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 54px;
		border-radius: 999px !important;
		font-family: var(--e-global-typography-saisbutton-font-family);
		font-size: var(--e-global-typography-saisbutton-font-size);
		font-weight: var(--e-global-typography-saisbutton-font-weight);
		letter-spacing: 0.01em;
		text-decoration: none !important;
		border: 0 !important;
	}
	.sais-mnav-popup .sais-mnav__btn--primary { background: var(--sais-blue, #299eff) !important; color: #ffffff !important; }
	.sais-mnav-popup .sais-mnav__btn--secondary { background: var(--sais-orange, #f47721) !important; color: #ffffff !important; }
}

/* ============================================================
   MOBILE FOOTER (phones) — one clean full-width column.
   Side-by-side link columns read ragged with these variable-length labels
   ("Financial Markets Practitioner" etc.), so on phones every section stacks
   full-width in natural order (logo, Explore, Resources, Contact, Newsletter,
   copyright) with a single even rhythm. Left-aligned throughout = one clean edge.
   ============================================================ */
@media (max-width: 767px) {
	.elementor-location-footer > .e-con > .e-con-inner {
		gap: 30px !important;
		padding-left: 26px !important;
		padding-right: 26px !important;
	}
	/* Every column full-width and stacked — overrides the tablet 3-up widths. */
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-a1ccb1a,
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-ab5a19b,
	.elementor-location-footer > .e-con > .e-con-inner > .e-con.elementor-element-71f29b1 { flex: 0 1 100% !important; }
	/* Links: single column, comfortable tap height. */
	.elementor-location-footer .elementor-icon-list-item { padding: 9px 0 !important; }
	/* Copyright gets a little extra breathing room above it. */
	.elementor-location-footer > .e-con:last-child > .e-con-inner {
		padding-left: 26px !important;
		padding-right: 26px !important;
		padding-top: 8px !important;
	}
}

/* ============================================================
   UNIFIED BUTTON SYSTEM — one shape, one motion, one hover.
   Every text button (Elementor .elementor-button + SAIS __btn classes) shares:
   pill shape, the saisbutton global font (linked separately), and an identical
   hover = subtle darken (inset tint, keeps text crisp) + 2px lift + soft shadow.
   Role colours (blue / orange / navy / outline) are preserved from each button's
   own background; the hover treatment is what's standardised. Per-element hover
   overrides were stripped from the Elementor data so nothing competes with this.
   ============================================================ */
.elementor-button,
.sais-fees__btn, .sais-bm__btn, .sais-cform__submit,
.sais-nlform .elementor-button, .sais-mnav__btn, .sais-desig__btn,
.sais-desig__modal-btn {
	border-radius: 100px;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease,
	            background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Elementor CTAs had their per-element padding stripped — give them one rhythm. */
.elementor-widget-button .elementor-button { padding: 15px 34px; }

/* Uniform hover for SOLID (filled) buttons. The inset shadow tints the fill
   ~8% darker without dimming the white label; the outer shadow + lift are shared. */
.elementor-button:hover,
.sais-fees__btn:hover, .sais-bm__btn:hover, .sais-cform__submit:hover,
.sais-nlform .elementor-button:hover, .sais-mnav__btn:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08),
	            0 10px 24px rgba(26, 55, 101, 0.18);
}
/* Outline buttons (transparent) fill with their accent on hover, same lift/shadow. */
.sais-desig__btn:hover,
.sais-desig__modal-btn:hover {
	background-color: var(--sais-blue);
	border-color: var(--sais-blue);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(26, 55, 101, 0.18);
}
/* Consistent keyboard focus ring for every button. */
.elementor-button:focus-visible,
.sais-fees__btn:focus-visible, .sais-bm__btn:focus-visible, .sais-cform__submit:focus-visible,
.sais-nlform .elementor-button:focus-visible, .sais-mnav__btn:focus-visible,
.sais-desig__btn:focus-visible {
	outline: 3px solid rgba(41, 158, 255, 0.55);
	outline-offset: 2px;
}

/* ============================================================
   WIDGET TEXT — remaining sub-elements bound to globals (no hardcoded sizes).
   Sizes map to the nearest global token; families/weights follow the globals.
   Structural glyphs (modal ✕), table number cells and the contact input are
   intentionally excluded (not prose typography / handled elsewhere).
   ============================================================ */
/* Titles -> nearest heading global */
.sais-doclib__section-title {
	font-family: var(--e-global-typography-saish2-font-family);
	font-size: var(--e-global-typography-saish2-font-size);
	font-weight: var(--e-global-typography-saish2-font-weight);
}
.sais-membership__card-title, .sais-desig__modal-title, .sais-doclib__nav-title,
.sais-doclib__doc-title, .sais-feestable__tc-heading {
	font-family: var(--e-global-typography-saish4-font-family);
	font-size: var(--e-global-typography-saish4-font-size);
	font-weight: var(--e-global-typography-saish4-font-weight);
}
/* Body copy -> Body Small / Body */
.sais-feestable__tc-list, .sais-doclib__nav-toggle,
.sais-doclib__nav-link, .sais-courses__card-num, .sais-desig__modal-desc,
.sais-sdp__line, .sais-sdp__value, .sais-sdp__web, .sais-feestable__vat, .sais-news__mbtn {
	font-family: var(--e-global-typography-saissmall-font-family);
	font-size: var(--e-global-typography-saissmall-font-size);
}
.sais-cform__notice, .sais-map__notice, .sais-courses__swipe-hint {
	font-family: var(--e-global-typography-saisbody-font-family);
	font-size: var(--e-global-typography-saisbody-font-size);
}
/* Link/CTA-style text -> Button token */
.sais-card__link, .sais-courses__dates-sem, .sais-membership__card-btn {
	font-family: var(--e-global-typography-saisbutton-font-family);
	font-size: var(--e-global-typography-saisbutton-font-size);
}

/* Data-table value cells -> Body Large global (last non-global sizes). The modal
   ✕ glyph (.sais-desig__modal-close) stays a fixed icon size — not typography. */
.sais-spec__cell, .sais-spec__cell--num, .sais-courses__dates-cell {
	font-family: var(--e-global-typography-saisbodylg-font-family);
	font-size: var(--e-global-typography-saisbodylg-font-size);
}
/* Row title: intentionally NOT bound to a global here — it has its own base
   rule (23px heading) and a per-element "Row title font" control. The global
   binding (equal specificity, later in source) beat that control INSIDE the
   Elementor editor, so the font control "did nothing" in the editor even though
   it worked on the published page. Same fix as the fees sub-label. 1.9.126. */
.sais-courses__custom {
	font-family: var(--e-global-typography-saissmall-font-family);
	font-size: var(--e-global-typography-saissmall-font-size);
}
/* Group label: control-only (see row-title note above) — base rule + the
   "Group label font" per-element control govern it, no competing global. */
.sais-courses__dates-label, .sais-doclib__doc-download-label, .sais-feestable__cat-label {
	font-family: var(--e-global-typography-saissmall-font-family);
	font-size: var(--e-global-typography-saissmall-font-size);
}
.sais-spec__cell-- {
	font-family: var(--e-global-typography-saisbodylg-font-family);
	font-size: var(--e-global-typography-saisbodylg-font-size);
}

/* ============================================================
   CARDS CAROUSEL CTA — the section button (e.g. "Explore the Document
   Library"). Navy pill, alignment controlled by the widget; shares the
   unified button hover (subtle darken + lift). Font from the button global.
   ============================================================ */
.sais-cards__cta-wrap { display: flex; justify-content: center; margin-top: 44px; }
.sais-cards__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sais-navy, #12294a);
	color: #ffffff;
	padding: 15px 40px;
	border-radius: 100px;
	text-decoration: none;
	font-family: var(--e-global-typography-saisbutton-font-family);
	font-size: var(--e-global-typography-saisbutton-font-size);
	font-weight: var(--e-global-typography-saisbutton-font-weight);
	line-height: var(--e-global-typography-saisbutton-line-height);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sais-cards__cta:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(26, 55, 101, 0.18);
}
.sais-cards__cta:focus-visible { outline: 3px solid rgba(41, 158, 255, 0.55); outline-offset: 2px; }

/* ============================================================
   CONTACT FORM — TWO overlapping rainbow arches per corner (Figma 150-309).
   Replaces the old single ::before/::after arches. Rendered as 4 spans inside
   .sais-cform; the Rainbow Arches controls (size/x/y/rotation) drive the FRONT
   arch of each corner, and the BACK arch is a slightly larger offset duplicate.
   All arches sit behind the form fields (which have white pill backgrounds).
   ============================================================ */
/* Retire the old single-arch pseudo-elements (the span pairs below replace them). */
.sais-arches--yes.sais-contact::before,
.sais-arches--yes.sais-contact::after { display: none; }

.sais-cform { position: relative; }
/* Every real field / button / notice sits above the decorative arches. */
.sais-cform > *:not(.sais-cform__arch) { position: relative; z-index: 1; }

.sais-cform__arch {
	position: absolute;
	z-index: 0;
	background: no-repeat center / contain url(../images/rainbow.svg);
	pointer-events: none;
}
/* --- Top-left: single crown-up arch, peeking up-left behind the name/email fields --- */
.sais-cform__arch--tl {
	width: var(--sais-tl-size, 227px); height: var(--sais-tl-size, 227px);
	top: var(--sais-tl-y, -34px); left: var(--sais-tl-x, -196px);
	transform: rotate(var(--sais-tl-rot, 180deg));
}
/* --- Bottom-right: single arch rotated so the dome faces right / opening the
   message box, tucked behind its bottom-right corner --- */
.sais-cform__arch--br {
	width: var(--sais-br-size, 271px); height: var(--sais-br-size, 271px);
	bottom: var(--sais-br-y, -40px); right: var(--sais-br-x, -150px);
	transform: rotate(var(--sais-br-rot, 270deg));
}

/* ============================================================
   MEMBER LOGIN MODAL — mirrors sais.co.za's Glue Up login popup.
   Opened by any "Member Login" button (see sais-mobile-nav.js). Auth is handed
   off to the Glue Up portal until SSO is configured; Forgot Password / Sign Up
   link straight to Glue Up.
   ============================================================ */
.sais-login { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; }
.sais-login[hidden] { display: none; }
.sais-login.is-open { opacity: 1; }
.sais-login__overlay { position: absolute; inset: 0; background: rgba(18, 30, 58, 0.6); }
.sais-login__card {
	position: relative; z-index: 1;
	width: min(520px, 92vw);
	background: #ffffff; border-radius: 24px;
	padding: 48px 52px 52px;
	box-shadow: 0 30px 80px rgba(18, 30, 58, 0.28);
	transform: translateY(-10px); transition: transform 0.25s ease;
}
.sais-login.is-open .sais-login__card { transform: none; }
.sais-login .sais-login__close {
	position: absolute; top: 20px; right: 24px;
	width: 36px; height: 36px; padding: 0;
	border: 0; background: transparent none; box-shadow: none;
	font-size: 26px; line-height: 1; color: var(--sais-primary, #1a3765); cursor: pointer;
	transition: transform 0.15s ease;
	-webkit-appearance: none; appearance: none;
}
.sais-login__close:hover { transform: scale(1.12); }
/* Title uses the H2 global (Batica Sans, navy) — matches the site's headings. */
.sais-login__title {
	font-family: var(--e-global-typography-saish2-font-family);
	font-size: var(--e-global-typography-saish2-font-size);
	font-weight: var(--e-global-typography-saish2-font-weight);
	color: var(--sais-primary, #1a3765); margin: 0 0 28px;
}
.sais-login__field { margin-bottom: 18px; }
.sais-login__field label {
	display: block; font-family: var(--e-global-typography-saisbody-font-family);
	font-size: 14px; font-weight: 500; color: var(--sais-primary, #1a3765); margin-bottom: 8px;
}
.sais-login__field label span { color: var(--sais-orange, #f47721); margin-left: 3px; }
/* Pill inputs with the light-blue border — same treatment as the contact form. */
.sais-login__field input {
	width: 100%; height: 54px; box-sizing: border-box;
	border: 1.5px solid #a9c9f0; border-radius: 100px; padding: 0 24px; background: #ffffff;
	font-family: var(--e-global-typography-saisbody-font-family);
	font-size: var(--e-global-typography-saissmall-font-size); color: #1e6fd0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sais-login__field input:focus { outline: none; border-color: var(--sais-blue, #299eff); box-shadow: 0 0 0 3px rgba(41, 158, 255, 0.12); }
.sais-login__forgot {
	display: block; text-align: right; margin: 6px 0 26px;
	font-family: var(--e-global-typography-saisbody-font-family); font-size: 15px;
	color: var(--sais-blue, #299eff); text-decoration: none;
}
.sais-login__forgot:hover { text-decoration: underline; }
/* Navy brand pill, using the Button global + the unified button hover. */
.sais-login__submit {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sais-primary, #1a3765); color: #ffffff;
	font-family: var(--e-global-typography-saisbutton-font-family);
	font-size: var(--e-global-typography-saisbutton-font-size);
	font-weight: var(--e-global-typography-saisbutton-font-weight);
	padding: 15px 44px; border-radius: 100px; text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sais-login__submit:hover { color: #ffffff; transform: translateY(-2px); box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(26, 55, 101, 0.18); }

/* ============================================================
   MEMBERSHIP BENEFITS CHECKLIST — white circle behind the orange check
   (Figma 122-1602). The 3 Icon widgets in the "expected to" list are tagged
   .sais-check; keep their orange checkmark, add the white disc around it.
   ============================================================ */
.sais-check .elementor-icon {
	background: #ffffff;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.sais-check .elementor-icon svg,
.sais-check .elementor-icon i { width: 26px; height: 26px; font-size: 26px; color: var(--sais-orange, #f47721); fill: var(--sais-orange, #f47721); }

/* ============================================================
   PREMIUM MOTION SYSTEM  (paired with assets/js/sais-animations.js)
   - Scroll-reveal: content blocks fade + rise into view; card grids stagger
     via --sais-reveal-delay (set per-card by the JS).
   - Card hover: gentle image zoom (the lift + shadow already live in
     .sais-card:hover above — this only adds the zoom).
   - Form fields: soft focus glow (contact + newsletter).
   Transform/opacity only; fully neutralised under prefers-reduced-motion. The JS
   reveals above-the-fold blocks instantly and carries a safety-net timer, so
   nothing can remain hidden even if the observer never fires. The .sais-reveal
   hidden state only ever applies once the JS has added the class — if the script
   fails to load, no element is hidden.
   ============================================================ */
.sais-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--sais-reveal-delay, 0ms);
}
.sais-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Card hover image zoom (clipped by .sais-card__media overflow:hidden). */
.sais-card__media img {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sais-card:hover .sais-card__media img {
	transform: scale(1.05);
}

/* Featured image: clip so the desktop parallax scale can never overflow-x. */
.sais-featured__media {
	overflow: hidden;
}

/* Form fields: soft focus glow (contact + newsletter). */
.sais-cform input:focus,
.sais-cform textarea:focus,
.sais-cform select:focus,
.sais-nlform input.elementor-field-textual:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(41, 158, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	.sais-reveal,
	.sais-reveal.is-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.sais-card__media img { transition: none !important; }
	.sais-card:hover .sais-card__media img { transform: none !important; }
}

/* ============================================================
   HERO ENTRANCE (on load) — the first content section's heading, text and
   button rise + fade in, staggered. Pure CSS: animation-fill-mode "both"
   applies the start (hidden) state before first paint, so there is NO FOUC and
   no JS dependency. Runs once per load. Neutralised under reduced-motion.
   Targets the homepage cutout hero explicitly + the first top-level section on
   every other page.
   ============================================================ */
/* The heading is the hero's Largest-Contentful-Paint element, so it gets a
   transform-ONLY entrance (no opacity fade) — it paints on first frame and never
   delays LCP, while still easing subtly upward. */
.cutout-hero .elementor-widget-heading,
.page-content .elementor > .elementor-element:first-child .elementor-widget-heading {
	animation: sais-hero-heading 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Supporting copy + button fade + rise, staggered in after the heading. */
.cutout-hero .elementor-widget-text-editor,
.cutout-hero .elementor-widget-button,
.page-content .elementor > .elementor-element:first-child .elementor-widget-text-editor,
.page-content .elementor > .elementor-element:first-child .elementor-widget-button {
	animation: sais-hero-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cutout-hero .elementor-widget-text-editor,
.page-content .elementor > .elementor-element:first-child .elementor-widget-text-editor {
	animation-delay: 0.10s;
}
.cutout-hero .elementor-widget-button,
.page-content .elementor > .elementor-element:first-child .elementor-widget-button {
	animation-delay: 0.22s;
}
@keyframes sais-hero-heading {
	from { transform: translateY(16px); }
	to   { transform: none; }
}
@keyframes sais-hero-rise {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cutout-hero .elementor-widget-heading,
	.cutout-hero .elementor-widget-text-editor,
	.cutout-hero .elementor-widget-button,
	.page-content .elementor > .elementor-element:first-child .elementor-widget-heading,
	.page-content .elementor > .elementor-element:first-child .elementor-widget-text-editor,
	.page-content .elementor > .elementor-element:first-child .elementor-widget-button {
		animation: none !important;
	}
}

/* ============================================================
   PREMIUM INTERACTIONS  (JS engine: assets/js/sais-animations.js)
   Reading-progress bar, sticky-header depth on scroll, card cursor-spotlight,
   floating back-to-top. Magnetic CTAs are JS-driven (transform), easing via the
   unified button system's existing transform transition. Transform/opacity only;
   pointer effects are desktop-only; all disabled under prefers-reduced-motion.
   ============================================================ */

/* Sticky header: solid + lifted once scrolled off the hero.
   Elementor's own sticky "background on scroll" effect lags during an active
   scroll — the bar stays see-through, so page content bleeds through the menu,
   and on mobile the white hamburger over light content simply vanishes ("menu
   not showing on the homepage"). Our JS toggles html.sais-scrolled the instant
   pageYOffset > 40, so pin the solid white background to THAT class: it wins
   (!important) over Elementor's laggy inline effect and stays opaque across the
   whole scrolled range. :not(.sais-nav-open) yields to the open mobile menu,
   which wants a transparent header (see the ≤1024 block above). */
.sais-sticky-header { transition: box-shadow 0.3s ease; }
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header {
	/* Solid the INSTANT we cross the scroll threshold — no background transition,
	   or an active/momentum scroll captures see-through frames where page content
	   bleeds through the menu (and the white mobile hamburger vanishes over light
	   content). opacity is pinned too so Elementor's sticky "fade" effect can
	   never leave the whole bar (white bg included) semi-transparent mid-scroll. */
	background-color: var(--sais-primary, #1a3765) !important;
	opacity: 1 !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
/* Navy floating header → white logo + white nav links + white carets on scroll.
   High specificity (5 classes) so it beats Elementor's per-widget nav colour. */
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-widget-theme-site-logo img {
	filter: brightness(0) invert(1) !important;
}
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-nav-menu--main .elementor-item,
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-nav-menu .elementor-item {
	color: #ffffff !important;
}
/* Active/current menu item stays orange on the navy sticky header (as on the normal menu). */
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--sais-orange, #f47721) !important;
}
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-nav-menu--main .elementor-item i,
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-nav-menu--main .elementor-item svg,
html.sais-scrolled:not(.sais-nav-open) .sais-sticky-header .elementor-nav-menu--main .sub-arrow {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* Reading-progress bar. */
.sais-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 100001;
	transform: scaleX(0);
	transform-origin: left center;
	/* Multi-stop brand band echoing the reference divider. Starts on orange (not
	   navy) so it stays visible where it sits over the navy header. */
	background: linear-gradient(90deg, #f47721 0%, #f9a825 32%, #299eff 66%, #171b41 100%);
	pointer-events: none;
}
html.sais-nav-open .sais-progress { opacity: 0; }

/* Card cursor-spotlight — a soft glow that tracks the pointer. */
.sais-spotlight { position: relative; }
.sais-spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: radial-gradient(220px circle at var(--sais-mx, 50%) var(--sais-my, 0%), rgba(41, 158, 255, 0.12), transparent 60%);
}
.sais-spotlight:hover::after { opacity: 1; }

/* Floating back-to-top. */
.sais-totop {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100000;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--sais-primary, #1a3765);
	color: #ffffff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(23, 27, 65, 0.22);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
.sais-totop.is-show { opacity: 1; transform: none; pointer-events: auto; }
.sais-totop:hover { background: var(--sais-orange, #f47721); }
.sais-totop:focus-visible { outline: 3px solid rgba(41, 158, 255, 0.55); outline-offset: 2px; }

@media (max-width: 767px) {
	.sais-totop { width: 42px; height: 42px; bottom: 18px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.sais-sticky-header,
	.sais-progress,
	.sais-totop { transition: none !important; }
	.sais-spotlight::after { display: none !important; }
}

/* ============================================================
   HEADER SUBMENU — polished mega-style dropdown. Each item is icon + title +
   one-line description (injected by sais_ew_submenu_title() in the plugin from
   the menu item's editable Description field). Consistent navy links, orange top
   accent, soft rounded card, hover fill, gentle fade + rise. Desktop dropdown
   only — the mobile menu uses the custom full-screen popup.
   ============================================================ */
.elementor-location-header .elementor-nav-menu--main .sub-menu {
	min-width: 320px !important;
	padding: 8px !important;
	border: none !important;
	border-top: 3px solid var(--sais-orange, #f47721) !important;
	border-radius: 12px !important;
	box-shadow: 0 16px 40px rgba(23, 27, 65, 0.14) !important;
	background: #ffffff !important;
	overflow: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.elementor-location-header .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
.elementor-location-header .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
	transform: translateY(0);
}
.elementor-location-header .elementor-nav-menu--main .sub-menu > li > a.elementor-sub-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	border-radius: 8px !important;
	color: var(--sais-primary, #1a3765) !important;
	background: transparent !important;
	line-height: 1.3 !important;
	white-space: normal !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor-location-header .elementor-nav-menu--main .sub-menu > li > a.elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--main .sub-menu > li > a.elementor-sub-item:focus {
	background: #f4f7fb !important;
	color: var(--sais-orange, #f47721) !important;
}
.sais-subicon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--sais-blue, #299eff);
	margin-top: 1px;
	transition: color 0.2s ease;
}
.elementor-location-header .elementor-nav-menu--main .sub-menu > li > a:hover .sais-subicon { color: var(--sais-orange, #f47721); }
.sais-subtext { display: flex; flex-direction: column; min-width: 0; }
.sais-subtitle { font-weight: 500; }
.sais-subdesc {
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sais-text-secondary, #6b7280) !important;
}

/* Mobile menu stays plain — the submenu icon + description enrichment is
   DESKTOP-only. The markup is shared (one WP menu), so in the mobile dropdown /
   moved popup we hide the icon + description and let the title render as a normal
   inline link, exactly as it was before. */
.elementor-nav-menu--dropdown .sais-subicon,
.sais-mnav-popup .sais-subicon,
.elementor-nav-menu--dropdown .sais-subdesc,
.sais-mnav-popup .sais-subdesc { display: none !important; }
.elementor-nav-menu--dropdown .sais-subtext,
.sais-mnav-popup .sais-subtext,
.elementor-nav-menu--dropdown .sais-subtitle,
.sais-mnav-popup .sais-subtitle { display: inline !important; font-weight: inherit !important; }

/* ============================================================
   POPIA / cookie consent notice — rendered by the plugin in wp_footer.
   Fixed brand-navy bar; JS reveals it only when no consent cookie is set.
   ============================================================ */
.sais-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100002; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; background: var(--sais-primary, #171b41); color: #fff; padding: 18px 24px; border-radius: 16px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.30); font-size: 14px; line-height: 1.55; }
.sais-consent[hidden] { display: none; }
.sais-consent__text { margin: 0; flex: 1 1 340px; }
.sais-consent__text a { color: #f9a825; text-decoration: underline; }
.sais-consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.sais-consent__btn { cursor: pointer; border: 0; border-radius: 100px; padding: 10px 24px; font-weight: 600; font-size: 14px; transition: background-color 0.2s ease, opacity 0.2s ease; }
/* Explicit hover backgrounds — the Hello Elementor reset styles every <button>
   with a raspberry #c36 hover bg, so we must set our own or it bleeds through. */
.sais-consent__btn--accept { background: var(--sais-orange, #f47721); color: #fff; }
.sais-consent__btn--accept:hover,
.sais-consent__btn--accept:focus { background: #dd6414; color: #fff; }
.sais-consent__btn--decline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); }
.sais-consent__btn--decline:hover,
.sais-consent__btn--decline:focus { background: rgba(255, 255, 255, 0.14); color: #fff; }
@media (max-width: 600px) { .sais-consent { flex-direction: column; align-items: stretch; text-align: left; left: 10px; right: 10px; bottom: 10px; } .sais-consent__text { flex: 0 0 auto; } .sais-consent__actions { width: 100%; } .sais-consent__btn { flex: 1; } }

/* ============================================================
   MOTION POLISH — unified card hover + scale-in reveal + brand-arch entrance.
   All transform/opacity only; neutralised under prefers-reduced-motion.
   ============================================================ */
/* Consistent hover across every card type: a gentle lift + soft shadow. */
.sais-membership__card,
.sais-news__item,
.sais-related__item,
.sais-desig__card,
.sais-examgrid__item {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sais-membership__card:hover,
.sais-news__item:hover,
.sais-related__item:hover,
.sais-desig__card:hover,
.sais-examgrid__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(23, 27, 65, 0.13);
}
/* Scale-in reveal variant — used for large featured images (more dynamic than a
   plain rise). The JS adds this class alongside .sais-reveal. */
.sais-reveal--scale { transform: scale(0.94); }
.sais-reveal--scale.is-revealed { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.sais-membership__card,
	.sais-news__item,
	.sais-related__item,
	.sais-desig__card,
	.sais-examgrid__item { transition: none !important; }
	.sais-membership__card:hover,
	.sais-news__item:hover,
	.sais-related__item:hover,
	.sais-desig__card:hover,
	.sais-examgrid__item:hover { transform: none !important; }
	.sais-reveal--scale,
	.sais-reveal--scale.is-revealed { transform: none !important; }
}

/* ============================================================
   NEWS ARCHIVE — card grid + search + category filter (/news/)
   ============================================================ */
.sais-newsarch { width: 100%; }

.sais-newsarch__header { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.sais-newsarch__heading {
	font-family: var(--e-global-typography-saish2-font-family, var(--sais-heading-font));
	color: var(--sais-primary, #1a3765);
	font-size: var(--e-global-typography-saish2-font-size, 40px);
	line-height: 1.2;
	margin: 0;
}
.sais-newsarch__sub {
	font-family: var(--sais-body-font);
	color: var(--sais-text-secondary, #6b7280);
	font-size: 17px;
	line-height: 1.55;
	margin: 14px 0 0;
}

/* --- Controls (search + filter tabs) --- */
.sais-newsarch__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 36px;
}
.sais-newsarch__search { position: relative; flex: 1 1 260px; max-width: 360px; }
.sais-newsarch__search-icon {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	color: var(--sais-text-secondary, #6b7280); pointer-events: none;
}
/* Scoped with the parent so these beat Hello Elementor's input[type=search]
   (0,1,1) reset — otherwise its padding:.5rem 1rem wipes our left padding and
   the placeholder text collides with the search icon. */
.sais-newsarch__search .sais-newsarch__input {
	width: 100%;
	padding: 13px 18px 13px 46px;
	border: 1px solid #e4e9f0;
	border-radius: 100px;
	background: #fff;
	font-family: var(--sais-body-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--sais-text-body, #2f3542);
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.sais-newsarch__search .sais-newsarch__input:focus {
	outline: none;
	border-color: var(--sais-blue, #299eff);
	box-shadow: 0 0 0 3px rgba(41, 158, 255, .15);
}
.sais-newsarch__search-icon { z-index: 1; }
.sais-newsarch__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.sais-newsarch__filter {
	border: 1px solid #e4e9f0;
	background: #fff;
	color: var(--sais-primary, #1a3765);
	padding: 9px 18px;
	border-radius: 100px;
	font-family: var(--sais-body-font);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
/* Set background explicitly on hover too — otherwise Hello Elementor's default
   button:hover (raspberry #c36) bg bleeds through. */
.sais-newsarch__filter:hover { background: #fff; border-color: var(--sais-blue, #299eff); color: var(--sais-blue, #299eff); }
.sais-newsarch__filter.is-active,
.sais-newsarch__filter.is-active:hover {
	background: var(--sais-primary, #1a3765);
	border-color: var(--sais-primary, #1a3765);
	color: #fff;
}

/* --- Grid --- */
.sais-newsarch__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

/* --- Card --- */
.sais-newsarch__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e9edf3;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sais-newsarch__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(23, 27, 65, .12);
	border-color: transparent;
	text-decoration: none;
}
.sais-newsarch__card:focus-visible { outline: 2px solid var(--sais-blue, #299eff); outline-offset: 3px; }

.sais-newsarch__media {
	position: relative;
	aspect-ratio: 16 / 10;
	flex: 0 0 auto;
	overflow: hidden;
	background: #eef2f7;
}
.sais-newsarch__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sais-newsarch__media--empty { position: absolute; inset: 0; background: linear-gradient(135deg, #1d427b, #299eff); }
.sais-newsarch__tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; }

.sais-newsarch__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; }
.sais-newsarch__title {
	font-family: var(--e-global-typography-saish4-font-family, var(--sais-heading-font));
	font-size: 20px;
	line-height: 1.3;
	color: var(--sais-primary, #1a3765);
	margin: 0;
	transition: color .2s ease;
}
.sais-newsarch__card:hover .sais-newsarch__title { color: var(--sais-orange, #f47721); }
.sais-newsarch__excerpt {
	font-family: var(--sais-body-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--sais-text-secondary, #6b7280);
	margin: 12px 0 0;
}
.sais-newsarch__readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
	font-family: var(--sais-body-font);
	font-weight: 500;
	font-size: 15px;
	color: var(--sais-blue, #299eff);
}
.sais-newsarch__readmore svg { transition: transform .2s ease; }
.sais-newsarch__card:hover .sais-newsarch__readmore svg { transform: translateX(3px); }

.sais-newsarch__empty { text-align: center; padding: 48px 0; color: var(--sais-text-secondary, #6b7280); font-family: var(--sais-body-font); font-size: 16px; }
.sais-newsarch__card.is-hidden { display: none; }

/* --- Responsive (fallback; the per-widget Columns control overrides on desktop/tablet) --- */
@media ( max-width: 1024px ) {
	.sais-newsarch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media ( max-width: 600px ) {
	.sais-newsarch__grid { grid-template-columns: 1fr; }
	.sais-newsarch__controls { flex-direction: column; align-items: stretch; }
	.sais-newsarch__search { max-width: none; }
}
@media ( prefers-reduced-motion: reduce ) {
	.sais-newsarch__card,
	.sais-newsarch__title,
	.sais-newsarch__readmore svg { transition: none; }
	.sais-newsarch__card:hover { transform: none; }
}

/* ============================================================
   BUTTON DEFAULT NEUTRALISER (hover only)
   Hello Elementor's reset.css gives every bare <button> a raspberry #c36
   background on :hover/:focus (`button:hover` = specificity 0,1,1), which
   outranks a component's base class — so any plugin button without its OWN
   :hover background flashes red. We override just that hover background with a
   brand navy fallback. `body button:hover` is (0,1,2): it beats BOTH theme
   rules (`button:hover` and `[type=button]:hover`, each 0,1,1) for every
   <button> regardless of load order, yet still loses to any component's own
   `.sais-x:hover` (0,2,0) — so styled buttons (consent, filter, arrows, Send,
   etc.) keep their exact colours and only truly-unstyled buttons fall back to
   navy. Hover-only: base colours/borders are left untouched. Elementor's
   `.elementor-button` is unaffected (higher specificity).
   ============================================================ */
body button:hover,
body button:focus {
	background-color: var(--sais-primary, #1a3765);
	color: #fff;
}

/* ============================================================
   LEGAL PAGES (Privacy Policy / Terms) — .sais-legal
   Plain full-width legal text → a centred reading card on a soft surface
   with a subtle brand rainbow arch. Class added to the content container.
   ============================================================ */
.sais-legal.e-con {
	position: relative;
	overflow: hidden;
	background: var(--sais-surface, #f7f8fa);
	padding-top: 76px;
	padding-bottom: 96px;
}
/* decorative brand arch, top-right — a soft on-brand touch behind the card */
.sais-legal.e-con::before {
	content: "";
	position: absolute;
	top: -72px;
	left: auto;               /* a global ::before{left:0} otherwise wins over right */
	right: -96px;
	width: 360px;
	height: 360px;
	background: url("../images/rainbow.svg") no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
}
.sais-legal.e-con > .e-con-inner { position: relative; z-index: 1; }

/* the legal copy becomes a centred white reading card (this Elementor build has
   no .elementor-widget-container wrapper, so we card the widget itself) */
.sais-legal .elementor-widget-text-editor {
	display: block;
	width: 100%;
	max-width: 940px !important;   /* beat Elementor's .elementor-widget__width-initial */
	margin-left: auto !important;
	margin-right: auto !important;
	background: #ffffff;
	border: 1px solid #eceef3;
	border-radius: 22px;
	padding: 56px 60px;
	box-shadow: 0 16px 48px rgba(23, 27, 65, 0.07);
}

/* typography inside the card */
.sais-legal h2 {
	font-family: var(--sais-heading-font);
	color: var(--sais-orange, #f47721);
	font-size: 32px;
	line-height: 1.25;
	margin: 0 0 8px;
}
.sais-legal h3 {
	font-family: var(--sais-heading-font);
	color: var(--sais-primary, #1a3765);
	font-size: 21px;
	line-height: 1.3;
	margin: 34px 0 12px;
	padding-left: 16px;
	border-left: 3px solid var(--sais-orange, #f47721);
}
.sais-legal p,
.sais-legal li {
	font-family: var(--sais-body-font);
	color: var(--sais-text-body, #2f3542);
	font-size: 16px;
	line-height: 1.75;
}
.sais-legal p { margin: 0 0 16px; }
.sais-legal ul,
.sais-legal ol { padding-left: 24px; margin: 0 0 18px; }
.sais-legal li { margin-bottom: 8px; }
.sais-legal li::marker { color: var(--sais-orange, #f47721); }
.sais-legal a {
	color: var(--sais-blue, #299eff);
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}
.sais-legal strong { color: var(--sais-primary, #1a3765); }

@media (max-width: 767px) {
	.sais-legal.e-con { padding-top: 48px; padding-bottom: 60px; }
	.sais-legal .elementor-widget-text-editor > .elementor-widget-container { padding: 30px 22px; border-radius: 16px; }
	.sais-legal.e-con::before { width: 210px; height: 210px; top: -44px; right: -52px; }
	.sais-legal h2 { font-size: 26px; }
	.sais-legal h3 { font-size: 19px; }
}

/* ============================================================
   MOTION ADD-ONS — nav underline · card image zoom · arch scroll-draw
   ============================================================ */

/* 1. Animated nav underline (desktop header) — grows in on hover / current page.
   Uses an animated background-image rather than ::after, which Elementor's own
   nav pointer already occupies. */
.sais-sticky-header .elementor-nav-menu--main .elementor-item {
	background-image: linear-gradient(var(--sais-orange, #f47721), var(--sais-orange, #f47721));
	background-repeat: no-repeat;
	background-position: center bottom 2px;
	background-size: 0% 2px;
	transition: background-size 0.28s ease;
}
.sais-sticky-header .elementor-nav-menu--main .elementor-item:hover,
.sais-sticky-header .elementor-nav-menu--main .elementor-item.elementor-item-active { background-size: calc(100% - 12px) 2px; }

/* 2. Card image zoom on hover (banners + thumbnails). Ensure the frames clip. */
.sais-card__media,
.sais-newsarch__media,
.sais-news__media,
.sais-news__thumb { overflow: hidden; }
.sais-card__media img,
.sais-newsarch__media img,
.sais-news__media img,
.sais-news__thumb img { transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1); }
.sais-card:hover .sais-card__media img,
.sais-newsarch__card:hover .sais-newsarch__media img,
.sais-news__featured:hover .sais-news__media img,
.sais-news__article:hover .sais-news__thumb img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.sais-sticky-header .elementor-nav-menu--main .elementor-item { transition: none; }
	.sais-card__media img, .sais-newsarch__media img, .sais-news__media img, .sais-news__thumb img { transition: none; }
	.sais-card:hover .sais-card__media img, .sais-newsarch__card:hover .sais-newsarch__media img,
	.sais-news__featured:hover .sais-news__media img, .sais-news__article:hover .sais-news__thumb img { transform: none; }
}

/* ============================================================
   PAGE NAV — sticky in-page anchor bar (.sais-pagenav)
   ============================================================ */
.sais-pagenav {
	position: relative;
	background: #ffffff;
	border-radius: 100px;
	box-shadow: 0 6px 24px rgba(23, 27, 65, 0.07);
	padding: 8px;
	margin: 0 auto 40px;
	max-width: max-content;
}
/* Sticky to the BOTTOM: a floating centred pill fixed to the viewport bottom.
   position:fixed is relative to the viewport, so (unlike sticky) it needs no
   tall parent. Hidden until the user scrolls (JS toggles .is-visible). */
.sais-pagenav.is-sticky {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(20px);
	opacity: 0;
	pointer-events: none;
	z-index: 999;
	max-width: calc(100vw - 32px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.sais-pagenav.is-sticky.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
/* Collapse the empty wrapper the now-fixed bar leaves behind in the flow. */
.elementor > .e-con:has(.sais-pagenav.is-sticky) { padding-top: 0; padding-bottom: 0; min-height: 0; }
/* The sticky bar carries its own "back to top", so hide the global floating
   button on these pages — otherwise two controls overlap (badly on mobile). */
body:has(.sais-pagenav.is-sticky) .sais-totop { display: none !important; }
@media (prefers-reduced-motion: reduce) {
	.sais-pagenav.is-sticky { transition: opacity 0.25s ease; transform: translateX(-50%); }
	.sais-pagenav.is-sticky.is-visible { transform: translateX(-50%); }
}
/* Collapsed "current section" trigger — mobile only (hidden on desktop). */
.sais-pagenav__current { display: none; }
/* Hold the brand navy on interaction (overrides the Hello theme's <button> hover). */
.sais-pagenav__current:hover,
.sais-pagenav__current:focus,
.sais-pagenav__current:focus-visible,
.sais-pagenav__current:active { background: var(--sais-primary, #1a3765); color: #ffffff; }
.sais-pagenav__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sais-pagenav__inner::-webkit-scrollbar { display: none; }
.sais-pagenav__link {
	flex: 0 0 auto;
	white-space: nowrap;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 100px;
	color: var(--sais-primary, #1a3765);
	/* Match the header (main menu) nav typography exactly. */
	font-family: var(--e-global-typography-saisnav-font-family, var(--sais-body-font));
	font-size: 15px;   /* match the header nav's rendered size exactly */
	font-weight: var(--e-global-typography-saisnav-font-weight, 500);
	line-height: var(--e-global-typography-saisnav-line-height, 1.3);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sais-pagenav__link:hover { background: #eef2f7; color: var(--sais-primary, #1a3765); }
.sais-pagenav__link.is-active { background: var(--sais-primary, #1a3765); color: #ffffff; }
/* Back to top — a compact circular icon button set apart by a hairline divider.
   Its ring doubles as a page reading-progress indicator (JS sets --sais-pn-progress). */
.sais-pagenav__top {
	flex: 0 0 auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-left: 10px;
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	color: var(--sais-primary, #1a3765);
	background: conic-gradient(var(--sais-orange, #f47721) calc(var(--sais-pn-progress, 0) * 360deg), rgba(23, 27, 65, 0.10) 0);
	transition: color 0.2s ease;
}
.sais-pagenav__top::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 22px;
	background: #e5e9f0;
}
.sais-pagenav__top::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #ffffff;
	transition: background-color 0.2s ease;
}
.sais-pagenav__top svg { position: relative; z-index: 1; }
/* Keep the progress-ring gradient on hover (the disc + colour flip give the affordance);
   without an explicit background the Hello theme paints the button raspberry. */
.sais-pagenav__top:hover,
.sais-pagenav__top:focus-visible { color: #ffffff; background: conic-gradient(var(--sais-orange, #f47721) calc(var(--sais-pn-progress, 0) * 360deg), rgba(23, 27, 65, 0.10) 0); }
.sais-pagenav__top:hover::after,
.sais-pagenav__top:focus-visible::after { background: var(--sais-primary, #1a3765); }
.sais-pagenav__top-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* -------- Mobile: collapse to a "current section" button that opens a tap-list -------- */
@media (max-width: 767px) {
	.sais-pagenav { max-width: none; border-radius: 16px; padding: 6px; }
	.sais-pagenav.is-sticky { left: 12px; right: 12px; bottom: 12px; max-width: none; transform: translateY(20px); }
	.sais-pagenav.is-sticky.is-visible { transform: translateY(0); }

	.sais-pagenav__current {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		padding: 13px 18px;
		border: 0;
		border-radius: 12px;
		background: var(--sais-primary, #1a3765);
		color: #ffffff;
		font-family: var(--e-global-typography-saisnav-font-family, var(--sais-body-font));
		font-size: 15px;
		font-weight: var(--e-global-typography-saisnav-font-weight, 600);
		line-height: 1.3;
		text-align: left;
		cursor: pointer;
	}
	.sais-pagenav__current-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sais-pagenav__chev { flex: 0 0 auto; transition: transform 0.2s ease; }
	.sais-pagenav.is-open .sais-pagenav__chev { transform: rotate(180deg); }

	/* The link list becomes a popover opening UPWARD above the trigger. */
	.sais-pagenav__inner {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(100% + 8px);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 4px;
		padding: 8px;
		background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 12px 34px rgba(23, 27, 65, 0.18);
		max-height: 62vh;
		overflow-y: auto;
		overflow-x: hidden;
		opacity: 0;
		transform: translateY(8px);
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
	.sais-pagenav.is-open .sais-pagenav__inner {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.sais-pagenav__link {
		width: 100%;
		padding: 13px 16px;
		border-radius: 10px;
		white-space: normal;
	}
	/* Back to top → full-width list row with a visible label (no progress ring on mobile). */
	.sais-pagenav__top {
		width: 100%;
		height: auto;
		margin: 4px 0 0;
		padding: 13px 16px;
		gap: 8px;
		border-radius: 10px;
		background: #f3f5f9;
		color: var(--sais-primary, #1a3765);
	}
	.sais-pagenav__top::before,
	.sais-pagenav__top::after { display: none; }
	.sais-pagenav__top-label {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		font-family: var(--sais-body-font);
		font-size: 14px;
		font-weight: 500;
	}
	.sais-pagenav__top:hover,
	.sais-pagenav__top:focus-visible { background: var(--sais-primary, #1a3765); color: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
	.sais-pagenav__link,
	.sais-pagenav__chev,
	.sais-pagenav__inner,
	.sais-pagenav__top,
	.sais-pagenav__top::after { transition: none; }
	@media (max-width: 767px) {
		.sais-pagenav.is-sticky,
		.sais-pagenav.is-sticky.is-visible { transform: none; }
		.sais-pagenav__inner { transform: translateY(0); }
	}
}

/* ============================================================
   A11Y — distinguish in-text links by more than colour (WCAG 1.4.1 /
   axe "link-in-text-block"). Links sitting inside body copy or the footer
   legal line get an underline so colour-blind users can find them; buttons
   and nav items (which are visually obvious controls) are excluded.
   ============================================================ */
.elementor-widget-text-editor a:not(.elementor-button):not([class*="btn"]),
.sais-legal a:not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: from-font;
}