.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 .news-container{/*
 * News & media
 * Element-level custom CSS on .news-container (wraps the Loop Grid).
 * Loop item template: .news-item > .news-image, .news-date, .news-title.
 * news.js adds source labels, year dividers and link cleanup; layout works without it.
 * Keyframes (nw-rise, nw-line, nw-year) are in news-keyframes.css.
 */

/* config */
--nw-accent: var(--company-color, #4e1512);
--nw-ink: #0a1655;
--nw-muted: #5f605c;
--nw-line: rgba(10, 22, 85, .14);
--nw-max: 1320px;
--nw-side: clamp(20px, 6vw, 112px);
--nw-date-w: clamp(120px, 12vw, 176px);
--nw-thumb-w: clamp(180px, 25vw, 360px);
--nw-ease: cubic-bezier(.16, 1, .3, 1);

display: flex !important;
flex-direction: column;
gap: clamp(28px, 3.5vw, 48px);
padding: clamp(64px, 8vw, 120px) max(var(--nw-side), calc((100% - var(--nw-max)) / 2)) !important;

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

/* ---------- Loop Grid ---------- */
.news-grid{ width: 100% !important; }
.news-grid .elementor-loop-container{
display: flex !important;
flex-direction: column;
gap: 0 !important;
}
.news-grid .e-loop-item{ width: 100%; }

/* ---------- Row ---------- */
.news-item{
position: relative;
display: grid !important;
grid-template-columns: var(--nw-date-w) minmax(0, 1fr) var(--nw-thumb-w);
grid-template-rows: auto auto 1fr;
align-items: start;
column-gap: clamp(24px, 3vw, 48px);
row-gap: 8px;
width: 100% !important;
margin: 0;
padding: clamp(24px, 2.6vw, 36px) 0 !important;
border: 0 !important;  /* clears borders left on the loop template; lines are drawn here */
background: linear-gradient(var(--nw-line), var(--nw-line)) no-repeat 0 0 / 100% 1px;  /* top hairline; drawn in by nw-line */
}
.news-grid .e-loop-item:nth-last-child(1 of .e-loop-item) .news-item{ border-bottom: 1px solid var(--nw-line) !important; }

.news-item > :is(.news-date, :has(.news-date)){ grid-column: 1; grid-row: 1 / span 3; }
.news-item > :is(.news-title, :has(.news-title)){ grid-column: 2; grid-row: 1; min-width: 0; }
.news-item > .news-source{ grid-column: 2; grid-row: 2; }
.news-item > :is(.news-image, :has(.news-image)){ grid-column: 3; grid-row: 1 / span 3; }
.news-item > .news-cta{ display: none; }

/* date */
.news-date :is(ul, li){ margin: 0; padding: 0; list-style: none; }
.news-date .elementor-icon-list-icon{ display: none; }
.news-date :is(time, span, li){
color: var(--nw-muted) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
letter-spacing: .08em;
text-transform: uppercase;
transition: color .5s var(--nw-ease);
}

/* title */
:is(.news-title, .news-title :is(h2, h3, a)){
margin: 0;
color: var(--nw-ink) !important;
font-family: inherit !important;
font-size: clamp(20px, 1.8vw, 28px) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -.01em;
text-decoration: none;
text-wrap: balance;
transition: color .5s var(--nw-ease);
}
:is(.news-title h2, .news-title h3, h2.news-title, h3.news-title){ transition: transform .6s var(--nw-ease); }
/* whole-row click target (added by JS); the title link stays for keyboard and screen readers */
.news-hit{ position: absolute; inset: 0; z-index: 2; }
.news-title a:focus-visible{ outline: 2px solid var(--nw-accent); outline-offset: 4px; }

.news-arrow{
display: inline-block;
margin-left: .3em;
color: var(--nw-accent);
font-weight: 400;
transition: transform .5s var(--nw-ease);
}
.news-source{
margin: 0;
color: var(--nw-muted);
font-size: 15px;
line-height: 1.4;
}

/* thumbnail */
.news-image{ position: relative; overflow: clip; }  /* clip, not hidden: hidden makes a scroll container and breaks view() timelines */
.news-image :is(.elementor-widget-container, a){ display: block; }
.news-item .news-image img{
display: block;
width: 100% !important;
max-width: none !important;
height: auto !important;
aspect-ratio: 3 / 2;
margin: 0;
object-fit: cover !important;
background: #f3f4f8;
transition: transform 1.4s var(--nw-ease);
}
/* whole image shown when its shape is far from the frame (JS): blurred fill for photos, light panel for graphics */
.news-item .news-image.is-fit img{
position: relative;
z-index: 1;
object-fit: contain !important;
background: transparent;
}
.news-image.is-fit:not(.is-graphic)::before{
content: "";
position: absolute;
inset: -12%;
background: var(--nw-img) center / cover no-repeat;
filter: blur(22px) saturate(1.05);
opacity: .6;
}
.news-item .news-image.is-graphic img{ padding: 8% !important; background: #f3f4f8; }

/* hover (linked items only) */
.news-item:has(.news-title a)::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--nw-accent);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .8s var(--nw-ease);
pointer-events: none;
}
.news-item:has(.news-title a):is(:hover, :focus-within)::after{ transform: scaleX(1); }
.news-item:has(.news-title a):is(:hover, :focus-within) :is(.news-title a, .news-title a *){ color: var(--nw-accent) !important; }
.news-item:is(:hover, :focus-within) .news-arrow{ transform: translate(2px, -2px); }
.news-item:has(.news-title a):is(:hover, :focus-within) .news-image img{ transform: scale(1.05); }
.news-item:has(.news-title a):is(:hover, :focus-within) .news-date :is(time, span, li){ color: var(--nw-accent) !important; }
.news-item:has(.news-title a):is(:hover, :focus-within) :is(.news-title h2, .news-title h3, h2.news-title, h3.news-title){ transform: translateX(8px); }

/* ---------- Cursor bubble over story images (built by JS) ---------- */
.news-cursor{
position: fixed;
left: 0; top: 0;
z-index: 50;
width: 88px; height: 88px;
margin: -44px 0 0 -44px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 14px 40px -16px rgba(0, 0, 0, .35);
color: var(--nw-ink);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
pointer-events: none;
opacity: 0;
scale: 0;
transition: opacity .35s var(--nw-ease), scale .5s var(--nw-ease);
}
.news-cursor::after{
content: "";
position: absolute;
left: 50%; bottom: 20px;
width: 6px; height: 6px;
margin-left: -3px;
border-radius: 50%;
background: var(--nw-accent);
}
.news-cursor.is-on{ opacity: 1; scale: 1; }
.nw-cursor-on .news-hit{ cursor: none; }

/* ---------- Year dividers (JS) ---------- */
.news-year{
margin: clamp(48px, 6vw, 88px) 0 clamp(12px, 1.5vw, 20px);
color: rgba(10, 22, 85, .18);
font-size: clamp(40px, 4.4vw, 72px);
font-weight: 700;
line-height: 1;
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}

/* ---------- Featured: first item on the first page ----------
 nth-child(1 of .e-loop-item): Elementor puts a  tag first in the loop container. */
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item{
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
grid-template-rows: 1fr auto auto auto auto 1fr;
column-gap: clamp(32px, 5vw, 80px);
row-gap: 14px;
padding: 0 !important;
background: none;
}
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item::after{ display: none; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-image, :has(.news-image)){ grid-column: 1; grid-row: 1 / -1; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-date, :has(.news-date)){ grid-column: 2; grid-row: 2; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-title, :has(.news-title)){ grid-column: 2; grid-row: 3; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > .news-source{ grid-column: 2; grid-row: 4; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > .news-cta{
grid-column: 2;
grid-row: 5;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding-bottom: 10px;
color: var(--nw-ink);
font-size: 16px;
font-weight: 600;
background: linear-gradient(var(--nw-accent), var(--nw-accent)) 0 100% / 0% 2px no-repeat;
box-shadow: inset 0 -1px 0 var(--nw-line);
transition: background-size .7s var(--nw-ease);
}
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > .news-cta::after{ content: "\2197"; color: var(--nw-accent); }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item:is(:hover, :focus-within) > .news-cta{ background-size: 100% 2px; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) :is(.news-title, .news-title :is(h2, h3, a)){
font-size: clamp(28px, 3vw, 46px) !important;
line-height: 1.1 !important;
}
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-image img{ aspect-ratio: 16 / 10; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-arrow{ display: none; }  /* the CTA carries the arrow */
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item:is(:hover, :focus-within) :is(.news-title h2, .news-title h3, h2.news-title, h3.news-title){ transform: none; }

/* ---------- Pagination ---------- */
.news-grid :is(.elementor-pagination, .e-load-more-anchor + *, .elementor-button-wrapper){
margin-top: clamp(32px, 4vw, 56px);
text-align: left;
}
.news-grid :is(.elementor-button, .elementor-pagination a, .elementor-pagination .page-numbers){
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 0 8px !important;
border: 0 !important;
border-radius: 0 !important;
background: linear-gradient(var(--nw-accent), var(--nw-accent)) 0 100% / 0% 2px no-repeat !important;
box-shadow: inset 0 -1px 0 var(--nw-line);
color: var(--nw-ink) !important;
font-size: 16px !important;
font-weight: 600 !important;
text-decoration: none;
transition: background-size .7s var(--nw-ease);
}
.news-grid :is(.elementor-button, .elementor-pagination a):hover{ background-size: 100% 2px !important; }

/* ---------- Entrance (scroll-driven; keyframes in news-keyframes.css) ---------- */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
  .news-grid .e-loop-item{
    animation: nw-rise both cubic-bezier(.2, .7, .2, 1);
    animation-timeline: view();
    animation-range: entry 5% cover 24%;
  }
  .news-item{
    animation: nw-line both cubic-bezier(.65, 0, .35, 1);
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .news-year{
    animation: nw-rise both cubic-bezier(.2, .7, .2, 1), nw-year both linear;
    animation-timeline: view(), view();
    animation-range: entry 5% cover 24%, cover 0% cover 100%;
  }

  /* featured: text follows in sequence */
  .news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item),
  .news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item{ animation: none; }
  .news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-date, :has(.news-date), .news-title, :has(.news-title), .news-source, .news-cta){
    animation: nw-rise both cubic-bezier(.2, .7, .2, 1);
    animation-timeline: view();
  }
  .news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-date, :has(.news-date)){ animation-range: entry 10% cover 30%; }
  .news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-title, :has(.news-title)){ animation-range: entry 15% cover 35%; }
  .news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > .news-source{ animation-range: entry 20% cover 40%; }
  .news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > .news-cta{ animation-range: entry 25% cover 45%; }
}
}

