/* FinCrest hero, "finance core" (assets/js/finance-core.js). Same pattern as the AdCrest and BajuGali heroes. */
.finance-core {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    will-change: transform;
}
.finance-core-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 991px) {
    .finance-core { max-width: 440px; margin-top: 45px; }
}

/* the heading sized for the two-column hero (text left, the map right), so it keeps three lines while it builds;
   the paragraph and the buttons stack under it */
@media (min-width: 992px) {
    .hero-area-five .finance-hero h1 { font-size: 72px; line-height: 1.05; }
    .hero-area-five .finance-hero .content { display: block; }
    .hero-area-five .finance-hero .content > p { margin-top: 25px; max-width: 560px; }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .hero-area-five .finance-hero h1 { font-size: 64px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-area-five .finance-hero h1 { font-size: 54px; }
}

/* The hero text waits hidden until it builds. Only when the script runs (html.fc-js, never with reduced motion),
   with a 4 s failsafe so the text always appears. */
.fc-js:not(.fc-run) .finance-hero h1,
.fc-js:not(.fc-run) .finance-hero .content > p,
.fc-js:not(.fc-run) .finance-hero .hero-btns .theme-btn {
    opacity: 0;
    -webkit-animation: fc-failsafe 0.01s 4s forwards;
    animation: fc-failsafe 0.01s 4s forwards;
}
@-webkit-keyframes fc-failsafe { to { opacity: 1; } }
@keyframes fc-failsafe { to { opacity: 1; } }
.fc-w { display: inline-block; white-space: nowrap; }
.fc-c { display: inline-block; }