/**
 * ICpEP-Qatar Home page — visual design for the Elementor Container/widget
 * content built by wp-content/migrations/build-home-page.php.
 *
 * Same approach as css/about.css: the migration saves each element with
 * only minimal content settings, so every visual decision here targets
 * each element's deterministic `.elementor-element-{id}` class instead of
 * Elementor's own layout/background settings. Ids assigned in the
 * migration script — home-s1..home-s6 for the six section containers,
 * home-s{n}-in for their bounded inner containers, home001-home015 for
 * the sequentially-numbered widgets (hero and section 4-6 headings),
 * plus stable named ids (home-pillar-{n}-icon/title/desc/num for the
 * section 2 cards, home-about-* for the section 3 header/copy/list/
 * image) for content that's rebuilt independently of the rest of the
 * page — pinned rather than drawn off the same counter so a future
 * edit there can't reshuffle every sequential id after it and
 * silently detach this file's rules from the elements they used to
 * style (see the script for the full id map). Reuses
 * css/components.css's tokens; the hero's mesh/geometric-shapes
 * decorative layer (.icpep-hero__mesh, .icpep-hero__shapes and its
 * ribbon/dot/circuit children) keeps its original classes and CSS in
 * css/front-page.css since that markup is embedded verbatim inside an
 * HTML widget, fully under this theme's control.
 *
 * Enqueued only on the front page (see inc/scripts.php), after
 * front-page.css.
 *
 * Every selector below is prefixed `#content ` (the `<main id="content">`
 * wrapper from front-page.php). This isn't cosmetic scoping — it's load
 * -order insurance. Elementor enqueues its own generated CSS for this
 * page (elementor-frontend.min.css, plus a per-post file, e.g.
 * post-8.css) AFTER this stylesheet in <head>, and several of those
 * rules share this file's exact class-only specificity (e.g. Elementor's
 * own `.e-con>.e-con-inner{display:var(--display)}`, or
 * `.elementor-widget-button .elementor-button{background-color:var(--e-
 * global-color-accent)}`). At tied specificity the later rule in source
 * order wins, which — without the `#content` id bump — silently handed
 * every layout/color decision in this file back to Elementor's defaults
 * (flex-direction:column instead of our row/grid, every button rendering
 * in the accent/maroon color regardless of which button widget it was).
 * An id selector always outranks any number of classes, so `#content
 * .elementor-element-{id}` wins these ties regardless of enqueue order —
 * don't drop the prefix when adding new rules here.
 */

/* ==========================================================
   Section 1 — Hero
   ========================================================== */

/*
 * Full-bleed section. `width`/`max-width: 100%` here is mostly defensive
 * (Elementor Containers default to full-width already unless a widget's
 * own "Content Width" setting says otherwise, which this migration never
 * sets) — the min-height and flex-centering are what actually give the
 * hero its presence instead of shrinking to fit its text content.
 */
/*
 * home-s1 used to size and center the hero directly; now it's just the
 * full-bleed outer shell around the Nested Carousel widget (see
 * build-home-page.php's Section 1 comment) — min-height/flex-centering/
 * padding-block moved onto each slide container below
 * (.elementor-element-home-slide-{1,2,3}), since Swiper needs every
 * slide's own box to carry that, not a shared ancestor two levels up.
 */
#content .elementor-element-home-s1 {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	/* Elementor Containers default to 10px left/right padding — width/
	   max-width above only fixed the *content-width cap* (see the
	   --content-width comment below), this is what was still insetting
	   the whole carousel (photo, mesh, text, everything) 10px from the
	   true browser edge on each side despite that fix. */
	padding-inline: 0;
	/* home-s1 is an Elementor Container too, defaulting to "Boxed"
	   content width like every container this migration creates (never
	   set to "full" per-element) — Elementor auto-wraps its children in
	   its OWN `.e-con-inner`, capped to `--content-width` (Kit default:
	   min(100%,1140px)). That inner wrapper — not home-s1 itself — is
	   the carousel widget's real DOM parent, so the widget's own width
	   would silently be capped to 1140px one level up regardless of what
	   was set on it directly. This is what actually makes this section
	   full-bleed; overriding width/max-width on home-s1 itself (above)
	   was never enough on its own. */
	--content-width: 100%;
	background-color: #ffffff;
}

/*
 * The left/right fix above zeroes home-s1's OWN padding, but Elementor's
 * default 10px container padding is actually applied twice: once as a
 * literal `padding` on the element itself (what padding-inline above
 * overrides), and again on its auto-generated `.e-con-inner` child via
 * `padding: var(--padding-top) var(--padding-right) var(--padding-bottom)
 * var(--padding-left))` — CSS custom properties Elementor also sets on
 * home-s1, which padding-inline above never touched since it's a
 * different mechanism. Something about --content-width:100% already
 * zeroes the left/right half of that var-driven padding (confirmed
 * live — e-con-inner's own left/right computed to 0 without any extra
 * rule for it), but not the top/bottom half, which is why the carousel
 * was flush left/right yet still showed a ~10px gap above the very
 * first slide. Overriding padding-block directly on e-con-inner here
 * sidesteps the var() chain entirely via ordinary cascade specificity.
 */
#content .elementor-element-home-s1 > .e-con-inner {
	padding-block: 0;
}

/*
 * Both slide containers need the exact box the old home-s1 used to
 * define directly — same reasoning as home-s1's own --content-width
 * override above (each slide is itself a Container, defaulting to a
 * 1140px-boxed inner wrapper otherwise). A shared min-height across
 * both, not just one slide's own content driving it, is what keeps
 * Swiper's carousel height stable as autoplay rotates between them —
 * without it, a shorter slide would shrink the whole carousel and
 * visibly jump on every transition.
 */
