@charset "UTF-8";
/*
 * Ascenthya — home page: hero corrections and the narrative section.
 *
 * SPECIFICITY NOTE. Elementor writes every widget's own settings as
 * `.elementor-19 .elementor-element.elementor-element-xxxxx .thing` — four
 * class selectors. To override without `!important` these rules repeat
 * `.elementor-element` to match that weight and add a type selector (`body`)
 * to win the tie. A deliberate per-widget setting made later in the builder
 * can still be given precedence by raising it the same way.
 *
 * The hero is addressed by its container id class rather than a class set in
 * the builder: classes added there did not reach the page while Elementor's
 * element cache was live, and the id removes that dependency.
 */

/* ===========================================================================
 * 1. Hero
 * ======================================================================== */

/* The 10px white frame around the video was Elementor's default container
   padding: the background video fills the padding box, so the page background
   showed as an even border on all four sides. */
body .elementor-element.elementor-element.elementor-element-c30a942,
body .elementor-element.elementor-element-c30a942 .elementor-element.e-con { padding: 0; }

body .elementor-element.elementor-element.elementor-element-c30a942 { overflow: hidden; }

body .elementor-element.elementor-element.elementor-element-c30a942,
body .elementor-element.elementor-element-c30a942 .swiper-slide > .elementor-element.e-con { min-height: 88vh; }

body .elementor-element.elementor-element-c30a942 .e-n-carousel,
body .elementor-element.elementor-element-c30a942 .e-n-carousel .swiper-slide { height: 88vh; }

body .elementor-element.elementor-element-c30a942 video { object-fit: cover; }

/* --- slide layout -------------------------------------------------------- */

/*
 * `stage` = the container holding the background, the headline and the bottom
 * copy. It is identified by the text editor it contains, not by the background:
 * some slides use a background video and others a background slideshow, and a
 * selector keyed to the video silently skipped half of them.
 *
 * The headline takes the free space and centres in it; the copy and button sit
 * on the floor. `flex-start` rather than `flex-end` on purpose — an overfull
 * flex-end column overflows upward, which put the headline behind the header.
 */
body .elementor-element.elementor-element-c30a942 .e-con:has(> .elementor-widget-text-editor) {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 88vh;
	overflow: hidden;
	padding: 0 var(--asc-gutter, clamp(18px, 3.2vw, 44px)) clamp(30px, 4.4vh, 54px);
}

/* Legibility scrim. White text over a bright, moving frame is a coin toss
   without one; this is the same device Apollo uses under its hero copy. */
body .elementor-element.elementor-element-c30a942 .e-con:has(> .elementor-widget-text-editor)::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 56%;
	background: linear-gradient(180deg, rgba(6, 26, 24, 0) 0%, rgba(6, 26, 24, .34) 46%, rgba(6, 26, 24, .68) 100%);
	pointer-events: none;
	z-index: 0;
}

body .elementor-element.elementor-element-c30a942 .e-con:has(> .elementor-widget-text-editor) > .elementor-element {
	position: relative;
	z-index: 1;
}

/* --- the headline -------------------------------------------------------- */

/* The three words sat in fixed grid columns at 50/44/45px in a font that is
   not loaded anywhere on the site, so they neither aligned nor centred. */
body .elementor-element.elementor-element-c30a942 .e-con:has(> .elementor-widget-text-editor) > .elementor-element.e-con {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	/* Centring in the space above the copy sat the line higher than Apollo's.
	   The padding shifts the centred row down by half its value. */
	padding-top: clamp(36px, 10vh, 116px);
}

/*
 * align-self/height matter as much as the flex properties here: Elementor
 * stretches .e-con-inner to its parent's height, and `align-items: baseline`
 * inside a 563px-tall line box put the words at the very top of the hero,
 * behind the header. Sizing the row to its content puts it back in the middle.
 */
body .elementor-element.elementor-element-c30a942 .e-con-inner:has(> .elementor-widget-heading) {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;
	align-self: center;
	flex: 0 0 auto;
	height: auto;
	min-height: 0;
	width: 100%;
	max-width: none;
	text-align: center;
}

body .elementor-element.elementor-element-c30a942 .e-con-inner:has(> .elementor-widget-heading) > .elementor-element.elementor-widget-heading {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	grid-column: auto;
	/* Absolute, not em. This element's own font-size is 16px, so an em value
	   here is measured against 16px and not against the 74px headline — which
	   is why `.19em` produced a 3px gap between the words. */
	margin-inline: clamp(9px, 1.05vw, 21px);
	/* The clip the words move out of; the padding keeps descenders inside it. */
	overflow: hidden;
	padding-bottom: clamp(7px, 1vw, 15px);
}

