.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 .company-info-container{.company-info-name{
  text-align: center;
  margin: 20px;
}

.company-info-container{
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.company-info-short-story{
  flex-grow:1;
  font-size: 1.4em;
}

.company-info-factsheet{
  justify-content: space-between;
  width:25%;
  padding:10px 0px;
  border-top: var(--company-text-muted) 2px solid;
}

 .company-info-factsheet-fact-container{
  padding:0;
  margin:0;
  flex-direction: column;
}

.company-info-factsheet-fact-container:not(.company-info-factsheet-since-container) {
  flex: 1 1 0;
  min-width: 0;
}

.company-info-factsheet-since-container {
flex: 0 0 auto;
width: auto !important;
white-space: nowrap;
}

.company-info-factsheet-fact-header{
  font-size: 0.8em;
  color: var(--company-text-muted);
  text-wrap: nowrap;

}

.company-info-factsheet-fact-detail{
  font-size: 0.9em;
}\n}.elementor .company-info-name{color: var(--company-color);\n}.elementor .company-page-rows{margin:0;
padding:0;

.company-page-row{
  flex-direction: column;
  padding: 50px;
}

.company-page-row-header{
  text-align:left;
  margin-bottom: 20px;
}

.company-page-row:nth-child(odd){
  background: var(--company-secondary-background);
}\n}.elementor .image-collection-sliding-focus{/* ---------- Sliding focus ---------- */

--sf-grow: calc(var(--product-count, 2) - 1);  /* expanded panel flex-grow (item count - 1) */
--sf-ease: cubic-bezier(.65, 0, .35, 1);
--sf-text: var(--company-secondary-color, #fff);
--sf-pad: clamp(20px, 2vw, 32px);
--sf-head-max: 30px;
--sf-head-fit: 6.4;  /* widest header line in em ("Hardscape &" = 6.11) */

display: flex !important;
flex-direction: row;
gap: 2px;
height: clamp(380px, 38vw, 560px) !important;
margin: 0;
padding: 0 !important;

.e-con-inner{ display: contents !important; }

.sliding-focus-image-container{
position: relative;
container-type: inline-size;  /* header sizes against panel width (cqi) */
flex: 1 1 0;
min-width: 48px;
margin: 0;
padding: 0 !important;
overflow: hidden;
transition: flex-grow .9s var(--sf-ease) .12s;
}

/* expanded: hovered/focused panel, else none */
.sliding-focus-image-container:is(:hover, :focus-within) {
flex-grow: var(--sf-grow);
}

.sliding-focus-image,
.sliding-focus-image img{
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
}

.sliding-focus-image-info{
position: relative;
z-index: 1;
display: flex !important;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin: 0;
padding: var(--sf-pad) !important;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, .32), transparent 38%);  /* header legibility on collapsed panels */
}
.sliding-focus-image-info::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
width: auto; height: auto;
border: 0; border-radius: 0; mix-blend-mode: normal;
background:
  linear-gradient(to right, color-mix(in srgb, var(--company-color) 80%, transparent) 30%, transparent 80%),
  color-mix(in srgb, var(--company-color) 35%, transparent);
opacity: 0;
transition: opacity .7s ease .12s;
pointer-events: none;
}

:is(.sliding-focus-image-header, .sliding-focus-image-header :is(h2, h3, h4, p, span)){
margin: 0;
color: var(--sf-text);
}
/* manual line breaks only; size scales with panel width so line count never changes */
.sliding-focus-image-header{
width: 100%;
white-space: nowrap;
font-size: clamp(14px, calc((100cqi - 2 * var(--sf-pad)) / var(--sf-head-fit)), var(--sf-head-max));
line-height: 1.1;
transform: scale(1);
transform-origin: 0 0;
transition: transform .9s var(--sf-ease) .12s;
}
.sliding-focus-image-header :is(h2, h3, h4, p, span){
font-size: inherit;
line-height: inherit;
white-space: inherit;
}
:is(.sliding-focus-image-description, .sliding-focus-image-description p){
margin: 0;
color: var(--sf-text);
}
.sliding-focus-image-description{
width: 45%;
opacity: 0;
transition: opacity .25s ease;
}