#content .elementor-element-home-slide-1,
#content .elementor-element-home-slide-2 {
	position: relative;
	overflow: hidden;
	--content-width: 100%;
	min-height: clamp( 560px, 88vh, 860px );
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #ffffff;
	/* Same default-10px-Container-padding fix as home-s1 above — each
	   slide is its own Elementor Container, so this needs zeroing here
	   too, not just on the outer shell. Only the inline (left/right)
	   axis: padding-block below is real, intentional vertical spacing. */
	padding-inline: 0;
	padding-block: clamp( 5rem, 12vw, 8rem ) clamp( 4rem, 10vw, 7rem );
}

/* Left-aligned for slide 2's (the hero's) 2-column split; the mobile/
   tablet stack (<1024px) re-centers once text and photo share one
   column — see the max-width:1023px block below. Slide 1 (the
   announcement) is a centered single column by design at every
   breakpoint (see its own rules further down). */
#content .elementor-element-home-slide-2 {
	text-align: left;
}

/*
 * The HTML widget wrapping .icpep-hero__shapes / .icpep-hero__mesh — a
 * direct child (sibling of home-s1-in, not nested inside it; see
 * wp-content/migrations/build-home-page.php's Section 1 comment for why
 * that nesting matters) of home-s1, so `inset: 0` spans the full-bleed
 * section rather than the bounded text column. Both layers are already
 * position:absolute; inset:0 in their own CSS (css/front-page.css) — this
 * only needs to sit behind the text content (z-index) and stay
 * click-through.
 */
#content .elementor-element-home001 {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

#content .elementor-element-home-s1-in {
	position: relative;
	z-index: 1;
	/* This element's own Boxed content width — legitimately needed here
	   (unlike on home-s1 above, see that rule's comment) since this is
	   the actual text/photo row that should center within a readable
	   max-width. `--content-width` is the property Elementor's own
	   `.e-con>.e-con-inner{max-width:var(--content-width)}` rule reads;
	   plain `max-width` here is a fallback in case that rule's structure
	   ever changes. Bumped from the Kit default (1140px) alongside the
	   40/60 column split below — both had to move together.
	   --hero-photo-w (home-hero-right) is an upper cap for very wide
	   screens; below that it's this width and the flex-basis split that
	   actually decide how big the photo renders. */
	--content-width: min( 100%, 1400px );
	max-width: 1400px;
	margin-inline: auto;
	width: 100%;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}

/* 2-column split — text left, team photo right. Elementor's own
   `.e-con-inner` is where `display`/`flex-direction` genuinely apply
   (see this file's docblock); `column` on `home-s1-in` itself just
   arranges home001 and home-s1-in as siblings within home-s1, unrelated
   to this row. */
#content .elementor-element-home-s1-in > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp( 2rem, 5vw, 4rem );
}

/* 40/60 — gives the team photo (--hero-photo-w below) real room to grow
   into, instead of a higher max-width that never binds because the
   column itself caps it first. */
#content .elementor-element-home-hero-left {
	flex: 1 1 40%;
	min-width: 0;
}

#content .elementor-element-home-hero-right {
	flex: 1 1 60%;
	min-width: 0;
	display: flex;
	justify-content: center;
	/* Containing block for both the interactive social/events blocks
	   (-home-hero-social) and the CTA (-home-actions) below — both are
	   positioned relative to the photo's own box, not the full hero, so
	   they stay anchored to it at every breakpoint instead of drifting
	   once the layout stacks (see @media max-width:1023px). */
	position: relative;
	/* Single source of truth for "the photo's own width" — read by the
	   image itself below, by .icpep-hero__social (front-page.css, a
	   custom property set here is still visible to a descendant styled
	   from a different stylesheet — inheritance doesn't care which file
	   declared it), and by -home-actions, so all three always agree on
	   the same box instead of three hardcoded numbers silently drifting
	   apart the next time this gets resized. */
	--hero-photo-w: 840px;
}

/* The HTML widget wrapping .icpep-hero__social (the three interactive
   Facebook/LinkedIn/Events keycap links) — taken out of the flex flow
   entirely so it doesn't add a second (empty) flex item next to the
   image, and made the positioning root for .icpep-hero__block-link's
   own `position:absolute` coordinates. */
#content .elementor-element-home-hero-social {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

@media ( max-width: 1023px ) {
	#content .elementor-element-home-slide-2 {
		text-align: center;
	}

	#content .elementor-element-home-s1-in > .e-con-inner {
		flex-direction: column;
	}

	#content .elementor-element-home-hero-right {
		width: 100%;
	}
}

/* Team illustration — a background-removed 3D cutout (see
   icpep_home_import_team_image() in build-home-page.php), so the
   drop-shadow is a `filter`, not a `box-shadow`: box-shadow would draw a
   shadow around the image's rectangular bounding box, ignoring its
   transparency, while filter:drop-shadow follows the actual alpha
   silhouette — soft shadow behind the people/desk, not a rectangle. */
/* Scaled up (was 640px, then 720px) so the photo reads as prominent/
   balanced against the headline rather than secondary to it — paired
   with the wider 56% flex-basis on home-hero-right below, since a
   higher max-width alone wouldn't bind while the column itself stayed
   capped at 50%. Reads off --hero-photo-w (set on home-hero-right
   above) rather than its own literal number, since .icpep-hero__social
   and -home-actions both need to agree on this exact same box to stay
   visually anchored to the photo. */
/* v5 is a full-body render (table base, chair wheels, shoes — see
   icpep_home_import_team_image()'s docblock in build-home-page.php) —
   deliberately taller than the window we actually want to show. This
   container clips to v4's original aspect ratio instead of stretching
   to fit the whole thing, so the framing/scale/focal point matches the
   previous banner exactly; the extra height (table base, chair wheels,
   lower legs) overflows below and is clipped + faded away rather than
   shrinking the whole render to fit inside the box. */
