/*
 * Helios1 Capital — layout and motion utilities for the 2026 redesign.
 * Paired with assets/js/h1c-motion.js. Every rule here covers something
 * Elementor Free has no control for; colours, type and spacing stay in the
 * widgets and the Kit Global. No !important.
 */

/* ---------- Header: fixed bar (Elementor Free has no sticky control) ---------- */
.h1c-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: box-shadow 0.3s ease;
}
.h1c-header.is-scrolled { box-shadow: 0 10px 40px -20px rgba(13, 27, 40, 0.35); }
body.admin-bar .h1c-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .h1c-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .h1c-header { top: 0; } }

/* Visually hidden label that stays in the accessibility tree (icon-only buttons). */
.h1c-sr-label .elementor-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Sticky column (no sticky control in Elementor Free) ---------- */
@media (min-width: 1025px) {
	.h1c-sticky { position: sticky; top: 110px; align-self: flex-start; }
}

/* ---------- Text link: underline that draws on hover ---------- */
.h1c-text-link .elementor-button { position: relative; }
.h1c-text-link .elementor-button::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--e-global-color-secondary, #F39F0E);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.h1c-text-link .elementor-button:hover::after,
.h1c-text-link .elementor-button:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Arrow icon nudges right on hover. */
.h1c-arrow .elementor-button-icon { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.h1c-arrow .elementor-button:hover .elementor-button-icon,
.h1c-arrow .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); }

/* Gold buttons lift with a soft glow (hover animation "float" moves 8px). */
.h1c-btn-lift .elementor-button { transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.h1c-btn-lift .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -14px rgba(243, 159, 14, 0.7);
}

/* ---------- Soft entrance: native "Fade In Up" moves the full block height ---------- */
@keyframes h1cSoftRise {
	from { opacity: 0; transform: translate3d(0, 34px, 0); }
	to { opacity: 1; transform: none; }
}
.h1c-soft-rise.animated.fadeInUp {
	animation-name: h1cSoftRise;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hover zoom for image cards ---------- */
.h1c-zoom-card .elementor-widget-image img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.h1c-zoom-card:hover .elementor-widget-image img { transform: scale(1.06); }
.h1c-zoom-card .elementor-widget-image { overflow: hidden; }

/* ---------- Word reveal mask ---------- */
.h1c-w { display: inline-block; overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; vertical-align: bottom; }
.h1c-w-in { display: inline-block; will-change: transform; }

/* Elements driven by GSAP must not carry Elementor's CSS transform transition
   (.4s on every container): GSAP would read a mid-transition value as the target. */
.h1c-stack-item, .h1c-stack-card, .h1c-stack-content, .h1c-slide-item,
.h1c-hscroll, .h1c-hscroll-track, .h1c-reveal-words .h1c-w-in { transition: none; }

/* ---------- Stacking loan cards ---------- */
.h1c-stack-item { perspective: 600px; }
.h1c-stack-card { will-change: transform; }
.h1c-stack-media { inset: 0; }
.h1c-stack-media .elementor-widget-container,
.h1c-stack-media img { width: 100%; height: 100%; }
.h1c-stack-media img { object-fit: cover; will-change: transform; transition: filter 0.4s ease; }
.h1c-stack-card:hover .h1c-stack-media img { filter: contrast(1.1) brightness(0.82); }

/* ---------- Postcard deck ---------- */
.h1c-deck.is-ready { position: relative; display: block; height: 400px; perspective: 1200px; }
.h1c-deck.is-ready > .h1c-deck-card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 380px;
	max-width: 86vw;
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	pointer-events: none;
}
.h1c-deck.is-ready > .h1c-deck-card.is-active { pointer-events: auto; }
@media (max-width: 560px) { .h1c-deck.is-ready { height: 360px; } }

/* Generated dots (deck and carousel) */
.h1c-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: currentColor;
	opacity: 0.45;
	transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.h1c-dot:hover { opacity: 0.75; }
