.riseit-home-hero{position:relative;overflow:hidden;min-height:100vh}

/* Top padding on .riseit-home-hero__slide-inner needs to clear the site
   header, which is `position:absolute` and floats over the hero rather than
   pushing it down (see header.php .mainheader) — this only works when the
   hero is the first thing on the page. The markup used to carry a
   `lg:pt-34` Tailwind class here, which was never a real spacing step (34
   isn't in the default scale) and was never compiled into tailwind.min.css,
   so large screens were silently falling back to the `sm:pt-36` value (9rem)
   via the cascade. That fallback happens to be enough to clear the header,
   so this rule keeps the same 9rem value at the lg breakpoint (1024px+) —
   just as real, intentional CSS instead of dead/no-op Tailwind. Hand-written
   here rather than as a Tailwind class because this theme has no Tailwind
   build step (see AGENTS.md): a class not already present in the scanned
   source never gets compiled and silently renders unstyled.  */
@media (min-width:1024px){
	.riseit-home-hero__slide-inner{padding-top:9rem}
}

/* assets/css/new.css has a pre-existing, unscoped mobile rule
   (`@media (max-width:767px){ .pt-32{padding-top:40px !important} }`) that
   targets the bare Tailwind utility class directly, so it clobbers
   padding-top on ANY element using `pt-32` at mobile widths — including this
   template's `.riseit-home-hero__slide-inner`, cutting the space that's
   supposed to clear the absolutely-positioned header down to 40px.
   Deliberately scoped to the Elementor widget wrapper only
   (`.elementor-widget-riseit_home_hero`), not the bare component class: an
   earlier version of this fix targeted `.riseit-home-hero__slide-inner`
   directly, which also (correctly, but unexpectedly) changed the classic
   Generic Page Sections hero's mobile padding — reverted per instruction to
   leave that template's existing behavior untouched and fix only the
   Elementor widget. The extra class in the selector gives this higher
   specificity than new.css's `.pt-32` rule, so load order doesn't matter
   here (unlike the reverted version, which relied on loading after
   new.css). */
@media (max-width:767px){
	.elementor-widget-riseit_home_hero .riseit-home-hero__slide-inner{padding-top:8rem !important}
}

/* Stacked slides crossfade — each slide is a full-bleed absolutely positioned layer;
   .is-active controls which one is visible. Timings/easing mirror a proven reference
   implementation: slide opacity + bg "Ken Burns" zoom, plus a staggered text reveal
   (eyebrow -> heading -> description -> button) on the incoming slide. */
.riseit-home-hero__slide{
	position:absolute;inset:0;opacity:0;visibility:hidden;
	transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility 0s linear .8s;
}
.riseit-home-hero__slide.is-active{
	opacity:1;visibility:visible;
	transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
}

.riseit-home-hero__bg{
	position:absolute;inset:0;background-size:cover;background-position:bottom center;background-repeat:no-repeat;
	transform:scale(1.06);transition:transform 1.3s cubic-bezier(.4,0,.2,1);
}
.riseit-home-hero__slide.is-active .riseit-home-hero__bg{transform:scale(1)}

/* Placeholder so a slide with no background image/color set (e.g. a freshly
   added slide that hasn't been configured yet) doesn't render as a blank/
   transparent void. Any real image or color always wins — this class is only
   added when both are empty. */