#content .elementor-element-home-hero-image {
	position: relative;
	width: 100%;
	max-width: var( --hero-photo-w, 840px );
	aspect-ratio: 1688 / 1217;
	overflow: hidden;
	/* Drop-shadow (not box-shadow — see below) and the fade mask both
	   live on this container, not the `img`: the `img` itself renders
	   taller than this box and gets clipped by `overflow:hidden`, so a
	   mask expressed as a percentage of the `img`'s own (mostly
	   off-screen) height would fade the wrong region entirely — a mask
	   on the container fades relative to the *visible* window instead,
	   ending in transparent exactly where the hard overflow-clip would
	   otherwise be, which is what actually hides that clip boundary.
	   filter:drop-shadow (not box-shadow) still matters even here — box-
	   shadow would draw a shadow around the container's rectangular
	   box; drop-shadow follows the clipped content's actual alpha
	   silhouette, so the shadow reads as sitting behind the people/desk,
	   not as a rectangle. */
	filter: drop-shadow( 0 28px 40px rgba( 11, 19, 43, 0.22 ) ) drop-shadow( 0 8px 14px rgba( 11, 19, 43, 0.12 ) );
	/* Two mask layers, intersected (final pixel visible only where BOTH
	   agree it should be): a vertical one — crisp through the tabletop
	   and mid-legs, easing out over the bottom ~40% of the *visible*
	   window so the table base/chair wheels/lower legs dissolve right
	   at the clip boundary instead of cutting off — and a horizontal
	   one fading the last ~7% on each side. The vertical curve uses
	   extra stops to approximate an ease-out rather than a straight
	   ramp; a straight 2-stop linear fade still reads as a seam, because
	   a linear alpha ramp *looks* like it accelerates (perceived
	   brightness isn't linear with alpha) — slow-at-first-then-falling-
	   away-faster is what actually reads as a soft dissolve. */
	-webkit-mask-image:
		linear-gradient(
			to bottom,
			#000 0%,
			#000 60%,
			rgba( 0, 0, 0, 0.9 ) 68%,
			rgba( 0, 0, 0, 0.68 ) 76%,
			rgba( 0, 0, 0, 0.42 ) 85%,
			rgba( 0, 0, 0, 0.2 ) 92%,
			rgba( 0, 0, 0, 0.05 ) 98%,
			transparent 100%
		),
		linear-gradient(
			to right,
			transparent 0%,
			rgba( 0, 0, 0, 0.5 ) 3%,
			#000 8%,
			#000 92%,
			rgba( 0, 0, 0, 0.5 ) 97%,
			transparent 100%
		);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(
			to bottom,
			#000 0%,
			#000 60%,
			rgba( 0, 0, 0, 0.9 ) 68%,
			rgba( 0, 0, 0, 0.68 ) 76%,
			rgba( 0, 0, 0, 0.42 ) 85%,
			rgba( 0, 0, 0, 0.2 ) 92%,
			rgba( 0, 0, 0, 0.05 ) 98%,
			transparent 100%
		),
		linear-gradient(
			to right,
			transparent 0%,
			rgba( 0, 0, 0, 0.5 ) 3%,
			#000 8%,
			#000 92%,
			rgba( 0, 0, 0, 0.5 ) 97%,
			transparent 100%
		);
	mask-composite: intersect;
}

#content .elementor-element-home-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	/* Cursor-reactive tilt (assets/js/hero-depth.js) sets this element's
	   own transform on mousemove; the eased transition is what makes it
	   glide/settle into place instead of snapping every frame. Renders
	   taller than its container on purpose — see the container's own
	   comment above. */
	will-change: transform;
	transition: transform 0.3s ease-out;
}

/* No eyebrow badge anymore (home002 is gone entirely — see
   build-home-page.php's Section 1 comment) — the h1 is the first thing
   in home-hero-left now. */
#content .elementor-element-home003 .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-xl );
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var( --e-global-color-primary, #0b132b );
}

#content .elementor-element-home004 p {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-md );
	line-height: 1.6;
	color: var( --e-global-color-text, #1f2937 );
	max-width: 48ch;
	margin: 1rem 0 0;
}

@media ( max-width: 1023px ) {
	#content .elementor-element-home004 p {
		margin-inline: auto;
	}
}

/*
 * Elementor Containers wrap their actual children in an inner
 * `.e-con-inner` div — that's where `display` (and therefore flex/grid
 * layout) is genuinely applied via a CSS custom property
 * (`.e-con>.e-con-inner{display:var(--display)}` in Elementor's own
 * frontend.min.css), not on the `.elementor-element-{id}` wrapper itself.
 * Every grid/flex layout rule below targets `> .e-con-inner` for exactly
 * this reason; spacing/sizing that isn't about arranging children
 * (margin, max-width, padding-inline) stays on the outer element.
 */
#content .elementor-element-home-actions {
	margin-top: clamp( 2.25rem, 5vw, 2.75rem );
}

/*
 * `flex-direction` needs to be set explicitly here, not just `display`.
 * Setting `display:flex` at higher (#content-boosted) specificity only
 * wins the cascade for that one property — Elementor's own
 * `.e-con.e-flex>.e-con-inner{flex-direction:var(--flex-direction)}`
 * rule (frontend.min.css) still applies uncontested for flex-direction
 * specifically, since we weren't declaring it at all, and its
 * `--flex-direction` default resolves to `column`. Every dev-tools
 * check that only inspects `display` will report "flex" and miss that
 * the button is still stacking (full-width) because of this.
 */
#content .elementor-element-home-actions > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
}

@media ( max-width: 1023px ) {
	#content .elementor-element-home-actions > .e-con-inner {
		justify-content: center;
	}
}