body .elementor-element.elementor-element.elementor-element-c30a942 .elementor-heading-title {
	display: block;
	font-size: clamp(34px, 5vw, 74px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.02;
	letter-spacing: -.012em;
	color: #fff;
	text-transform: none;
	will-change: transform;
	backface-visibility: hidden;
}

/*
 * The two outer words are serif and the subject in the middle is grotesque —
 * the contrast is what makes the line read as a phrase rather than a heading.
 *
 * The serif is set 1.10× larger than the grotesque on purpose. EB Garamond's
 * cap height is about 0.66em against Inter's 0.727em, so at a matching
 * font-size the serif words look noticeably smaller. This equalises the caps,
 * which is what the eye actually measures.
 */
body .elementor-element.elementor-element.elementor-element-c30a942 .e-con-inner > .elementor-widget-heading:nth-child(1) .elementor-heading-title,
body .elementor-element.elementor-element.elementor-element-c30a942 .e-con-inner > .elementor-widget-heading:nth-child(3) .elementor-heading-title {
	font-family: var(--asc-serif, "EB Garamond", Georgia, serif);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(37px, 5.5vw, 81px);
	letter-spacing: .005em;
}
body .elementor-element.elementor-element.elementor-element-c30a942 .e-con-inner > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
	font-family: var(--asc-sans, "Inter", Arial, sans-serif);
	font-weight: 600;
	font-style: normal;
	letter-spacing: -.025em;
}

/*
 * Elementor's own entrance animations were still bound to these widgets. Its
 * JS swaps .elementor-invisible for .animated .fadeInX on view, so two
 * animation systems were driving the same elements — that is the stutter.
 * Neutralise Elementor's, then run one clean rise from below.
 */
body .elementor-element.elementor-element-c30a942 .elementor-widget-heading.animated,
body .elementor-element.elementor-element-c30a942 .elementor-widget-heading.elementor-invisible,
body .elementor-element.elementor-element-c30a942 .elementor-invisible {
	animation-name: none;
	opacity: 1;
	visibility: visible;
}

/*
 * Three words, three directions: the first wipes in from the left, the subject
 * rises from below, the last wipes in from the right — each clipped by its own
 * box. Slow and long-eased on purpose; a quick reveal reads as a web banner,
 * a slow one reads as a title card.
 */
body .elementor-element.elementor-element-c30a942 .swiper-slide-active .e-con-inner > .elementor-widget-heading:nth-child(1) .elementor-heading-title {
	animation: ascHeroFromLeft 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
body .elementor-element.elementor-element-c30a942 .swiper-slide-active .e-con-inner > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
	animation: ascHeroFromBelow 1.15s cubic-bezier(.16, 1, .3, 1) .13s both;
}
body .elementor-element.elementor-element-c30a942 .swiper-slide-active .e-con-inner > .elementor-widget-heading:nth-child(3) .elementor-heading-title {
	animation: ascHeroFromRight 1.15s cubic-bezier(.16, 1, .3, 1) .26s both;
}