/* ---------- Featured stacks on tablet portrait and phones ---------- */
@media (max-width: 900px){
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  row-gap: 10px;
  padding-bottom: 8px !important;
}
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-image, :has(.news-image)){ grid-column: 1; grid-row: 1; margin-bottom: 8px; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-date, :has(.news-date)){ grid-column: 1; grid-row: 2; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > :is(.news-title, :has(.news-title)){ grid-column: 1; grid-row: 3; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > .news-source{ grid-column: 1; grid-row: 4; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-item > .news-cta{ grid-column: 1; grid-row: 5; }
.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) .news-image img{ aspect-ratio: 16 / 9; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px){
.news-item{
  grid-template-columns: minmax(124px, 40%) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 16px;
  row-gap: 6px;
  padding: 20px 0 !important;
}
.news-item > :is(.news-image, :has(.news-image)){ grid-column: 1; grid-row: 1 / span 4; }
.news-item > :is(.news-date, :has(.news-date)){ grid-column: 2; grid-row: 1; }
.news-item > :is(.news-title, :has(.news-title)){ grid-column: 2; grid-row: 2; }
.news-item > .news-source{ grid-column: 2; grid-row: 3; }
.news-item .news-image img{ aspect-ratio: 3 / 2; }
:is(.news-title, .news-title :is(h2, h3, a)){ font-size: 18px !important; }
.news-source{ font-size: 14px; }

.news-grid:not(.news-paged) .e-loop-item:nth-child(1 of .e-loop-item) :is(.news-title, .news-title :is(h2, h3, a)){ font-size: 28px !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*, *::after{ transition: none !important; animation: none !important; }
.news-cursor{ display: none; }
}\n}