/* Buttons — Elementor's per-post CSS sets every `.elementor-widget-button
   .elementor-button` to the accent/maroon global color by default (no
   per-widget color was set in the migration); the `#content` id prefix
   is what lets each button widget's own color win instead.
 *
 * iOS-style frosted glass on both: translucent tinted fill +
 * backdrop-filter blur, a 1px near-white border for the "glass edge"
 * highlight, and an `inset` box-shadow layered with the outer drop
 * shadow for the inner-glow look — a plain box-shadow alone can't sit
 * inside a translucent surface. */
#content .elementor-element-home005 .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	font-family: var( --e-global-typography-accent-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-base );
	padding: 0.9em 2em;
	border-radius: 999px;
	background-color: rgba( 0, 163, 224, 0.75 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	color: #ffffff;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.35 ), 0 8px 24px -8px rgba( 0, 163, 224, 0.5 );
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#content .elementor-element-home005 .elementor-button:hover,
#content .elementor-element-home005 .elementor-button:focus-visible {
	background-color: rgba( 0, 163, 224, 0.88 );
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.45 ), 0 14px 32px -8px rgba( 0, 163, 224, 0.55 );
}

#content .elementor-element-home005 .elementor-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Frosted glass needs something behind it to actually blur — without
   backdrop-filter support at all (older Firefox) or with
   prefers-reduced-transparency on, the button falls back to a
   sitewide solid-color treatment instead of a translucent surface with
   nothing to show through it. */
@media ( prefers-reduced-transparency: reduce ) {
	#content .elementor-element-home005 .elementor-button {
		background-color: var( --icpep-cyan-deep );
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: transparent;
		box-shadow: var( --icpep-shadow-md ), 0 8px 20px -6px rgba( 0, 163, 224, 0.45 );
	}

	#content .elementor-element-home005 .elementor-button:hover,
	#content .elementor-element-home005 .elementor-button:focus-visible {
		background-color: var( --icpep-cyan-deeper );
		box-shadow: var( --icpep-shadow-lg ), 0 12px 24px -6px rgba( 0, 163, 224, 0.5 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#content .elementor-element-home005 .elementor-button {
		transition: none;
	}

	#content .elementor-element-home005 .elementor-button:hover {
		transform: none;
	}

	/* assets/js/hero-depth.js already bails out entirely under this same
	   media query, so this transition never actually fires in practice —
	   kept anyway as defense-in-depth, consistent with how every other
	   cursor/hover-driven transition in this file is doubly guarded. */
	#content .elementor-element-home-hero-image img {
		transition: none;
	}
}

/* ----------------------------------------------------------------------
   Carousel chrome — arrows + pagination dots, styled to the sitewide
   glass-pill language instead of Swiper's plain dark default chevrons/
   dots (widget-nested-carousel.min.css, enqueued by Pro Elements).

   The arrow selectors below are `.elementor-swiper-button-{next,prev}`,
   NOT the raw Swiper `.swiper-button-{next,prev}` classes — Elementor
   Pro's nested-carousel widget renders its own wrapper markup
   (`<div class="elementor-swiper-button elementor-swiper-button-next">`
   containing an inline `e-eicon-chevron-*` SVG, not Swiper's default
   `:after`-content chevron), so a rule keyed to the vanilla Swiper class
   never matches anything — confirmed live, an earlier version of this
   block used `.swiper-button-next/-prev` and silently styled nothing at
   all, the whole carousel having only ever shown Elementor's own bare
   default chevrons underneath.

   Swiper's built-in pagination bullets don't render at all in this
   widget/version combination (`.swiper-pagination` mounts with the
   right classes but stays permanently childless, confirmed live even
   after manually forcing `swiper.pagination.render()`) — rather than
   chase that further, the dots below are a small hand-rolled control
   (assets/js/hero-carousel-nav.js) that talks to the Swiper instance
   directly via `slideToLoop()`/`realIndex`, styled here.
   ---------------------------------------------------------------------- */
#content .elementor-element-home-hero-carousel {
	width: 100%;
	/* Positioning root for .icpep-carousel-dots below — the dots overlay
	   the whole widget (all slides), not any one slide's own box. */
	position: relative;
}

#content .elementor-element-home-hero-carousel .elementor-swiper-button-next,
#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev {
	/* Elementor sets an inline `top` via JS, computed for its own small
	   25px-square default box — `!important` is what's needed to win
	   over an inline style at all; translateY is what keeps the larger
	   56px box below correctly vertical-centered regardless of that
	   stale computation. */
	top: 50% !important;
	transform: translateY( -50% );
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba( 255, 255, 255, 0.72 );
	backdrop-filter: blur( 18px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 18px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.65 );
	border-radius: 9999px;
	box-shadow: var( --icpep-shadow-md ), 0 4px 14px rgba( 11, 19, 43, 0.14 );
	color: var( --e-global-color-primary, #0b132b );
	z-index: 3;
	transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* Inset from the true edge (never flush/clipped) — overrides Elementor's
   own default `right:0`/`left:0`. */
#content .elementor-element-home-hero-carousel .elementor-swiper-button-next {
	right: 24px;
	left: auto;
}

#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev {
	left: 24px;
	right: auto;
}

#content .elementor-element-home-hero-carousel .elementor-swiper-button-next svg,
#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev svg {
	width: 20px;
	height: 20px;
	/* The chevron path has no fill of its own — it inherits `currentColor`
	   from this button's own `color`, so hovering to a filled brand
	   background + white `color` (below) recolors the icon for free. */
	fill: currentColor;
}

#content .elementor-element-home-hero-carousel .elementor-swiper-button-next:hover,
#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev:hover {
	background-color: var( --icpep-cyan-deep );
	border-color: var( --icpep-cyan-deep );
	color: #ffffff;
	transform: translateY( -50% ) scale( 1.08 );
	box-shadow: var( --icpep-shadow-lg ), 0 10px 26px -4px rgba( 0, 163, 224, 0.5 );
}