@keyframes ascHeroFromLeft {
	from { transform: translate3d(-112%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
@keyframes ascHeroFromBelow {
	from { transform: translate3d(0, 118%, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
@keyframes ascHeroFromRight {
	from { transform: translate3d(112%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* --- the supporting copy ------------------------------------------------- */

/* Was Garamond at 21px over a moving picture — handsome and hard to read.
   Apollo sets this same block in its grotesque, small, with open leading. */
body .elementor-element.elementor-element.elementor-element-c30a942 .elementor-widget-text-editor,
body .elementor-element.elementor-element.elementor-element-c30a942 .elementor-widget-text-editor p {
	font-family: var(--asc-sans, "Inter", Arial, sans-serif);
	font-size: clamp(15px, 1.12vw, 17px);
	font-weight: 400;
	line-height: 1.62;
	letter-spacing: .002em;
	text-align: left;
	color: rgba(255, 255, 255, .93);
}

body .elementor-element.elementor-element.elementor-element-c30a942 .elementor-widget-text-editor {
	width: 100%;
	max-width: min(62ch, 52%);
	margin: 0 0 clamp(16px, 2vh, 24px);
	align-self: flex-start;
}

body .elementor-element.elementor-element.elementor-element-c30a942 .elementor-widget-button {
	width: auto;
	margin: 0;
	padding: 0;
	align-self: flex-start;
	text-align: left;
}

@media (max-width: 1024px) {
	/* Below the desktop breakpoint the 52% column left the copy in a seven-line
	   ribbon; it takes the full measure instead. */
	body .elementor-element.elementor-element.elementor-element-c30a942 .elementor-widget-text-editor { max-width: min(62ch, 100%); }
}

@media (max-width: 767px) {
	body .elementor-element.elementor-element.elementor-element-c30a942,
	body .elementor-element.elementor-element-c30a942 .swiper-slide > .elementor-element.e-con,
	body .elementor-element.elementor-element-c30a942 .e-con:has(> .elementor-widget-text-editor) { min-height: 78vh; }
	body .elementor-element.elementor-element-c30a942 .e-n-carousel,
	body .elementor-element.elementor-element-c30a942 .e-n-carousel .swiper-slide { height: 78vh; }
	body .elementor-element.elementor-element.elementor-element-c30a942 .elementor-widget-text-editor { max-width: 100%; }
}

/* ===========================================================================
 * 2. The narrative section
 * ======================================================================== */

.asc-story,
.asc-story *,
.asc-story *::before,
.asc-story *::after { box-sizing: border-box; }

.asc-story {
	position: relative;
	background: var(--asc-green, #11676A);
	color: #fff;
	font-family: var(--asc-sans, "Inter", Arial, sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* Tight enough that the text fills the green rather than floating in it. */
.asc-story__stage { padding: clamp(48px, 5.2vw, 76px) 0 clamp(52px, 5.6vw, 82px); }

/* Two near-equal columns with a wide gutter, measured off apollo.com: its left
   block runs to about 44% of the shell and the right starts at about 51%. */
.asc-story__inner {
	width: 100%;
	max-width: var(--asc-shell, 1280px);
	margin-inline: auto;
	padding-inline: var(--asc-gutter, clamp(18px, 3.2vw, 44px));
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	gap: clamp(36px, 5.5vw, 92px);
	align-items: start;
}

/*
 * The heading holds still while the argument moves past it — the effect
 * apollo.com gets, without pinning the whole section. Pinning meant a full
 * window of empty green before any words appeared, and a long stretch of it
 * afterwards.
 */
.asc-story__lead {
	position: sticky;
	top: clamp(92px, 15vh, 168px);
}

.asc-story__title {
	margin: 0;
	font-family: var(--asc-serif, "EB Garamond", Georgia, serif);
	font-weight: 400;
	font-size: clamp(29px, 3.4vw, 50px);
	line-height: 1.14;
	letter-spacing: -.005em;
	color: #fff;
	text-wrap: balance;
}

.asc-story__cta {
	display: inline-flex;
	align-items: center;
	margin-top: clamp(24px, 2.6vw, 36px);
	padding: 11px 24px;
	background: #fff;
	color: var(--asc-green-deep, #0B4749);
	font-size: 14.5px;
	line-height: 1.2;
	letter-spacing: .01em;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .2s var(--asc-ease, ease), color .2s var(--asc-ease, ease);
}
.asc-story__cta:hover { background: var(--asc-gold, #C99331); color: #fff; }
.asc-story__cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.asc-story__viewport { min-width: 0; }

.asc-beats { display: flex; flex-direction: column; gap: clamp(20px, 2.1vw, 30px); }

.asc-beats p {
	margin: 0;
	font-family: var(--asc-serif, "EB Garamond", Georgia, serif);
	font-size: clamp(22px, 2.05vw, 32px);
	line-height: 1.38;
	color: #fff;
	text-wrap: pretty;
}

/* --------------------------------------------------------- pinned reading */

/*
 * apollo.com's own treatment, measured off the reference: the section holds
 * still while the right column travels up through a window. The window has a
 * HARD edge at the top — a line is cut mid-glyph as it leaves, which is what
 * makes it read as motion rather than as a fade — and a short gradient at the
 * bottom, which is the only thing telling the reader there is more below.
 *
 * No opacity is animated. Two earlier versions dimmed whole paragraphs and it
 * read as text that had failed to load; the fade here is 12% of one edge.
 *
 * Everything is gated on .is-pinned, which JS adds only on a wide viewport with
 * motion allowed. Without it the section is an ordinary two-column block with
 * every word at full strength — which is also what a failed script leaves.
 */
.asc-story.is-pinned { height: var(--asc-story-h, 165vh); }

.asc-story.is-pinned .asc-story__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.asc-story.is-pinned .asc-story__inner { align-items: center; }

.asc-story.is-pinned .asc-story__lead { position: static; }

.asc-story.is-pinned .asc-story__viewport {
	height: min(78vh, 760px);
	overflow: hidden;
	/* Keep this figure and ASC_FADE in ascenthya-sections.js in agreement: the
	   script stops the travel with the last line above the fade, or the closing
	   sentence would never be readable at full strength. */
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
}

.asc-story.is-pinned .asc-beats {
	transform: translate3d(0, calc(-1 * var(--asc-story-travelled, 0px)), 0);
	will-change: transform;
}

@media (max-width: 900px) {
	.asc-story__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 6vw, 40px); }
	.asc-story__lead { position: static; }
}

/* ===========================================================================
 * 3. Insights overview
 *
 * Reads the section's own published posts. Apollo's homepage gives its
 * Insights block one lead item and a short stack beside it; this borrows that
 * arrangement and none of its styling, and sits on white so the green section
 * above it stays the page's one heavy block.
 * ======================================================================== */

.asc-ins,
.asc-ins *,
.asc-ins *::before,
.asc-ins *::after { box-sizing: border-box; }

.asc-ins {
	background: #fff;
	color: var(--asc-ink, #1F2933);
	font-family: var(--asc-sans, "Inter", Arial, sans-serif);
	padding: clamp(56px, 6.5vw, 96px) 0 clamp(64px, 7vw, 104px);
	-webkit-font-smoothing: antialiased;
}

.asc-ins__inner {
	width: 100%;
	max-width: var(--asc-shell, 1280px);
	margin-inline: auto;
	padding-inline: var(--asc-gutter, clamp(18px, 3.2vw, 44px));
}

.asc-ins__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 16px 32px;
	padding-bottom: clamp(22px, 2.4vw, 34px);
	border-bottom: 1px solid var(--asc-line, rgba(31, 41, 51, .16));
}

.asc-ins__eyebrow {
	grid-column: 1 / -1;
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--asc-green, #11676A);
}

.asc-ins__title {
	margin: 0;
	font-family: var(--asc-serif, "EB Garamond", Georgia, serif);
	font-weight: 400;
	font-size: clamp(27px, 3vw, 44px);
	line-height: 1.15;
	letter-spacing: -.005em;
	text-wrap: balance;
}

.asc-ins__all {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	font-size: 14.5px;
	color: var(--asc-green, #11676A);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	transition: color .18s var(--asc-ease, ease);
}
.asc-ins__all:hover { color: var(--asc-green-deep, #0B4749); }

.asc-ins__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(32px, 4.5vw, 72px);
	padding-top: clamp(28px, 3.2vw, 44px);
}

/* --- the lead ------------------------------------------------------------ */

.asc-ins__lead { display: block; text-decoration: none; color: inherit; }

.asc-ins__shot {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
	background: var(--asc-surface-alt, #F3F6F4);
	aspect-ratio: 16 / 9;
}
.asc-ins__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--asc-ease, ease);
}
.asc-ins__lead:hover .asc-ins__shot img { transform: scale(1.03); }

.asc-ins__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 12.5px;
	color: var(--asc-ink-soft, #56646F);
}

.asc-ins__chip {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border: 1px solid rgba(17, 103, 106, .3);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--asc-green, #11676A);
}

.asc-ins__lead-title {
	display: block;
	font-family: var(--asc-serif, "EB Garamond", Georgia, serif);
	font-size: clamp(23px, 2.1vw, 32px);
	line-height: 1.22;
	transition: color .18s var(--asc-ease, ease);
}
.asc-ins__lead:hover .asc-ins__lead-title { color: var(--asc-green, #11676A); }

.asc-ins__stand {
	display: block;
	margin-top: 12px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--asc-ink-soft, #56646F);
	max-width: 56ch;
}

/* --- the stack ----------------------------------------------------------- */

.asc-ins__list { list-style: none; margin: 0; padding: 0; }
.asc-ins__list > li + li { margin-top: 4px; border-top: 1px solid var(--asc-line, rgba(31, 41, 51, .16)); }

.asc-ins__row {
	display: block;
	padding: 20px 0;
	text-decoration: none;
	color: inherit;
}

.asc-ins__row-title {
	display: block;
	font-family: var(--asc-serif, "EB Garamond", Georgia, serif);
	font-size: clamp(18px, 1.4vw, 22px);
	line-height: 1.3;
	transition: color .18s var(--asc-ease, ease);
}
.asc-ins__row:hover .asc-ins__row-title { color: var(--asc-green, #11676A); }

@media (max-width: 900px) {
	.asc-ins__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 6vw, 40px); }
	.asc-ins__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.asc-ins__all { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	.asc-ins__lead:hover .asc-ins__shot img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	body .elementor-element.elementor-element-c30a942 .swiper-slide-active .e-con-inner > .elementor-widget-heading .elementor-heading-title { animation: none; }
}