.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 .timeline-container{/*
 * Timeline
 * Element-level custom CSS on .timeline-container.
 * timeline.js sets spine fill, reveal and past/current states; static without it.
 */

/* config */
--tl-accent: var(--company-color, #4e1512);
--tl-ink: #0a1655;
--tl-muted: #5f605c;
--tl-line: rgba(10, 22, 85, .14);
--tl-faint: rgba(10, 22, 85, .18);
--tl-max: min(95%, 1440px);
--tl-img-max: 640px;
--tl-side: clamp(20px, 6vw, 112px);
--tl-gutter: clamp(72px, 9vw, 144px);
--tl-pad: clamp(48px, 7vw, 104px);
--tl-year-size: clamp(44px, 5.2vw, 84px);
--tl-year-lh: 1;
--tl-dot: 16px;
--tl-left-text: left;  /* left | right, left-side items */
--tl-ease: cubic-bezier(.16, 1, .3, 1);

display: flex !important;
flex-direction: column;
gap: clamp(32px, 4vw, 56px);
padding: clamp(80px, 9vw, 140px) max(var(--tl-side), calc((100% - var(--tl-max)) / 2)) !important;

.e-con-inner{ display: contents !important; }
.elementor-widget{ margin: 0; }

/* ---------- List + spine ---------- */
.timeline-list{
--tl-progress: 1;  /* 0-1 from JS; 1 = fully drawn */
position: relative;
display: flex !important;
flex-direction: column;
gap: 0;
width: 100% !important;
margin: 0;
padding: 0 !important;
background: linear-gradient(var(--tl-line), var(--tl-line)) no-repeat;
background-size: 1px 100%;
background-position: 50% 0;
}
.timeline-list::after{
content: "";
position: absolute;
top: 0; bottom: 0;
left: calc(50% - 1.5px);
width: 3px; height: auto;
background: var(--tl-accent);
border: 0; border-radius: 0; opacity: 1; mix-blend-mode: normal;
transform: scaleY(var(--tl-progress));
transform-origin: 50% 0;
pointer-events: none;
}

/* ---------- Items (alternating) ---------- */
.timeline-item{
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 1fr) var(--tl-gutter) minmax(0, 1fr);
align-items: center;
gap: 0 !important;  /* container gap offsets columns from spine */
width: 100% !important;
margin: 0;
padding: var(--tl-pad) 0 !important;
}
:is(.timeline-item, .timeline-item > .e-con-inner) > :is(.timeline-content, :has(.timeline-content)){ grid-row: 1; min-width: 0; }
:is(.timeline-item, .timeline-item > .e-con-inner) > :is(.timeline-image, :has(.timeline-image)){ grid-row: 1; min-width: 0; width: 100% !important; max-width: var(--tl-img-max) !important; }

/* odd: image left, text right */
.timeline-item:nth-child(odd) > :is(.timeline-image, :has(.timeline-image)),
.timeline-item:nth-child(odd) > .e-con-inner > :is(.timeline-image, :has(.timeline-image)){ grid-column: 1; justify-self: end; }
.timeline-item:nth-child(odd) > :is(.timeline-content, :has(.timeline-content)),
.timeline-item:nth-child(odd) > .e-con-inner > :is(.timeline-content, :has(.timeline-content)){ grid-column: 3; justify-self: start; }
/* even: text left, image right */
.timeline-item:nth-child(even) > :is(.timeline-image, :has(.timeline-image)),
.timeline-item:nth-child(even) > .e-con-inner > :is(.timeline-image, :has(.timeline-image)){ grid-column: 3; justify-self: start; }
.timeline-item:nth-child(even) > :is(.timeline-content, :has(.timeline-content)),
.timeline-item:nth-child(even) > .e-con-inner > :is(.timeline-content, :has(.timeline-content)){ grid-column: 1; justify-self: end; text-align: var(--tl-left-text); }

/* ---------- Content ---------- */
.timeline-content{
position: relative;
display: flex !important;
flex-direction: column;
gap: 16px;
width: 100% !important;
max-width: 600px;
margin: 0;
padding: 0 !important;
transition: opacity .6s var(--tl-ease), transform .9s var(--tl-ease);
}

/* marker: on spine, level with year */
.timeline-content::after{
content: "";
position: absolute;
top: calc(var(--tl-year-size) * var(--tl-year-lh) / 2 - var(--tl-dot) / 2);
width: var(--tl-dot); height: var(--tl-dot);
box-sizing: border-box;
border: 2px solid var(--tl-accent);
border-radius: 50%;
background: var(--tl-accent);
opacity: 1; mix-blend-mode: normal;
transition: background .5s var(--tl-ease), border-color .5s var(--tl-ease), box-shadow .6s var(--tl-ease), transform .6s var(--tl-ease);
pointer-events: none;
}
.timeline-item:nth-child(odd) .timeline-content::after{ left: calc(var(--tl-gutter) / -2 - var(--tl-dot) / 2); right: auto; }
.timeline-item:nth-child(even) .timeline-content::after{ right: calc(var(--tl-gutter) / -2 - var(--tl-dot) / 2); left: auto; }

:is(.timeline-year, .timeline-year :is(h2, h3, h4, p, span)){
margin: 0;
color: var(--tl-ink);
font-size: var(--tl-year-size);
font-weight: 700;
line-height: var(--tl-year-lh);
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
transition: color .6s var(--tl-ease);
}
:is(.timeline-title, .timeline-title :is(h2, h3, h4, p, span)){
margin: 0;
color: var(--tl-ink);
font-size: clamp(26px, 2.8vw, 44px);
font-weight: 700;
line-height: 1.1;
letter-spacing: .005em;
text-wrap: balance;
}
:is(.timeline-text, .timeline-text p){
margin: 0;
color: var(--tl-muted);
font-size: clamp(17px, 1.3vw, 20px);
line-height: 1.6;
}
.timeline-text{ margin-top: 2px; }

/* ---------- Image ---------- */
:is(img.timeline-image, .timeline-image img){
display: block;
width: 100% !important;
max-width: none !important;
height: auto !important;
aspect-ratio: 3 / 2;
margin: 0 !important;
object-fit: cover;
transition: clip-path 1.1s var(--tl-ease), opacity .6s var(--tl-ease);
}

/* ---------- Scroll states (JS) ---------- */
/* reveal */
.timeline-list.tl-js .timeline-item:not(.is-seen) .timeline-content{ transform: translateY(28px); opacity: 0; }
.timeline-list.tl-js .timeline-item:nth-child(odd):not(.is-seen) :is(img.timeline-image, .timeline-image img){ clip-path: inset(0 0 0 100%); }
.timeline-list.tl-js .timeline-item:nth-child(even):not(.is-seen) :is(img.timeline-image, .timeline-image img){ clip-path: inset(0 100% 0 0); }

/* focus */
.timeline-list.tl-js .timeline-item.is-seen:not(.is-current) .timeline-content{ opacity: .55; }
.timeline-list.tl-js .timeline-item.is-seen:not(.is-current) :is(img.timeline-image, .timeline-image img){ opacity: .7; }
.timeline-list.tl-js .timeline-item:not(.is-past) :is(.timeline-year, .timeline-year :is(h2, h3, h4, p, span)){ color: var(--tl-faint); }
.timeline-list.tl-js .timeline-item.is-current :is(.timeline-year, .timeline-year :is(h2, h3, h4, p, span)){ color: var(--tl-accent); }

.timeline-list.tl-js .timeline-item:not(.is-past) .timeline-content::after{ background: #fff; border-color: rgba(10, 22, 85, .3); }
.timeline-list.tl-js .timeline-item.is-current .timeline-content::after{
transform: scale(1.15);
box-shadow: 0 0 0 7px color-mix(in srgb, var(--tl-accent) 16%, transparent);
}

/* ---------- Year rail (built by JS) ---------- */
.tl-rail{
position: fixed;
z-index: 60;
top: 50%;
right: clamp(14px, 1.6vw, 28px);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition: opacity .4s, visibility 0s .4s;
}
.tl-rail.is-on{ opacity: 1; visibility: visible; transition: opacity .4s; }
.tl-rail button{
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 5px 0;
border: 0;
background: none;
color: var(--tl-muted);
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .06em;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: color .4s;
}
.tl-rail .tl-rail-bar{
width: 14px;
height: 2px;
background: currentColor;
opacity: .5;
transition: width .5s var(--tl-ease), background .4s, opacity .4s;
}
.tl-rail button:hover{ color: var(--tl-ink); }
.tl-rail button.is-active{ color: var(--tl-accent); }
.tl-rail button.is-active .tl-rail-bar{ width: 30px; background: var(--tl-accent); opacity: 1; }
.tl-rail button:focus-visible{ outline: 2px solid var(--tl-accent); outline-offset: 3px; }

@media (min-width: 1280px){
--tl-side: max(8vw, 120px);  /* room for the rail */
}
@media (max-width: 1279px){
.tl-rail{ display: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px){
--tl-gutter: 40px;
--tl-pad: 36px;
--tl-year-size: 48px;

.timeline-list{ background-position: calc(var(--tl-gutter) / 2) 0; }
.timeline-list::after{ left: calc(var(--tl-gutter) / 2 - 1px); }
.timeline-item{ grid-template-columns: var(--tl-gutter) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; row-gap: 22px !important; }
:is(.timeline-item, .timeline-item > .e-con-inner) > :is(.timeline-content, :has(.timeline-content)){
  grid-column: 2 !important; grid-row: 1 !important; justify-self: stretch !important; text-align: left !important;
}
:is(.timeline-item, .timeline-item > .e-con-inner) > :is(.timeline-image, :has(.timeline-image)){
  grid-column: 2 !important; grid-row: 2 !important; justify-self: stretch !important; max-width: none !important;
}
.timeline-content::after{ left: calc(var(--tl-gutter) / -2 - var(--tl-dot) / 2) !important; right: auto !important; }
.timeline-list.tl-js .timeline-item:not(.is-seen) :is(img.timeline-image, .timeline-image img){ clip-path: inset(0 100% 0 0) !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*, *::after{ transition: none !important; animation: none !important; }
.timeline-list.tl-js .timeline-item:not(.is-seen) .timeline-content{ transform: none; opacity: 1; }
.timeline-list.tl-js .timeline-item:not(.is-seen) :is(img.timeline-image, .timeline-image img){ clip-path: none !important; }
}\n}