@media ( prefers-reduced-transparency: reduce ) {
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-next,
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: var( --icpep-card-border );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-next,
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev {
		transition: none;
	}

	#content .elementor-element-home-hero-carousel .elementor-swiper-button-next:hover,
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev:hover {
		transform: translateY( -50% );
	}
}

@media ( max-width: 1023px ) {
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-next,
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev {
		width: 48px;
		height: 48px;
	}

	#content .elementor-element-home-hero-carousel .elementor-swiper-button-next {
		right: 14px;
	}

	#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev {
		left: 14px;
	}
}

/* Arrows crowd the CTA button underneath on narrow viewports — dots +
   swipe are enough there, matching this project's other "trim to what a
   touch viewport actually needs" calls (see header-footer.css hiding the
   header's social icons below 768px for the same reason). */
@media ( max-width: 767px ) {
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-next,
	#content .elementor-element-home-hero-carousel .elementor-swiper-button-prev {
		display: none;
	}
}

/*
 * Custom pagination dots (assets/js/hero-carousel-nav.js) — a minimalist
 * inactive-dot / active-pill treatment: small circles at rest, the
 * active one smoothly widening into an elongated pill in brand cyan
 * (#0284c7, as specified — distinct from this file's --icpep-cyan-deep
 * token, which is a shade darker; used here verbatim since this exact
 * hex was the given spec for this one element, not a token this project
 * already had).
 *
 * Positioned absolute against the WIDGET wrapper above (not any single
 * slide), so it stays put across every slide transition. `bottom` sits
 * well inside each slide's own generous padding-block (clamp(4rem,
 * 10vw,7rem) — see the shared slide rule above), comfortably below the
 * vertically-centered eyebrow/title/copy/button stack, so it can never
 * overlap the CTA at any breakpoint without needing viewport-specific
 * math — verified live at desktop/tablet/mobile.
 */
#content .icpep-carousel-dots {
	position: absolute;
	left: 50%;
	/* The hero's actual rendered height (padding-block + a multi-line
	   title + copy + button) can run taller than common short/mid
	   viewport heights (confirmed live at both 1280x720 and tablet
	   768x1024 — the title wraps to more lines at narrower widths,
	   pushing the whole slide taller there too, not just on desktop).
	   100px keeps the dots on-screen at those heights without sitting so
	   far from the edge that they read as disconnected from "the
	   bottom" on taller viewports. */
	bottom: 100px;
	transform: translateX( -50% );
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 4;
}

#content .icpep-carousel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 9999px;
	background-color: rgba( 11, 19, 43, 0.28 );
	cursor: pointer;
	transition: width 0.3s cubic-bezier( 0.4, 0, 0.2, 1 ), background-color 0.25s ease;
}

#content .icpep-carousel-dot:hover {
	background-color: rgba( 11, 19, 43, 0.5 );
}

#content .icpep-carousel-dot.is-active,
#content .icpep-carousel-dot.is-active:hover {
	width: 28px;
	background-color: #0284c7;
}

@media ( max-width: 767px ) {
	#content .icpep-carousel-dots {
		bottom: 18px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-carousel-dot {
		transition: none;
	}
}

/*
 * Slide 1's own Doha-skyline photo background (the Regional Convention
 * announcement) — imported into the media library as attachment 315;
 * this hardcodes its resolved /wp-content/uploads/... path directly
 * (this is a static CSS file, not PHP, so there's no site_url()/
 * HTTP_HOST concern to route around here — see build-home-page.php's
 * icpep_home_image() for why that matters in the migration script
 * itself). `.icpep-hero__mesh` (home-slide-1-mesh, a child div, z-index
 * 0, subtle dot-grid) still sits between the photo and the scrim below;
 * kept for texture continuity with slide 2 rather than removed.
 *
 * The `::before` scrim is what keeps the h2/description/button legible
 * over a bright sky photo while staying light-mode: a white wash, most
 * opaque at the very top (where the header nav sits — its pill is
 * transparent until scrolled, so it depends on the page behind it being
 * light the same way it does over slide 2) and at the bottom edge,
 * slightly more transparent through the middle so the skyline still
 * reads as a photo rather than a flat white rectangle. A dark navy
 * version of this scrim (with light text) was tried first and
 * reverted — it broke the header nav's legibility, since the nav's
 * default dark-on-transparent text assumes a light page background
 * above the fold, and it broke the carousel's otherwise-consistent
 * light-mode look (slide 2 is a light background with dark text; only
 * this slide was dark). z-index 0 with no explicit DOM position
 * relative to home-slide-1-mesh — paints first (before) since generated
 * content is inserted as the element's first box, so the dot-grid mesh
 * (an actual later DOM child, same z-index) layers on top of it, then
 * home-slide-1-in (z-index 1) on top of both.
 */
#content .elementor-element-home-slide-1 {
	background-image: url( '/wp-content/uploads/2026/08/website_slider2_background.png' );
	background-position: center 35%;
	background-size: cover;
	background-repeat: no-repeat;
}

#content .elementor-element-home-slide-1::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( 255, 255, 255, 0.88 ) 0%,
		rgba( 255, 255, 255, 0.7 ) 30%,
		rgba( 255, 255, 255, 0.58 ) 50%,
		rgba( 255, 255, 255, 0.72 ) 70%,
		rgba( 255, 255, 255, 0.9 ) 100%
	);
}

