.elementor .hero-image-container{width: 100%;
padding: 0;
margin: 0;

/* overlay color: any opaque brand color, held dark enough to carry white text */
--hero-tint: var(--company-hero-overlay-color, var(--company-color, var(--hero-overlay-color, #0b1220)));
--hero-shade: color-mix(in srgb, var(--hero-tint), #000 10%);
@supports (color: oklch(from red l c h)){
--hero-shade: oklch(from var(--hero-tint) min(l, .2) c h);  /* caps lightness, keeps hue */
}

/* video controls */
--hero-control-size: 44px;
--hero-control-icon: 18px;
--hero-control-accent: var(--ww-accent, #4e1512);

.hero-image-container-inner{
width: 100%;
padding: 0;
margin: 0;
position: relative;
isolation: isolate;
overflow: clip;  /* contains the drifting photo; clip, not hidden, so scroll-driven animations keep working */
}

/* overlay sits on the inner container: .hero-image is an image element, which can't render ::before/::after */
.hero-image-container-inner::before{
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 50% 52%, color-mix(in srgb, var(--hero-shade) 15%, transparent) 0%, transparent 100%),  /* center focus */
  color-mix(in srgb, var(--hero-shade) var(--hero-wash, 15%), transparent);
}

.hero-image{
display: block;
width: 100%;
max-height: 100vh;
max-height: 100svh;
object-fit: cover;
}

.hero-image-details-container{
position: absolute;
inset: 0;
z-index: auto;  /* beside the inner container it paints above it without forming its own layer, so blend-mode buttons reach the video */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: auto;
height: auto;
margin: 0;
padding: var(--sticky-header-height, 100px) clamp(16px, 4vw, 64px) clamp(24px, 6vh, 64px);
gap: 20px;
text-align: center;
}
.hero-image-container-inner .hero-image-details-container{ z-index: 2; }  /* inside the inner container it must clear the overlay */

/* the text layer covers the whole hero: let clicks through its empty areas (e.g. to video play/pause);
 text, links and buttons inside it stay interactive */
.hero-image-details-container,
.hero-image-details-container :is(.e-con, .e-con-inner){ pointer-events: none; }
.hero-image-details-container :not(.e-con, .e-con-inner){ pointer-events: auto; }

  .hero-image-details-container :is(h1, h2, h3, h4, h5, p){
  text-shadow: 0 1px 3px rgb(0 0 0 / .5), 0 0 28px rgb(0 0 0 / .4);
}

.hero-image-details-container :is(svg, img){
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .45)) drop-shadow(0 0 24px rgb(0 0 0 / .3));
}

.hero-image-breadcrumb{
font-size: 0.7em;
color: var(--hero-breadcrumb-color, #fff);  /* light on the overlay; muted gray fails contrast here */
letter-spacing: .14em;
text-transform: uppercase;
}

.hero-image-company-tagline{
color: var(--company-secondary-color);
}

.hero-image-company-description{
color: var(--company-secondary-color);
font-size: 0.9em;
}


/* ---------- Video toggle: one circular button whose icon morphs (markup + script in hero-video-toggle.html) ---------- */
&:has(.hero-video-toggle) .e-background-video__controls{ display: none !important; }  /* the toggle replaces the player's own buttons */
:is(.elementor-widget-html, .elementor-widget-container):has(.hero-video-toggle){ display: contents !important; }  /* Elementor's widget wrappers are positioned; step them aside so the toggle positions against the hero */

.hero-video-toggle{
position: absolute;
right: clamp(16px, 3vw, 40px);
bottom: clamp(16px, 3vw, 40px);
z-index: 3;
display: grid;
place-items: center;
width: var(--hero-control-size);
height: var(--hero-control-size);
margin: 0;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .85) !important;
border-radius: 50% !important;
background: rgba(10, 14, 24, .28) !important;  /* faint glass, legible over bright footage */
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
color: #FFF !important;
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
box-shadow: inset 0 0 0 0 var(--hero-control-accent);  /* inset shadow fill: the icon stays on top */
transition: box-shadow .55s cubic-bezier(.16, 1, .3, 1), border-color .45s ease;
}
.hero-video-toggle:is(:hover, :focus-visible){
box-shadow: inset 0 0 0 calc(var(--hero-control-size) / 2 + 1px) var(--hero-control-accent);
border-color: var(--hero-control-accent) !important;
}
.hero-video-toggle:focus-visible{
outline: 2px solid #FFF;
outline-offset: 4px;
}
.hero-video-toggle svg{
display: block;
width: var(--hero-control-icon);
height: var(--hero-control-icon);
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce){
.hero-video-toggle{ transition: none; }
}


/* slow drift on photo heroes only (videos already move); keyframes in hero-keyframes.css */
@media (prefers-reduced-motion: no-preference){
:is(img.hero-image, .hero-image img){ animation: hero-drift 40s ease-in-out infinite alternate; }
}

/* phones: wide photos and videos get too short to hold the text; crop to a taller frame */
@media (max-width: 767px){
.hero-image-container-inner{ min-height: clamp(460px, 78svh, 680px); }
.hero-image-container-inner .e-background-video{ position: absolute; inset: 0; }
:is(img.hero-image, .hero-image img){ min-height: clamp(460px, 78svh, 680px); }
}\n}.elementor .vl-values{--vl-time: 6s;
--vl-h: clamp(460px, 40vw, 580px);
--vl-grow: 3.4;
--vl-copy: 400px;
--vl-num: clamp(72px, 6.6vw, 116px);
--vl-spot: 520px;
--vl-pad: clamp(28px, 2.6vw, 44px);
position: relative;
flex-direction: column !important;
align-items: stretch !important;
gap: clamp(48px, 6vw, 88px) !important;
padding: var(--vl-pad-y) max(var(--vl-side), calc((100% - var(--vl-max)) / 2)) !important;
background-color: #fff;

/* intro */
& .vl-head {
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: clamp(32px, 6vw, 120px) !important;
padding: 0 !important;
}
& .vl-head-main {
flex: 0 1 auto !important;
width: auto !important;
min-width: 0;
display: block !important;
padding: 0 !important;
}
& :is(.vl-title, .vl-title :is(h1, h2, h3)) {
margin: 0 !important;
color: var(--vl-ink) !important;
font-family: Yantramanav, sans-serif !important;
font-size: clamp(34px, 3.4vw, 52px) !important;
font-weight: 600 !important;
line-height: 1.05 !important;
letter-spacing: -.02em !important;
}
& .vl-bar {
width: 72px !important;
height: 3px !important;
min-height: 0 !important;
margin-top: 22px !important;
padding: 0 !important;
background-color: var(--vl-accent);
transform-origin: 0 50%;
}
& .vl-lead {
flex: 0 1 46ch !important;
width: auto !important;
min-width: 0;
}
& :is(.vl-lead, .vl-lead p) {
max-width: 46ch;
margin: 0 !important;
color: var(--vl-text) !important;
font-size: clamp(19px, 1.6vw, 24px) !important;
line-height: 1.5 !important;
}

/* values band: stacked rows by default (mobile, tablet, editor) */
& .vl-band {
--mx: 50%;
--my: 50%;
counter-reset: vl;
position: relative;
isolation: isolate;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: clamp(8px, 2vw, 24px) clamp(24px, 5vw, 64px) !important;
background-color: var(--vl-band);
overflow: hidden;
}
& .vl-item {
counter-increment: vl;
position: relative;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
align-content: start;
column-gap: clamp(20px, 3vw, 40px) !important;
row-gap: 10px !important;
padding: clamp(24px, 3vw, 36px) 0 !important;
border-top: 1px solid rgba(255, 255, 255, .14);
}
& .vl-item:first-child { border-top: 0; }

/* outlined numeral */
& .vl-item::before {
content: counter(vl, decimal-leading-zero);
grid-row: 1 / span 2;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .4);
font: 800 clamp(40px, 6vw, 64px)/.85 Yantramanav, sans-serif;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}

& :is(.vl-item-title, .vl-item-title :is(h2, h3, h4)) {
margin: 0 !important;
color: var(--vl-on-band) !important;
font-family: Yantramanav, sans-serif !important;
font-size: clamp(22px, 2.2vw, 36px) !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: -.01em !important;
}
& :is(.vl-item-text, .vl-item-text p) {
max-width: 44ch;
margin: 0 !important;
color: rgba(255, 255, 255, .78) !important;
font-size: clamp(16px, 1.15vw, 18px) !important;
line-height: 1.65 !important;
}
& :is(.vl-item-title, .vl-item-text) { grid-column: 2; }

/* added by the script, desktop only */
& :is(.vl-item-label, .vl-item-progress) { display: none; }

/* button added inside each title by the script */
& .vl-item-btn {
appearance: none;
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
text-align: left;
cursor: pointer;
}
& .vl-item-btn:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* desktop: expanding panels, only once the script has run */
@media (min-width: 1025px) {
& .vl-band.vl-js {
  flex-direction: row !important;
  height: var(--vl-h);
  padding: 0 !important;
}

/* cursor light */
& .vl-band.vl-js::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(var(--vl-spot) circle at var(--mx) var(--my), rgba(255, 255, 255, .08), transparent 70%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

& .vl-band.vl-js .vl-item {
  flex: 1 1 0 !important;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  padding: var(--vl-pad) !important;
  border-top: 0;
  border-left: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 1s var(--vl-ease), background-color .5s ease;
}
& .vl-band.vl-js .vl-item:first-child { border-left: 0; }
& .vl-band.vl-js .vl-item.is-active { flex-grow: var(--vl-grow) !important; cursor: default; }

/* numeral grows and fills from the bottom on the open panel */
& .vl-band.vl-js .vl-item::before {
  position: absolute;
  top: var(--vl-pad);
  left: var(--vl-pad);
  font-size: var(--vl-num);
  background: linear-gradient(to top, #fff 50%, transparent 50%) 0 0 / 100% 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(.55);
  transform-origin: 0 0;
  transition: transform 1s var(--vl-ease), background-position 1.2s var(--vl-ease);
}
& .vl-band.vl-js .vl-item.is-active::before {
  transform: none;
  background-position: 0 100%;
  transition-delay: .15s, .45s;
}

/* vertical name on closed panels */
& .vl-band.vl-js .vl-item-label {
  display: block;
  position: absolute;
  left: var(--vl-pad);
  bottom: var(--vl-pad);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(255, 255, 255, .85);
  font: 600 14px/1 Yantramanav, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s ease .35s, translate .6s var(--vl-ease) .35s;
}
& .vl-band.vl-js .vl-item.is-active .vl-item-label {
  opacity: 0;
  translate: 0 12px;
  transition-delay: 0s;
}

/* fixed copy width so text doesn't rewrap while the panel opens */
& .vl-band.vl-js :is(.vl-item-title, .vl-item-text) {
  min-width: min(var(--vl-copy), 28vw);
  transition: opacity .7s ease .4s, translate .9s var(--vl-ease) .4s, visibility 0s;
}
& .vl-band.vl-js .vl-item.is-active .vl-item-text { transition-delay: .5s; }
& .vl-band.vl-js .vl-item:not(.is-active) :is(.vl-item-title, .vl-item-text) {
  opacity: 0;
  translate: 0 18px;
  visibility: hidden;
  transition: opacity .25s ease, translate .25s ease, visibility 0s linear .25s;
}

/* progress line on the open panel */
& .vl-band.vl-js .vl-item-progress {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
& .vl-band.vl-js .vl-item.is-active .vl-item-progress { opacity: 1; }
& .vl-item-progress i {
  position: absolute;
  inset: 0;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
& .vl-item-progress i.is-running { animation: vl-fill var(--vl-time) linear forwards; }
& .vl-band.is-paused .vl-item-progress i { animation-play-state: paused; }
& .vl-band.is-manual .vl-item-progress i { transition: transform .8s var(--vl-ease); }
& .vl-band.is-manual .vl-item.is-active .vl-item-progress i { transform: scaleX(1); }
}

@media (min-width: 1025px) and (hover: hover) {
& .vl-band.vl-js:hover::before { opacity: 1; }
& .vl-band.vl-js .vl-item:not(.is-active):hover { background-color: rgba(255, 255, 255, .04); }
}

/* reveal, only once the script has run */
&.vl-ready :is(.vl-title, .vl-lead, .vl-item) {
transition:
  opacity .9s var(--vl-ease) var(--vl-d, 0s),
  translate 1.1s var(--vl-ease) var(--vl-d, 0s),
  flex-grow 1s var(--vl-ease),
  background-color .5s ease !important;
}
&.vl-ready:not(.is-in) :is(.vl-title, .vl-lead, .vl-item) {
opacity: 0;
translate: 0 28px;
}
&.vl-ready .vl-bar { transition: transform 1.1s var(--vl-ease) .25s; }
&.vl-ready:not(.is-in) .vl-bar { transform: scaleX(0); }
&.vl-ready .vl-band { transition: clip-path 1.4s var(--vl-ease) .1s; }
&.vl-ready:not(.is-in) .vl-band { clip-path: inset(8% 6% 8% 6%); }
&.vl-ready:not(.is-in) .vl-item::before { background-position: 0 0 !important; }
& .vl-lead { --vl-d: .12s; }
& .vl-item:nth-child(1) { --vl-d: .25s; }
& .vl-item:nth-child(2) { --vl-d: .32s; }
& .vl-item:nth-child(3) { --vl-d: .39s; }
& .vl-item:nth-child(4) { --vl-d: .46s; }
& .vl-item:nth-child(n+5) { --vl-d: .53s; }

@media (max-width: 1024px) {
& .vl-head { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
& .vl-lead { flex-basis: auto !important; }
}

@media (max-width: 767px) {
& .vl-band { padding: 4px 22px !important; }
& .vl-item { grid-template-columns: minmax(0, 1fr); }
& .vl-item::before { grid-row: auto; margin-bottom: 8px; font-size: 40px; }
& :is(.vl-item-title, .vl-item-text) { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
& :is(.vl-item, .vl-item-label, .vl-item-title, .vl-item-text), & .vl-item::before { transition: none !important; }
}\n}