.riseit-home-hero__bg--empty{background:linear-gradient(135deg,#0f172a 0%,#1e293b 55%,#334155 100%)}

.riseit-home-hero__overlay{position:absolute;inset:0;background:#000;pointer-events:none;z-index:1}

.riseit-home-hero__slide-inner{position:relative;z-index:10;height:100%}

.riseit-home-hero__eyebrow,
.riseit-home-hero__heading,
.riseit-home-hero__desc,
.riseit-home-hero__cta-wrap{
	opacity:0;transform:translateY(22px);
	transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);
}
.riseit-home-hero__slide.is-active .riseit-home-hero__eyebrow{opacity:1;transform:translateY(0);transition-delay:.15s}
.riseit-home-hero__slide.is-active .riseit-home-hero__heading{opacity:1;transform:translateY(0);transition-delay:.22s}
.riseit-home-hero__slide.is-active .riseit-home-hero__desc{opacity:1;transform:translateY(0);transition-delay:.3s}
.riseit-home-hero__slide.is-active .riseit-home-hero__cta-wrap{opacity:1;transform:translateY(0);transition-delay:.38s}

.riseit-home-hero__cta{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.riseit-home-hero__cta:hover{filter:brightness(1.05)}
@media (max-width:991px){
	.riseit-home-hero__cta{background:rgb(var(--color-contact-red)/1)!important;border-color:transparent!important;box-shadow:0 10px 22px rgba(0,0,0,.35)}
}

/* Right-side art frame: only show the bordered/shadowed shell when a slide actually
   has an image. No image = no placeholder box, just empty space. */
.riseit-home-hero__art-shell{align-self:stretch;min-height:280px;border-radius:28px;overflow:hidden; position: relative;}
.riseit-home-hero__art-shell:has(img){background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.riseit-home-hero__art{display:block;width:100%;height:100%;object-fit:cover; position: absolute;top:0;left:0;bottom:0;right:0;}

/* Per-slide content alignment (left is the default flow — no override needed).
   .riseit-home-hero__desc gets its own narrower max-width (617px, vs. the
   820px text column) to keep body copy readable — see _typography.scss. That
   makes it narrower than its parent, so text-align alone isn't enough to
   move it: without its own margin, it stays flush against the left edge of
   the 820px column regardless of alignment, drifting out of line with the
   full-width eyebrow/heading above it. Give it the same margin treatment as
   the column itself so its (narrower) box re-centers/re-aligns too. */
.riseit-home-hero__content[data-hero-align="center"] .riseit-home-hero__text{margin-left:auto;margin-right:auto;text-align:center}
.riseit-home-hero__content[data-hero-align="center"] .riseit-home-hero__desc{margin-left:auto;margin-right:auto}
.riseit-home-hero__content[data-hero-align="center"] .riseit-home-hero__cta-wrap{display:flex;justify-content:center}
.riseit-home-hero__content[data-hero-align="right"] .riseit-home-hero__text{margin-left:auto;margin-right:0;text-align:right}
.riseit-home-hero__content[data-hero-align="right"] .riseit-home-hero__desc{margin-left:auto;margin-right:0}
.riseit-home-hero__content[data-hero-align="right"] .riseit-home-hero__cta-wrap{display:flex;justify-content:flex-end}

.riseit-home-hero__dots-wrap{position:absolute;left:0;right:0;bottom:1.75rem;z-index:20;display:flex;justify-content:center;pointer-events:none}
.riseit-home-hero__dots{display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;border-radius:9999px;background:rgba(15,23,42,.28);backdrop-filter:blur(8px);pointer-events:auto}
.riseit-home-hero__dot{width:.7rem;height:.7rem;border-radius:9999px;background:rgba(255,255,255,.38);border:0;padding:0;cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.riseit-home-hero__dot.is-active{background:#fff;transform:scale(1.1);box-shadow:0 0 0 4px rgba(255,255,255,.14)}

@media (max-width:1023px){
	.riseit-home-hero__art-shell{min-height:240px}
}
@media (max-width:767px){
	.riseit-home-hero__art-shell{min-height:220px}
	.riseit-home-hero__dots-wrap{bottom:1.1rem}
}

/* Elementor embedding: the widget renders this same section, but Elementor's
   flex Container element defaults to "Boxed" content width, which would
   squeeze the hero down to the container's boxed max-width instead of the
   full-bleed look this template gets for free on the Generic Page Sections
   template (rendered outside any container). Fix this per-instance in the
   editor: select the Container wrapping the widget → Layout tab → Content
   Width → Full Width. That's Elementor's own built-in mechanism for this
   exact case — more robust than a JS/CSS breakout hack, which was tried here
   and reverted (it produced its own layout bugs when the viewport was
   remeasured at the wrong moment, e.g. while DevTools was open). This rule
   just zeroes out the widget wrapper's own default margin/padding so it
   doesn't add spacing on top of whatever the container is set to. */
.elementor-widget-riseit_home_hero{margin:0}
.elementor-widget-riseit_home_hero > .elementor-widget-container{padding:0;margin:0}

@media (prefers-reduced-motion: reduce){
	.riseit-home-hero__slide,
	.riseit-home-hero__bg,
	.riseit-home-hero__eyebrow,
	.riseit-home-hero__heading,
	.riseit-home-hero__desc,
	.riseit-home-hero__cta-wrap{
		transition:none!important;transform:none!important;
	}
}