/*
 * Slide 2's (the hero's) own Doha-skyline + ICpEP-emblem photo
 * background — attachment 337, imported the same way as Slide 1's
 * (see that comment above for why the path is hardcoded here rather
 * than resolved via PHP). Same light wash treatment as Slide 1 for the
 * same reasons: keeps the header nav and the carousel's light-mode
 * look consistent, and lets every existing dark-on-light color in this
 * slide (home003's h1, home004's paragraph, the team photo's own
 * drop-shadow assuming a light backdrop) keep working unmodified — no
 * separate text-color override needed here either.
 *
 * z-index layering is identical to Slide 1's: this `::before` (z-index
 * 0, no explicit DOM position) paints first since generated content is
 * inserted as the element's first box, so home001 (the existing
 * decorative shapes+mesh HTML widget, an actual later DOM child, same
 * z-index) layers on top of it, then home-s1-in (z-index 1, the actual
 * text/photo content) on top of both.
 */
#content .elementor-element-home-slide-2 {
	background-image: url( '/wp-content/uploads/2026/08/home-page-background.png' );
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

#content .elementor-element-home-slide-2::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( 255, 255, 255, 0.88 ) 0%,
		rgba( 255, 255, 255, 0.7 ) 30%,
		rgba( 255, 255, 255, 0.58 ) 50%,
		rgba( 255, 255, 255, 0.72 ) 70%,
		rgba( 255, 255, 255, 0.9 ) 100%
	);
}

/* ----------------------------------------------------------------------
   Slide 1 — centered single-column announcement layout (eyebrow, h2,
   copy, button). The photo background above uses a light scrim
   specifically so these dark-on-light colors keep working unmodified
   on top of it — no separate text-color override needed.
   ---------------------------------------------------------------------- */
#content .elementor-element-home-slide-1-in {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin-inline: auto;
	width: 100%;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
	text-align: center;
}

#content .elementor-element-home-slide-1-in > .e-con-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

#content .elementor-element-home-slide-1-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-xs );
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --icpep-cyan-deep );
	background-color: rgba( 255, 255, 255, 0.55 );
	backdrop-filter: blur( 10px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 10px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.7 );
	border-radius: 999px;
	padding: 0.45em 1.1em;
	box-shadow: var( --icpep-shadow-sm );
}

@media ( prefers-reduced-transparency: reduce ) {
	#content .elementor-element-home-slide-1-eyebrow .elementor-heading-title {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: var( --icpep-card-border );
	}
}

#content .elementor-element-home-slide-1-title .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-xl );
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var( --e-global-color-primary, #0b132b );
	max-width: 18ch;
}

#content .elementor-element-home-slide-1-desc p {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-md );
	line-height: 1.6;
	color: var( --e-global-color-text, #1f2937 );
	max-width: 52ch;
	margin: 0;
}

#content .elementor-element-home-slide-1-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	font-family: var( --e-global-typography-accent-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-base );
	padding: 0.9em 2em;
	border-radius: 999px;
	margin-top: 0.5rem;
	/* cyan-deep, not raw Secondary — same white-button-text contrast
	   reasoning as home005's button above. */
	background-color: var( --icpep-cyan-deep );
	color: #ffffff;
	border: 2px solid transparent;
	box-shadow: var( --icpep-shadow-md ), 0 8px 20px -6px rgba( 0, 163, 224, 0.45 );
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#content .elementor-element-home-slide-1-cta .elementor-button:hover {
	background-color: var( --icpep-cyan-deeper );
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: var( --icpep-shadow-lg ), 0 12px 24px -6px rgba( 0, 163, 224, 0.5 );
}

@media ( max-width: 640px ) {
	#content .elementor-element-home-slide-1-title .elementor-heading-title {
		font-size: var( --icpep-fs-lg );
		max-width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#content .elementor-element-home-slide-1-cta .elementor-button {
		transition: none;
	}

	#content .elementor-element-home-slide-1-cta .elementor-button:hover {
		transform: none;
	}
}

/* ==========================================================
   Section 2 — Pillars
   ========================================================== */

#content .elementor-element-home-s2 {
	background-color: #ffffff;
	padding-block: clamp( 60px, 8vw, 100px );
}

#content .elementor-element-home-s2-in {
	max-width: var( --icpep-section-max-width, 1280px );
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}

/* Section 2 header — left-aligned intro (headline + one paragraph)
   above the 4-card grid, capped at editorial reading width rather than
   stretched to the section's full 1280px. */
#content .elementor-element-home-pillars-title {
	max-width: 860px;
}

#content .elementor-element-home-pillars-title .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 800;
	font-size: clamp( 1.85rem, 1.4rem + 2vw, 2.75rem );
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary, #0b132b );
	margin-bottom: 1.25rem;
}

#content .elementor-element-home-pillars-desc {
	max-width: 860px;
	margin-bottom: clamp( 2rem, 4vw, 3.5rem );
}

#content .elementor-element-home-pillars-desc p {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-base );
	line-height: 1.7;
	color: #475569;
	margin: 0;
}

#content .elementor-element-home-pillars-grid > .e-con-inner {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 1.25rem, 3vw, 1.75rem );
}

@media ( max-width: 1024px ) {
	#content .elementor-element-home-pillars-grid > .e-con-inner {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 640px ) {
	#content .elementor-element-home-pillars-grid > .e-con-inner {
		grid-template-columns: 1fr;
	}
}

/* Pillar cards — flat white surface, not the glass-card recipe used
   elsewhere: at 4-up the cards are narrower, and a busier translucent
   background fought both the new line icons and the watermark number
   for attention. */
#content .elementor-element-home-pillar-1,
#content .elementor-element-home-pillar-2,
#content .elementor-element-home-pillar-3,
#content .elementor-element-home-pillar-4 {
	position: relative;
	padding: 2rem 1.5rem;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var( --icpep-card-border );
	border-radius: 16px;
	box-shadow: 0 4px 20px -2px rgba( 11, 19, 43, 0.05 );
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#content .elementor-element-home-pillar-1:hover,
#content .elementor-element-home-pillar-2:hover,
#content .elementor-element-home-pillar-3:hover,
#content .elementor-element-home-pillar-4:hover {
	transform: translateY( -4px );
	border-color: rgba( 0, 163, 224, 0.4 );
	box-shadow: 0 12px 30px -4px rgba( 11, 19, 43, 0.1 );
}