/* active panel */
:is(
.sliding-focus-image-container:is(:hover, :focus-within)) .sliding-focus-image-info::before{ opacity: 1; }
:is(
.sliding-focus-image-container:is(:hover, :focus-within)
) .sliding-focus-image-header{ transform: scale(1.1); }
:is(
.sliding-focus-image-container:is(:hover, :focus-within)
) .sliding-focus-image-description{ opacity: 1; transition: opacity .5s ease .6s; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px){
.sliding-focus-image-description{ width: 55%; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px){
flex-direction: column;
height: auto !important;

.sliding-focus-image-container{
  flex: none !important;
  height: clamp(220px, 60vw, 280px);
  transition: none;
}
.sliding-focus-image-info::before{ opacity: 1; transition: none; }
.sliding-focus-image-description{ width: 100% !important; opacity: 1 !important; transition: none !important; }
.sliding-focus-image-header{ transition: none !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
.sliding-focus-image-container,
.sliding-focus-image-info::before,
.sliding-focus-image-header,
.sliding-focus-image-description{ transition: none !important; }
}\n}.elementor .company-page-row-header{color: var(--company-color);\n}.elementor .recent-projects-carousel{padding: 0;
flex-direction: row;
--carousel-gap: 35px;
gap: var(--carousel-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
scrollbar-width: none;
padding-block: 16px;

.recent-project-container {
position: relative;
flex: 0 0 calc((100% - 2 * var(--carousel-gap)) / 3); 
height: 400px;
padding: 0;
margin: 0;
scroll-snap-align: start;
}


.recent-project-container {
transition: transform 0.6s ease 0.2s, box-shadow 0.6s ease 0.2s;
}

.recent-project-container:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgb(0 0 0 / 0.2);
}

@media (max-width: 767px) {
.recent-project-container {
  flex-basis: 85%; /* 1 visible, with a peek of the next */
}
}

.recent-project-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

.recent-project-info {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
padding: 20px;
flex-direction: column;
gap: 8px;
justify-content: flex-end;
align-items: flex-start;
background: linear-gradient(to top,
  color-mix(in srgb, var(--company-color) 80%, transparent) 10%,
  color-mix(in srgb, var(--company-color) 70%, transparent) 25%,
  transparent 27%);
}

.recent-project-name,
.recent-project-detail {
color: var(--company-secondary-color);
}

@media (min-width: 768px){
.recent-project-container:nth-child(1 of .recent-project-container):nth-last-child(2 of .recent-project-container),
.recent-project-container:nth-child(1 of .recent-project-container):nth-last-child(2 of .recent-project-container) ~ .recent-project-container{
  flex-basis: calc((100% - var(--carousel-gap)) / 2);
}
.recent-project-container:nth-child(1 of .recent-project-container):nth-last-child(1 of .recent-project-container){ flex-basis: 100%; }
}
@media (min-width: 1025px){
.recent-project-container:nth-child(1 of .recent-project-container):nth-last-child(4 of .recent-project-container),
.recent-project-container:nth-child(1 of .recent-project-container):nth-last-child(4 of .recent-project-container) ~ .recent-project-container{
  flex-basis: calc((100% - 3 * var(--carousel-gap)) / 4);
}
}



@media (prefers-reduced-motion: reduce) {
.recent-project-container,
.recent-project-image {
  transition: none;
}
}\n}.elementor .linkedin-section{--li-accent: var(--company-color, #1f3a5f);
--li-radius: 8px;
--li-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

position: relative;
isolation: isolate;
flex-direction: column;
align-items: stretch;
gap: clamp(24px, 4vw, 48px);
padding: clamp(40px, 6vw, 24px) clamp(16px, 4vw, 48px);


/* Header */
.linkedin-section-heading {
flex: 1 1 420px;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}

.linkedin-section-heading {
flex: 1 1 420px;
min-width: 0;
gap: 12px;
}

.linkedin-section-title {
margin: 0;
color:var(--company-color);
font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
line-height: 1.1;
letter-spacing: -0.02em;
text-wrap: balance;
}

.linkedin-section-title::after {
content: "";
display: block;
width: 56px;
height: 4px;
margin-top: 16px;
border-radius: 999px;
background: linear-gradient(90deg, var(--company-color), color-mix(in oklch, var(--company-color) 25%, transparent));
}

.linkedin-section-intro {
margin: 0;
max-width: 60ch;
color: var(--company-text-muted, #6b7280);
font-size: 1.05rem;
line-height: 1.6;
text-wrap: pretty;
}

/* Follow button */
:is(a.linkedin-follow-link, .linkedin-follow-link a) {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.8em 1.4em;
border-radius: 999px;
background: var(--li-accent);
color: var(--company-secondary-color, #fff);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 8px 20px -8px color-mix(in oklch, var(--li-accent) 60%, transparent);
transition: transform 0.25s var(--li-ease), box-shadow 0.25s var(--li-ease), background 0.25s;
}

:is(a.linkedin-follow-link, .linkedin-follow-link a)::after {
content: "→";
transition: transform 0.25s var(--li-ease);
}

:is(a.linkedin-follow-link, .linkedin-follow-link a):hover {
transform: translateY(-2px);
background: color-mix(in oklch, var(--li-accent) 85%, #000);
box-shadow: 0 14px 28px -10px color-mix(in oklch, var(--li-accent) 70%, transparent);
}

:is(a.linkedin-follow-link, .linkedin-follow-link a):hover::after {
transform: translateX(4px);
}

:is(a.linkedin-follow-link, .linkedin-follow-link a):focus-visible {
outline: 2px solid var(--li-accent);
outline-offset: 3px;
}

/* Feed */
 .linkedin-feed{
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: clamp(16px, 2.5vw, 28px);
}

.linkedin-post {
position: relative;
width: 100% !important;
min-width: 0;
padding: 0;
border-radius: var(--li-radius);
background: #fff;
overflow: clip;
box-shadow:
  0 1px 2px rgb(0 0 0 / 0.04),
  0 10px 30px -14px rgb(0 0 0 / 0.18);
transition: transform 0.35s var(--li-ease), box-shadow 0.35s var(--li-ease);
flex: 0 1 504px;
}

.linkedin-post::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
z-index: 1;
height: 4px;
background: var(--li-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--li-ease);
pointer-events: none;
}

.linkedin-post:hover {
transform: translateY(-4px);
box-shadow:
  0 1px 2px rgb(0 0 0 / 0.04),
  0 22px 44px -18px color-mix(in oklch, var(--li-accent) 50%, transparent);
}

.linkedin-post:hover::before {
transform: scaleX(1);
}

 .linkedin-post iframe {
display: block;
width: 100% !important;
max-width: 504px;
border: 0;
background: #fff;
}

/* Optional: posts fade up as they scroll into view (needs the global keyframes below) */
@supports (animation-timeline: view()) {
.linkedin-post {
  animation: li-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
}
}

@media (max-width: 600px) {
  .linkedin-section-header{
    flex-direction: column;
    gap: 15px;
  }
  .linkedin-section-heading{
    flex: 1 1 120px;
  }
:is(a.linkedin-follow-link, .linkedin-follow-link a) {
  gap: 0.4em;
  padding: 0.6em 1.2em;
  font-size: 16px;
  box-shadow: 0 6px 14px -8px color-mix(in oklch, var(--li-accent) 60%, transparent);
}
}

@media (prefers-reduced-motion: reduce) {
.linkedin-post,
.linkedin-post::before,
:is(a.linkedin-follow-link, .linkedin-follow-link a),
:is(a.linkedin-follow-link, .linkedin-follow-link a)::after {
  transition: none;
  animation: none;
}
}\n}.elementor .leadership-container{/*
 * Leadership
 * Element-level custom CSS on .leadership-container.
 * Color: --company-color (fallback navy). Requires aw-rise keyframe in site/page CSS.
 * leadership.js: click/tap selects (opens bio), hover previews the portrait; without it, :hover only and all bios show.
 */

/* config */
--lead-color: var(--company-color, #0a1655);
--lead-text: color-mix(in srgb, var(--lead-color), #000 18%);  /* text contrast */
--lead-ink: #1e1e1c;
--lead-muted: #5f605c;
--lead-line: rgba(30, 30, 28, .14);
--lead-max: 1320px;
--lead-side: clamp(20px, 6vw, 112px);
--lead-header: var(--sticky-header-height, 0px);
--lead-stage-h: min(calc((100vh - var(--lead-header)) * .84), 720px);  /* portrait height (desktop/tablet); fits below the header */
--lead-fade: .45s;
--lead-ease: cubic-bezier(.16, 1, .3, 1);

display: grid !important;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto repeat(12, auto) 1fr;  /* header, items, 1fr spacer for portrait */
column-gap: clamp(40px, 6vw, 104px);
row-gap: 0;
align-items: start;
padding: clamp(80px, 9vw, 140px) max(var(--lead-side), calc((100% - var(--lead-max)) / 2)) !important;

/* flatten list/items onto the section grid */
.e-con-inner,
.leadership-list,
.leadership-item{ display: contents !important; }
.elementor-widget{ margin: 0; }

/* ---------- Header (.company-row-header styles apply; placement only) ---------- */
:is(.company-row-header, :has(.company-row-header)){
grid-column: 1 / -1;
grid-row: 1;
justify-self: stretch;
}

/* ---------- Portrait stage (shared cell spanning all item rows) ---------- */
:is(.leadership-item, .leadership-item > .e-con-inner) > :is(.leadership-image, :has(.leadership-image)){
grid-column: 1;
grid-row: 2 / -1;
align-self: start;
position: sticky;
top: calc(var(--lead-header) + (100vh - var(--lead-header) - var(--lead-stage-h)) / 2);  /* centered in the space below the header */
z-index: 1;
width: 100% !important;
height: var(--lead-stage-h) !important;  /* fixed height, independent of row height */
margin: 0;
overflow: hidden;
opacity: 0;
transition: opacity 0s linear var(--lead-fade);  /* outgoing stays under the incoming until its fade completes */
}
:is(.leadership-item, .leadership-item > .e-con-inner) > :is(.leadership-image, :has(.leadership-image)) :is(.elementor-widget-container, a){
display: block; width: 100%; height: 100%;
}
:is(img.leadership-image, .leadership-image img){
display: block;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
object-fit: cover;
object-position: 50% 20%;
}
.leadership-image:not(img) img{ height: 100% !important; }

/* active portrait: .is-active from JS; :hover fallback without JS (first item by default) */
:is(
.leadership-list.lead-js .leadership-item.is-active,
.leadership-list:not(.lead-js) .leadership-item:is(:hover, :focus-within),
.leadership-list:not(.lead-js):not(:has(.leadership-item:is(:hover, :focus-within))) .leadership-item:first-child
) :is(.leadership-image, :has(.leadership-image)){
opacity: 1;
z-index: 2;
transition: opacity var(--lead-fade) ease;
}

/* ---------- Rows ---------- */
:is(.leadership-item, .leadership-item > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){
grid-column: 2;
min-width: 0;
}
/* explicit rows keep items aligned with the portrait whether the header is in or out of the container */
:is(.leadership-item:nth-child(1), .leadership-item:nth-child(1) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 2; }
:is(.leadership-item:nth-child(2), .leadership-item:nth-child(2) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 3; }
:is(.leadership-item:nth-child(3), .leadership-item:nth-child(3) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 4; }
:is(.leadership-item:nth-child(4), .leadership-item:nth-child(4) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 5; }
:is(.leadership-item:nth-child(5), .leadership-item:nth-child(5) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 6; }
:is(.leadership-item:nth-child(6), .leadership-item:nth-child(6) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 7; }
:is(.leadership-item:nth-child(7), .leadership-item:nth-child(7) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 8; }
:is(.leadership-item:nth-child(8), .leadership-item:nth-child(8) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 9; }
:is(.leadership-item:nth-child(9), .leadership-item:nth-child(9) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 10; }
:is(.leadership-item:nth-child(10), .leadership-item:nth-child(10) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 11; }
:is(.leadership-item:nth-child(11), .leadership-item:nth-child(11) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 12; }
:is(.leadership-item:nth-child(12), .leadership-item:nth-child(12) > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-row: 13; }

.leadership-info{
position: relative;
display: flex !important;
flex-direction: column;
gap: 6px;
width: 100% !important;
margin: 0;
padding: clamp(24px, 2.6vw, 38px) 0 !important;
border-bottom: 1px solid var(--lead-line);
cursor: default;
}
.leadership-item:first-child .leadership-info{ border-top: 1px solid var(--lead-line); }

/* active row underline */
.leadership-info::after{
content: "";
position: absolute;
inset: auto 0 -1px 0;
width: auto; height: 2px;
background: var(--lead-color);
border: 0; border-radius: 0; opacity: 1; mix-blend-mode: normal;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .8s var(--lead-ease);
pointer-events: none;
}

:is(.leadership-name, .leadership-name :is(h2, h3, h4, p, span)){
margin: 0;
color: var(--lead-ink);
font-size: clamp(24px, 2.6vw, 40px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.015em;
transition: color .5s var(--lead-ease), transform .6s var(--lead-ease);
}
:is(.leadership-title, .leadership-title :is(p, span, h4, h5, h6)){
margin: 0;
color: var(--lead-muted);
font-size: clamp(16px, 1.1vw, 18px);
line-height: 1.4;
}
.leadership-bio{ margin: 10px 0 0; }
.leadership-bio :is(p){ margin: 0; color: var(--lead-muted); font-size: 16px; line-height: 1.6; max-width: 52ch; }

/* selected person's bio only (JS); without JS every bio shows */
.leadership-list.lead-js .leadership-bio{
max-height: 24em;
overflow: hidden;
opacity: 1;
visibility: visible;
transition: max-height .7s var(--lead-ease), opacity .5s ease .15s, margin .5s var(--lead-ease), visibility 0s;
}
.leadership-list.lead-js .leadership-item:not(.is-selected) .leadership-bio{
max-height: 0;
margin-top: 0;
opacity: 0;
visibility: hidden;  /* removes collapsed bios from screen readers */
transition: max-height .5s var(--lead-ease), opacity .25s ease, margin .5s var(--lead-ease), visibility 0s .5s;
}
.leadership-list.lead-js .leadership-info{ cursor: pointer; }
.leadership-list.lead-js .leadership-info:focus-visible{ outline: 2px solid var(--lead-color); outline-offset: 6px; }

/* active row */
:is(
.leadership-list.lead-js .leadership-item.is-active,
.leadership-list:not(.lead-js) .leadership-item:is(:hover, :focus-within)
) .leadership-info::after{ transform: scaleX(1); }
:is(
.leadership-list.lead-js .leadership-item.is-active,
.leadership-list:not(.lead-js) .leadership-item:is(:hover, :focus-within)
) :is(.leadership-name, .leadership-name :is(h2, h3, h4, p, span)){
color: var(--lead-text);
transform: translateX(0px);
}

/* ---------- Entrance (scroll-driven) ---------- */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
  .leadership-info{
    animation: aw-rise both cubic-bezier(.2, .7, .2, 1);
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
}
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px){
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
column-gap: 40px;
}

/* ---------- Phone ---------- */
@media (max-width: 767px){
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;

.leadership-list{ display: flex !important; flex-direction: column; grid-column: 1; }
.leadership-item{
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--lead-line);
}
.leadership-item:first-child{ border-top: 1px solid var(--lead-line); }
:is(.leadership-item, .leadership-item > .e-con-inner) > :is(.leadership-image, :has(.leadership-image)){
  grid-column: 1; grid-row: auto;
  position: static;
  width: 84px !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  opacity: 1 !important;
  transition: none !important;
}
:is(.leadership-item, .leadership-item > .e-con-inner) > :is(.leadership-info, :has(.leadership-info)){ grid-column: 2; grid-row: auto !important; }
.leadership-info{ padding: 0 !important; border: 0 !important; }
.leadership-info::after{ display: none; }
.leadership-item:first-child .leadership-info{ border: 0; }
:is(.leadership-name, .leadership-name :is(h2, h3, h4, p, span)){ font-size: 22px; transform: none !important; }
.leadership-bio :is(p){ font-size: 15px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*, *::after{ transition: none !important; animation: none !important; }
}\n}.elementor .company-info-section{/*
 * Company info
 * Custom CSS on the global class company-info-section. Elementor wraps this field in
 * .elementor .company-info-section { ... }: bare declarations style the section, nested rules its contents.
 */

/* ---------- Section: same content width as Leadership ---------- */
--ci-max: 1320px;
--ci-side: clamp(20px, 6vw, 112px);
--ci-muted: var(--company-text-muted, #5f605c);
--ci-line: var(--company-line, rgba(30, 30, 28, .14));
--ci-facts-min: 300px;
padding-left: max(var(--ci-side), calc((100% - var(--ci-max)) / 2)) !important;
padding-right: max(var(--ci-side), calc((100% - var(--ci-max)) / 2)) !important;

/* ---------- Layout ---------- */
.company-info-container{
container: ci / inline-size;  /* story type scales with the section (cqi) */
display: grid !important;
grid-template-columns: minmax(0, 11fr) minmax(var(--ci-facts-min), 9fr);  /* 55/45: story leads by type size; its text fills the column */
align-items: start;
column-gap: clamp(40px, 6vw, 104px);
row-gap: 36px;
padding-left: 0 !important;  /* edges come from the section */
padding-right: 0 !important;
}
.company-info-container .e-con-inner{ display: contents !important; }


/* ---------- Story ---------- */
.company-info-short-story{
grid-column: 1;
width: auto !important;
max-width: 62ch !important;  /* readable line length; ch follows the font size set below */
margin: 0 !important;
flex: initial !important;
}
:is(.company-info-short-story, .company-info-short-story :is(p, span, .elementor-widget-container)){
font-size: clamp(20px, 1.6cqi, 22px) !important;
line-height: 1.6 !important;
}
.company-info-short-story p{ max-width: none; margin: 0; }
.company-info-short-story p + p{ margin-top: 1em; }

/* ---------- Fact sheet ---------- */
.company-info-factsheet{
grid-column: 2;
container: ci-facts / inline-size;  /* fact layout and type follow the sheet's own width */
display: flex !important;
flex-flow: row wrap;
gap: 0 clamp(16px, 2vw, 32px);
width: 100% !important;
margin: 0;
padding: 18px 0 0 !important;
border-top: 2px solid var(--ci-muted);
font-size: clamp(16px, 1.25cqi, 17px);  /* section-relative: the sheet's own cqi resolves against .company-info-container */
}

.company-info-factsheet-fact-container,
.company-info-factsheet-since-container{  /* since-container: older class, kept from wrapping wide */
position: relative;
display: flex !important;
flex: 1 1 0 !important;
flex-direction: column;
gap: 8px;
width: auto !important;
min-width: 0;
margin: 0;
padding: 0 !important;
white-space: normal !important;
}
:is(.company-info-factsheet-fact-header, .company-info-factsheet-fact-header :is(p, span)){
margin: 0 !important;
color: var(--ci-muted) !important;
font-weight: 600 !important;
letter-spacing: .12em;
line-height: 1.4 !important;
text-transform: uppercase;
white-space: nowrap;
}
:is(.company-info-factsheet-fact-detail, .company-info-factsheet-fact-detail :is(p, span)){
margin: 0 !important;
line-height: 1.45 !important;
overflow-wrap: normal;
word-break: normal;
}

/* sizes: label/value set on the element carrying the class; anything inside inherits (no em compounding) */
.company-info-factsheet-fact-header{ font-size: max(11px, .62em) !important; }
.company-info-factsheet-fact-detail{ font-size: 1em !important; }
:is(.company-info-factsheet-fact-header, .company-info-factsheet-fact-detail) :is(p, span){ font-size: inherit !important; }

/* narrow sheet: labelled rows */
@container ci-facts (max-width: 520px){
.company-info-factsheet-fact-container{
  flex: 0 0 100% !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--ci-line);
}
.company-info-factsheet-fact-container:first-child{ padding-top: 0 !important; }
.company-info-factsheet-fact-container:last-child{ border-bottom: 0; }
.company-info-factsheet-fact-header{ flex: 0 0 104px; }
.company-info-factsheet-fact-detail{ flex: 1 1 auto; min-width: 0; }
}

/* ---------- Fact hover ---------- */
@media (hover: hover) and (min-width: 601px){
.company-info-factsheet-fact-container::after{
  content: "";
  position: absolute;
  top: -20px;  /* sheet padding-top (18px) + border (2px) */
  left: 0; right: 0;
  width: auto; height: 2px;
  background: var(--company-color, var(--ci-muted));
  border: 0; border-radius: 0; opacity: 1; mix-blend-mode: normal;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.company-info-factsheet-fact-container:hover::after{ transform: scaleX(1); }
.company-info-factsheet-fact-header{ transition: color .4s ease; }
.company-info-factsheet-fact-container:hover :is(.company-info-factsheet-fact-header, .company-info-factsheet-fact-header *){
  color: color-mix(in srgb, var(--company-color, #5f605c), #000 35%) !important;  /* darkened for small-text contrast */
}
@container ci-facts (max-width: 520px){
  .company-info-factsheet-fact-container::after{ top: -2px; }  /* rows: over the rule above each row */
  .company-info-factsheet-fact-container:first-child::after{ top: -20px; }
}
}

/* ---------- Tablet and phone: stacked ---------- */
@media (max-width: 1024px){
.company-info-container{ grid-template-columns: minmax(0, 1fr); }
.company-info-factsheet{ grid-column: 1; max-width: 760px; }
}

/* ---------- Phone ---------- */
@media (max-width: 600px){
:is(.company-info-short-story, .company-info-short-story :is(p, span, .elementor-widget-container)){ font-size: 18px !important; }
}\n}