.h1c-dot.is-active { width: 26px; opacity: 1; background: var(--e-global-color-secondary, #F39F0E); }
/* 24×24 touch target around the small dot (WCAG 2.5.8) */
.h1c-deck-dots, .h1c-cf-dots { gap: 14px; }
.h1c-dot { position: relative; }
.h1c-dot::before { content: ""; position: absolute; inset: -7px -4px; }

/* ---------- Horizontal showcase ---------- */
.h1c-hscroll { overflow: hidden; }
.h1c-hscroll-track { flex-wrap: nowrap; will-change: transform; }
.h1c-hscroll-track > .e-con { flex-shrink: 0; }
@media (min-width: 1025px) {
	.h1c-hscroll-track { padding-left: max(32px, calc((100vw - 1280px) / 2 + 32px)); }
}
@media (max-width: 1024px) {
	.h1c-hscroll-track { overflow-x: auto; scrollbar-width: none; padding-left: 22px; padding-right: 22px; }
	.h1c-hscroll-track::-webkit-scrollbar { display: none; }
}
/* Progress starts empty; the script sets its width while the track scrolls. */
.e-con.h1c-hscroll-bar { --width: 0%; transition: none; }

/* ---------- Coverflow carousel ---------- */
.h1c-coverflow.is-ready {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 470px;
	perspective: 1000px;
	transform-style: preserve-3d;
	-webkit-user-select: none;
	user-select: none;
}
.h1c-coverflow.is-ready > .h1c-cf-card {
	position: absolute;
	width: 440px;
	height: 400px;
	cursor: pointer;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.8s ease, filter 0.8s ease;
}
.h1c-cf-card .h1c-cf-media img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.h1c-cf-card:hover .h1c-cf-media img { transform: scale(1.04); }
.h1c-cf-media { inset: 0; }
.h1c-cf-media .elementor-widget-container, .h1c-cf-media img { width: 100%; height: 100%; }
.h1c-cf-media img { object-fit: cover; }
.h1c-coverflow.is-ready > .is-center { z-index: 10; transform: translateX(0) scale(1.05); box-shadow: 0 28px 60px -15px rgba(13, 27, 40, 0.45); }
.h1c-coverflow.is-ready > .is-left-1 { z-index: 5; transform: translateX(-240px) scale(0.85) translateZ(-40px); filter: brightness(0.92); }
.h1c-coverflow.is-ready > .is-left-2 { z-index: 2; transform: translateX(-430px) scale(0.68) translateZ(-90px); filter: brightness(0.85); }
.h1c-coverflow.is-ready > .is-right-1 { z-index: 5; transform: translateX(240px) scale(0.85) translateZ(-40px); filter: brightness(0.92); }
.h1c-coverflow.is-ready > .is-right-2 { z-index: 2; transform: translateX(430px) scale(0.68) translateZ(-90px); filter: brightness(0.85); }
.h1c-coverflow.is-ready > .is-hidden { opacity: 0; pointer-events: none; transform: scale(0.4) translateZ(-200px); }
@media (max-width: 991px) {
	.h1c-coverflow.is-ready { height: 440px; }
	.h1c-coverflow.is-ready > .h1c-cf-card { width: 360px; height: 380px; }
	.h1c-coverflow.is-ready > .is-left-1 { transform: translateX(-180px) scale(0.85) translateZ(-30px); }
	.h1c-coverflow.is-ready > .is-left-2 { transform: translateX(-310px) scale(0.68) translateZ(-70px); }
	.h1c-coverflow.is-ready > .is-right-1 { transform: translateX(180px) scale(0.85) translateZ(-30px); }
	.h1c-coverflow.is-ready > .is-right-2 { transform: translateX(310px) scale(0.68) translateZ(-70px); }
}
@media (max-width: 767px) {
	.h1c-coverflow.is-ready { height: 410px; }
	.h1c-coverflow.is-ready > .h1c-cf-card { width: 280px; height: 350px; }
	.h1c-coverflow.is-ready > .is-left-1 { transform: translateX(-110px) scale(0.82) translateZ(-30px); }
	.h1c-coverflow.is-ready > .is-left-2 { transform: translateX(-180px) scale(0.65) translateZ(-60px); }
	.h1c-coverflow.is-ready > .is-right-1 { transform: translateX(110px) scale(0.82) translateZ(-30px); }
	.h1c-coverflow.is-ready > .is-right-2 { transform: translateX(180px) scale(0.65) translateZ(-60px); }
}
/* Carousel arrows sit over the cards */
.h1c-cf-nav { position: relative; }
.h1c-cf-prev, .h1c-cf-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 25; }
.h1c-cf-prev { left: 16px; }
.h1c-cf-next { right: 16px; }
@media (max-width: 767px) { .h1c-cf-prev { left: 4px; } .h1c-cf-next { right: 4px; } }
.h1c-coverflow { overflow: visible; }
.h1c-cf-section { overflow: hidden; }


/* ---------- Page-level details ---------- */
html { scroll-behavior: smooth; }
/* Anchored sections clear the fixed header. */
.h1c-v2 .e-con[id], .h1c-v2 .elementor-element[id] { scroll-margin-top: 96px; }

/* Plain lift on hover (native "float" moves 8px). */
.h1c-lift .elementor-button { transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.h1c-lift .elementor-button:hover { transform: translateY(-2px); }

/* Bold words inside a text widget in brand colours (the Text Editor has no control for <strong>). */
.h1c-strong-gold strong { color: var(--e-global-color-secondary, #F39F0E); font-weight: 600; }
.h1c-strong-lg strong { font-size: 1.33em; }
.h1c-strong-primary strong { color: var(--e-global-color-primary, #0D1B28); }

/* Text-link arrow in the AA gold for light backgrounds. */
.h1c-text-link .elementor-button-icon { color: var(--e-global-color-goldtext, #9A5B00); fill: currentColor; }
.h1c-dark .h1c-text-link .elementor-button-icon { color: var(--e-global-color-secondary, #F39F0E); }

/* Menu hover as in the design: a 1px gold line drawn from right to left
   (HFE's own pointer is a 3px bar with a fade, so it is set to "None"). */
@media (min-width: 1025px) {
	.h1c-header .h1c-site-nav.elementor-widget-navigation-menu .hfe-nav-menu > .menu-item.parent > a.hfe-menu-item { position: relative; }
	.h1c-header .h1c-site-nav.elementor-widget-navigation-menu .hfe-nav-menu > .menu-item.parent > a.hfe-menu-item::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: var(--e-global-color-secondary, #F39F0E); /* Kit: Gold */
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.h1c-header .h1c-site-nav.elementor-widget-navigation-menu .hfe-nav-menu > .menu-item.parent > a.hfe-menu-item:hover::after,
	.h1c-header .h1c-site-nav.elementor-widget-navigation-menu .hfe-nav-menu > .menu-item.parent > a.hfe-menu-item:focus-visible::after {
		transform: scaleX(1);
		transform-origin: left;
	}
}

/* Header phone: shown on desktop and laptop, hidden where it no longer fits
   (Elementor has no breakpoint between 1025 and 1366px). */
@media (max-width: 1199px) { .h1c-hide-narrow { display: none; } }

/* Desktop menu stays on one line (HFE lets the list wrap). */
@media (min-width: 1025px) {
	.h1c-site-nav .hfe-nav-menu__layout-horizontal > .hfe-nav-menu { flex-wrap: nowrap; }
	.h1c-site-nav .hfe-nav-menu .menu-item a { white-space: nowrap; }
}

/* Mobile dropdown: the CTA item keeps the brand gold (as in the design's mobile menu). */
@media (max-width: 1024px) {
	.h1c-header .h1c-site-nav--cta.elementor-element nav.hfe-dropdown li.menu-item:last-child > a.hfe-menu-item { color: var(--e-global-color-secondary, #F39F0E); }
	.h1c-header .h1c-site-nav--cta.elementor-element nav.hfe-dropdown li.menu-item:last-child > a.hfe-menu-item { justify-content: flex-start; }
	.h1c-header .h1c-site-nav--cta.elementor-element nav.hfe-dropdown li.menu-item:last-child > a.hfe-menu-item::after {
		content: "\2192";
		content: "\2192" / "";
		/* HFE's pointer styles turn every link ::after into an absolute, transparent bar. */
		position: static;
		width: auto;
		height: auto;
		opacity: 1;
		background: none;
		margin-left: 0.35em;
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.h1c-header .h1c-site-nav--cta.elementor-element nav.hfe-dropdown li.menu-item:last-child > a.hfe-menu-item:hover::after { transform: translateX(4px); }
}

/* Mobile menu as in the design: a full-height navy panel that slides in from the
   right under the header (HFE's dropdown only drops a list below the bar). Type,
   item colours and spacing stay in the widget's Dropdown controls; the panel
   colour is the Kit's Primary because HFE has no control for the panel itself.
   Needs the widget's "Full Width" dropdown off, so HFE sets no inline left/width. */
@media (max-width: 1024px) {
	/* The header becomes the containing block of the fixed panel, so the panel starts
	   right under the bar wherever the bar sits (admin bar included). */
	.h1c-header { transform: translateZ(0); }
	.h1c-header .h1c-site-nav nav.hfe-dropdown {
		position: fixed;
		top: 100%;
		left: 0;
		width: 100%;
		height: calc(100vh - 100%);
		height: calc(100dvh - 100%);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--e-global-color-primary, #0D1B28);
		opacity: 1;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s;
	}
	.h1c-header .h1c-site-nav .hfe-active-menu + nav.hfe-dropdown {
		visibility: visible;
		transform: translateX(0);
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
	}
	/* Links stay painted while the panel slides out, and sit centred when they fit. */
	.h1c-header .h1c-site-nav nav.hfe-dropdown .hfe-nav-menu {
		visibility: inherit;
		opacity: 1;
		margin: auto 0;
		padding: 32px 0;
	}
	body:has(.h1c-header .hfe-active-menu) { overflow: hidden; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.h1c-header .h1c-site-nav nav.hfe-dropdown,
	.h1c-header .h1c-site-nav .hfe-active-menu + nav.hfe-dropdown { transition: none; }
}

/* Main menu: its last item ("Submit a Deal") only shows in the mobile menu; on desktop the
   header has its own button. */
@media (min-width: 1025px) {
	.h1c-site-nav--cta .hfe-nav-menu__layout-horizontal .hfe-nav-menu > .menu-item:last-child { display: none; }
}

/* FAQ: one divider under each question + answer, as in the design (the widget
   only offers borders on the title). */
.h1c-faq .e-n-accordion-item { border-bottom: 1px solid var(--e-global-color-line, rgba(13, 27, 40, 0.12)); }

/* FAQ: a "+" in a circle that turns 45° into "×" and goes gold when open (as in
   the design). The widget swaps two icons; here one icon stays and rotates, so
   both icon controls use the same "+". */
.h1c-faq .e-n-accordion-item .e-n-accordion-item-title-icon > .e-closed { display: none; }
.h1c-faq .e-n-accordion-item .e-n-accordion-item-title-icon > .e-opened {
	display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; flex: 0 0 30px; box-sizing: border-box;
	border: 1px solid var(--e-global-color-line, rgba(13, 27, 40, 0.12)); border-radius: 50%;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, border-color 0.35s ease;
}
/* aria-expanded flips on click; [open] is removed only after the collapse animation. */
.h1c-faq .e-n-accordion-item-title[aria-expanded="true"] .e-n-accordion-item-title-icon > .e-opened {
	transform: rotate(45deg);
	background: var(--e-global-color-secondary, #F39F0E); border-color: var(--e-global-color-secondary, #F39F0E);
}
@media (prefers-reduced-motion: reduce) {
	.h1c-faq .e-n-accordion-item .e-n-accordion-item-title-icon > .e-opened { transition: none; }
}

/* Dots on dark bands. */
.h1c-dark .h1c-dot { background: #FFFFFF; opacity: 0.55; }
.h1c-dark .h1c-dot.is-active { background: var(--e-global-color-secondary, #F39F0E); opacity: 1; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	body .elementor-invisible { visibility: visible; }
	body .animated { animation: none; }
	html { scroll-behavior: auto; }
	.h1c-lift .elementor-button:hover { transform: none; }
	.h1c-deck.is-ready > .h1c-deck-card,
	.h1c-coverflow.is-ready > .h1c-cf-card,
	.h1c-text-link .elementor-button::after,
	.h1c-arrow .elementor-button-icon,
	.h1c-btn-lift .elementor-button,
	.h1c-zoom-card .elementor-widget-image img { transition: none; }
}