@media ( prefers-reduced-motion: reduce ) {
	#content .elementor-element-home-pillar-1,
	#content .elementor-element-home-pillar-2,
	#content .elementor-element-home-pillar-3,
	#content .elementor-element-home-pillar-4 {
		transition: none;
	}

	#content .elementor-element-home-pillar-1:hover,
	#content .elementor-element-home-pillar-2:hover,
	#content .elementor-element-home-pillar-3:hover,
	#content .elementor-element-home-pillar-4:hover {
		transform: none;
	}
}

/* Icon — 24x24 line-art SVG (see build-home-page.php's $pillars array)
   rendered at 48px. `color` feeds the paths using `stroke="currentColor"`;
   the cyan accent paths carry their own color inline since they need a
   second, different color the same `currentColor` can't provide. */
#content .elementor-element-home-pillar-1-icon,
#content .elementor-element-home-pillar-2-icon,
#content .elementor-element-home-pillar-3-icon,
#content .elementor-element-home-pillar-4-icon {
	margin-bottom: 1.25rem;
}

#content .elementor-element-home-pillar-1-icon svg,
#content .elementor-element-home-pillar-2-icon svg,
#content .elementor-element-home-pillar-3-icon svg,
#content .elementor-element-home-pillar-4-icon svg {
	display: block;
	width: 48px;
	height: 48px;
	color: var( --e-global-color-primary, #0b132b );
}

#content .elementor-element-home-pillar-1-title .elementor-heading-title,
#content .elementor-element-home-pillar-2-title .elementor-heading-title,
#content .elementor-element-home-pillar-3-title .elementor-heading-title,
#content .elementor-element-home-pillar-4-title .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.005em;
	color: var( --e-global-color-primary, #0b132b );
}

#content .elementor-element-home-pillar-1-desc p,
#content .elementor-element-home-pillar-2-desc p,
#content .elementor-element-home-pillar-3-desc p,
#content .elementor-element-home-pillar-4-desc p {
	position: relative;
	z-index: 2;
	color: var( --e-global-color-text, #1f2937 );
	font-size: var( --icpep-fs-base );
	line-height: 1.65;
	margin: 0.75rem 0 0;
}

/* Watermark number — a large outlined numeral pinned to the card's
   bottom-right corner, behind the icon/title/description. `z-index:-1`
   on a positioned descendant of a `position:relative` ancestor paints
   below that ancestor's in-flow content while staying above its own
   background — exactly the "behind the text, above the white card"
   layering a watermark needs. */
#content .elementor-element-home-pillar-1-num,
#content .elementor-element-home-pillar-2-num,
#content .elementor-element-home-pillar-3-num,
#content .elementor-element-home-pillar-4-num {
	position: absolute;
	right: 1.25rem;
	bottom: 0.5rem;
	z-index: -1;
	pointer-events: none;
}

#content .elementor-element-home-pillar-1-num .elementor-heading-title,
#content .elementor-element-home-pillar-2-num .elementor-heading-title,
#content .elementor-element-home-pillar-3-num .elementor-heading-title,
#content .elementor-element-home-pillar-4-num .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 800;
	font-size: 3rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba( 0, 163, 224, 0.25 );
}

/* ==========================================================
   Section 3 — Chapter identity
   ========================================================== */

#content .elementor-element-home-s3 {
	background-color: var( --e-global-color-primary, #0b132b );
	background-image:
		radial-gradient( circle at 15% 20%, rgba( 0, 163, 224, 0.18 ) 0%, rgba( 0, 163, 224, 0 ) 45% ),
		radial-gradient( circle at 85% 85%, rgba( 0, 163, 224, 0.12 ) 0%, rgba( 0, 163, 224, 0 ) 45% );
	/* Tightened from clamp(60px,8vw,100px) — with the redundant stat
	   tiles and image caption gone, this section is meant to read in
	   one viewport, not need generous breathing room top and bottom. */
	padding-block: clamp( 48px, 5vw, 64px );
}

#content .elementor-element-home-s3-in {
	max-width: var( --icpep-section-max-width, 1280px );
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}

/* Badge / eyebrow — same cyan-on-navy contrast fix as the credential
   values below (#4dceff, not raw Secondary; see that rule's comment). */
#content .elementor-element-home-about-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-xs );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4dceff;
	background-color: rgba( 0, 163, 224, 0.14 );
	border: 1px solid rgba( 0, 163, 224, 0.3 );
	border-radius: 999px;
	padding: 0.4em 1.1em;
	margin-bottom: 1rem;
}

/* Header row — title/subtitle on the left, CTA on the right; wraps to
   a stacked column once they can't share a line comfortably. Gap to
   the split below is tightened from clamp(2.5rem,5vw,3.5rem). */
#content .elementor-element-home-about-header > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: clamp( 1.5rem, 3vw, 2.5rem );
}

#content .elementor-element-home-about-header-text {
	flex: 1 1 480px;
}

#content .elementor-element-home-about-title .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 800;
	font-size: var( --icpep-fs-lg );
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #ffffff;
}

#content .elementor-element-home-about-subtitle p {
	max-width: 60ch;
	/* #b4bdcb, not slate-400 (#94a3b8) — #94a3b8 clears AA (4.5:1) on Navy
	   but falls short of AAA's 7:1 (7.17:1 here, too tight a margin to
	   trust against the section's own radial-glow overlays). #b4bdcb
	   holds 9.70:1 on plain Navy. */
	color: #b4bdcb;
	font-size: var( --icpep-fs-base );
	line-height: 1.6;
	margin: 0.6rem 0 0;
}

#content .elementor-element-home-about-cta {
	flex: 0 0 auto;
}

#content .elementor-element-home-about-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 48px;
	font-family: var( --e-global-typography-accent-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	padding: 0.75em 1.5em;
	border-radius: 999px;
	background-color: transparent;
	color: #ffffff;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	white-space: nowrap;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

#content .elementor-element-home-about-cta .elementor-button:hover,
#content .elementor-element-home-about-cta .elementor-button:focus-visible {
	background-color: #ffffff;
	color: var( --e-global-color-primary, #0b132b );
	border-color: #ffffff;
	transform: translateY( -2px );
}

#content .elementor-element-home-about-cta .elementor-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	#content .elementor-element-home-about-cta .elementor-button {
		transition: none;
	}

	#content .elementor-element-home-about-cta .elementor-button:hover {
		transform: none;
	}
}

/* 2-column split — mission/features on the left, the courtesy-call
   photo on the right; the left column carries a touch more width
   since it holds the denser content. */
#content .elementor-element-home-about-grid > .e-con-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp( 1.5rem, 4vw, 3rem );
	align-items: center;
}

@media ( max-width: 900px ) {
	#content .elementor-element-home-about-grid > .e-con-inner {
		grid-template-columns: 1fr;
	}
}

#content .elementor-element-home-about-left > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

#content .elementor-element-home-about-lead p {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: 1.1rem;
	line-height: 1.5;
	color: #f8fafc;
	margin: 0;
}

/* Feature list — plain HTML/CSS rather than Elementor's Icon List
   widget, so the "+" glyph and its color are exact CSS, not a Font
   Awesome glyph pulled from an icon library. Tightened (14.4px text,
   smaller gap) now that these 5 bullets are the section's only
   credentials listing — no more duplicating 3 of them in a stat tile
   row below. */
#content .elementor-element-home-about-list .icpep-home-about__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

#content .elementor-element-home-about-list .icpep-home-about__list li {
	position: relative;
	padding-left: 1.6rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #e2e8f0;
}

#content .elementor-element-home-about-list .icpep-home-about__list li::before {
	content: '+';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	font-size: 1.15em;
	line-height: 1.45;
	color: #4dceff;
}

/* Right column — the Philippine Embassy courtesy-call photo. Its
   caption ribbon is baked into the image itself (see the migration
   script's comment), so there's no separate figcaption underneath. */
#content .elementor-element-home-about-image {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	box-shadow: 0 20px 48px -12px rgba( 0, 0, 0, 0.35 );
}

#content .elementor-element-home-about-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================
   Sections 4-6 — Feed section headers (shared pattern)
   ========================================================== */

#content .elementor-element-home-s4,
#content .elementor-element-home-s6 {
	background-color: var( --icpep-mist );
}

#content .elementor-element-home-s5 {
	background-color: #ffffff;
}

#content .elementor-element-home-s4,
#content .elementor-element-home-s5,
#content .elementor-element-home-s6 {
	padding-block: clamp( 60px, 8vw, 100px );
}

#content .elementor-element-home-s4-in,
#content .elementor-element-home-s5-in,
#content .elementor-element-home-s6-in {
	max-width: var( --icpep-section-max-width, 1280px );
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}

#content .elementor-element-home-events-header,
#content .elementor-element-home-leadership-header,
#content .elementor-element-home-news-header {
	margin-bottom: clamp( 2rem, 5vw, 3rem );
}

#content .elementor-element-home-events-header > .e-con-inner,
#content .elementor-element-home-leadership-header > .e-con-inner,
#content .elementor-element-home-news-header > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

#content .elementor-element-home007 .elementor-heading-title,
#content .elementor-element-home010 .elementor-heading-title,
#content .elementor-element-home013 .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-lg );
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary, #0b132b );
}

#content .elementor-element-home008 .elementor-heading-title,
#content .elementor-element-home011 .elementor-heading-title,
#content .elementor-element-home014 .elementor-heading-title {
	font-size: var( --icpep-fs-sm );
}

#content .elementor-element-home008 a,
#content .elementor-element-home011 a,
#content .elementor-element-home014 a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	/* cyan-deep, not raw Secondary — text on white/mist only clears 2.87:1. */
	color: var( --icpep-cyan-deep );
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

#content .elementor-element-home008 a::after,
#content .elementor-element-home011 a::after,
#content .elementor-element-home014 a::after {
	content: '\2192';
	margin-left: 0.35rem;
	transition: transform 0.15s ease;
}

#content .elementor-element-home008 a:hover,
#content .elementor-element-home011 a:hover,
#content .elementor-element-home014 a:hover,
#content .elementor-element-home008 a:focus-visible,
#content .elementor-element-home011 a:focus-visible,
#content .elementor-element-home014 a:focus-visible {
	color: var( --icpep-cyan-deeper );
}

#content .elementor-element-home008 a:hover::after,
#content .elementor-element-home011 a:hover::after,
#content .elementor-element-home014 a:hover::after,
#content .elementor-element-home008 a:focus-visible::after,
#content .elementor-element-home011 a:focus-visible::after,
#content .elementor-element-home014 a:focus-visible::after {
	transform: translateX( 3px );
}

#content .elementor-element-home008 a:focus-visible,
#content .elementor-element-home011 a:focus-visible,
#content .elementor-element-home014 a:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
	border-radius: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	#content .elementor-element-home008 a,
	#content .elementor-element-home011 a,
	#content .elementor-element-home014 a,
	#content .elementor-element-home008 a::after,
	#content .elementor-element-home011 a::after,
	#content .elementor-element-home014 a::after {
		transition: none;
	}
}