.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 .sf-culture{--sf-media-h: 72vh;
--sf-line-step: 90ms;
position: relative;
flex-direction: column !important;
gap: clamp(28px, 3vw, 48px) !important;
padding: var(--sf-pad-y) max(var(--sf-side), calc((100% - var(--sf-max)) / 2)) !important;

& .sf-culture-stage {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
align-items: center !important;
gap: clamp(40px, 6vw, 120px) !important;
width: 100% !important;
padding: 0 !important;
}
& .sf-culture-stage:has(.sf-culture-media) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

& .sf-culture-copy {
display: flex !important;
flex-direction: column !important;
gap: clamp(28px, 3vw, 48px) !important;
padding: 0 !important;
}

& .sf-culture-head {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
}

& :is(.sf-culture-text, .sf-culture-text p) {
margin: 0 !important;
color: var(--sf-ink) !important;
font-size: clamp(21px, 1.75vw, 34px) !important;
font-weight: 400 !important;
line-height: 1.42 !important;
letter-spacing: -.005em !important;
}
& .sf-culture-text { max-width: 34em; }
& .sf-culture-text p + p { margin-top: .6em !important; }
& .sf-culture-text strong { color: var(--sf-accent); font-weight: inherit; }

/* lines rise out of a mask, added by the script */
& .sf-line {
display: block;
overflow: hidden;
padding-bottom: .08em;
margin-bottom: -.08em;
}
& .sf-line > span {
display: block;
translate: 0 105%;
transition: translate 1.15s var(--sf-ease) calc(var(--i, 0) * var(--sf-line-step));
}
& .sf-line.is-in > span { translate: 0 0; }

/* photo opens up as it scrolls in, driven by --sf-p from the script */
& .sf-culture-media {
position: relative;
overflow: hidden;
height: var(--sf-media-h);
padding: 0 !important;
clip-path: inset(calc((1 - var(--sf-p, 1)) * 14%) calc((1 - var(--sf-p, 1)) * 12%));
}
& .sf-culture-media :is(.elementor-widget-container, a) { display: block; height: 100%; }
& .sf-culture-media img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
transform: scale(calc(1.3 - var(--sf-p, 1) * .24));
}

@media (max-width: 1024px) {
& .sf-culture-stage:has(.sf-culture-media) { grid-template-columns: minmax(0, 1fr); }
& .sf-culture-media { height: auto; aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
& .sf-line > span { translate: none; transition: none; }
}\n}.elementor .sf-title{margin: 0 !important;
color: var(--sf-ink) !important;
font-size: clamp(32px, 3.4vw, 52px) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: .03em !important;
text-transform: uppercase;

& :is(h1, h2, h3, h4) {
margin: 0;
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit;
}\n}.elementor .sf-bar{position: relative;
flex: 0 0 auto !important;
width: clamp(72px, 7vw, 112px) !important;
height: 1px !important;
min-height: 0 !important;
margin: clamp(20px, 2vw, 28px) 0 0 !important;
padding: 0 !important;
background: var(--sf-line) !important;

&::after {
content: "";
position: absolute;
inset: 0;
background: var(--sf-accent);
transform-origin: 0 50%;
}

/* draws in as it scrolls into view */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  view-timeline: --sf-bar;
  &::after {
    animation: sf-draw auto cubic-bezier(.65, 0, .35, 1) both;
    animation-timeline: --sf-bar;
    animation-range: entry 20% cover 45%;
  }
}
}\n}.elementor .sf-stats{background-image:url("https://erwco.com/wp-content/uploads/2026/09/OurCompanies-1024x544.png");background-repeat:repeat;background-attachment:scroll;background-size:auto auto;background-position:0% 0%;--sf-band-mix: 88%;
--sf-count-time: 1800ms;
position: relative;
isolation: isolate;
overflow: clip;
flex-direction: column !important;
gap: clamp(36px, 4vw, 64px) !important;
padding: clamp(64px, 8vw, 120px) max(var(--sf-side), calc((100% - var(--sf-max)) / 2)) !important;
background-color: var(--sf-band);

/* slow pan of the section background image */
&::after {
content: "";
position: absolute;
inset: -6%;
z-index: -2;
background-image: inherit;
background-color: inherit;
background-size: cover !important;
background-position: center !important;
pointer-events: none;
}

/* navy overlay */
&::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
background: linear-gradient(180deg,
  color-mix(in srgb, var(--sf-band) var(--sf-band-mix), transparent) 0%,
  color-mix(in srgb, var(--sf-band) calc(var(--sf-band-mix) - 14%), transparent) 50%,
  color-mix(in srgb, var(--sf-band) calc(var(--sf-band-mix) + 2%), transparent) 100%) !important;
pointer-events: none;
}

& .sf-title { color: #fff !important; }
& .sf-bar { background: rgba(255, 255, 255, .25) !important; }
& .sf-bar::after { background: #fff; }

& .sf-stats-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 40px 0 !important;
width: 100% !important;
padding: 0 !important;
}

& .sf-stat {
position: relative;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 14px !important;
padding: 8px clamp(16px, 2.4vw, 40px) !important;
}
& .sf-stat:first-child { padding-left: clamp(16px, 2.4vw, 40px) !important; }
& .sf-stat {
padding-block: clamp(20px, 2vw, 32px) !important;
transition: background-color .6s ease, transform .7s var(--sf-ease), opacity .5s ease;
}

/* white line sweeps across the top of the hovered stat */
& .sf-stat::after {
content: "";
position: absolute;
top: 0;
left: 18%;
right: 18%;
height: 2px;
background: #fff;
opacity: .9;
transform: scaleX(0);
transition: transform .8s var(--sf-ease);
pointer-events: none;
}
& :is(.sf-stat-num, .sf-stat-label) { transition: transform .8s var(--sf-ease), color .5s ease; }

@media (hover: hover) {
& .sf-stat:hover {
  background-color: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  transform: translateY(-6px);
}
& .sf-stat:hover::after { transform: scaleX(1); }
& .sf-stat:hover .sf-stat-num { transform: translateY(-4px); }
& .sf-stat:hover .sf-stat-label { color: #fff !important; transform: translateY(-2px); }
& .sf-stats-grid:has(.sf-stat:hover) .sf-stat:not(:hover) { opacity: .5; }
}
& .sf-stat + .sf-stat::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, .18);
}

& :is(.sf-stat-num, .sf-stat-num :is(h2, h3, h4, span)) {
margin: 0 !important;
color: #fff !important;
font-family: Yantramanav, sans-serif !important;
font-size: clamp(48px, 5vw, 96px) !important;
font-weight: 900 !important;
line-height: .9 !important;
letter-spacing: -.03em !important;
font-variant-numeric: tabular-nums;
}

& :is(.sf-stat-label, .sf-stat-label p) {
max-width: 24ch;
margin: 0 !important;
color: rgba(255, 255, 255, .78) !important;
font-size: clamp(13px, .85vw, 16px) !important;
font-weight: 600 !important;
line-height: 1.45 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
}

& :is(.sf-stats-note, .sf-stats-note p) {
margin: 0 !important;
color: rgba(255, 255, 255, .55) !important;
font-size: 13px !important;
line-height: 1.5 !important;
}

@media (prefers-reduced-motion: no-preference) {
&::after { animation: sf-pan 48s ease-in-out infinite alternate; }
}

@media (max-width: 1024px) {
& .sf-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
& .sf-stat:nth-child(odd)::before { display: none; }
}

@media (max-width: 480px) {
& :is(.sf-stat-num, .sf-stat-num :is(h2, h3, h4, span)) { font-size: 44px !important; }
& .sf-stat { padding-right: 8px !important; }
}\n}.elementor .sf-programs{--sf-sticky-top: 140px;
--sf-dim-program: .3;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: clamp(40px, 7vw, 140px) !important;
padding: var(--sf-pad-y) max(var(--sf-side), calc((100% - var(--sf-max)) / 2)) !important;

& .sf-programs-side {
position: sticky !important;
top: var(--sf-sticky-top);
flex: 0 0 min(40%, 520px) !important;
padding: 0 !important;
}

& :is(.sf-programs-intro, .sf-programs-intro p) {
max-width: 40ch;
margin: 28px 0 0 !important;
color: var(--sf-text) !important;
font-size: clamp(17px, 1.3vw, 19px) !important;
line-height: 1.6 !important;
}
& .sf-programs-intro p { margin: 0 !important; }

/* big outlined index, added by the script */
& .sf-programs-index {
display: flex;
align-items: baseline;
gap: 14px;
margin-top: clamp(32px, 4vw, 64px);
font-family: Yantramanav, sans-serif;
}
& .sf-programs-index b {
display: inline-block;
color: transparent;
font-size: clamp(88px, 8.4vw, 140px);
font-weight: 900;
line-height: .8;
letter-spacing: -.04em;
-webkit-text-stroke: 1px color-mix(in srgb, var(--sf-accent) 60%, transparent);
font-variant-numeric: tabular-nums;
}
& .sf-programs-index span {
color: var(--sf-muted);
font-size: 16px;
font-weight: 600;
letter-spacing: .12em;
}

/* photo frame in the pinned side, added by the script when programs have images */
& .sf-programs-frame {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 4 / 3;
max-height: 50vh;
margin-top: clamp(28px, 3vw, 48px);
background: var(--sf-band);
}
& .sf-programs-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
scale: 1.08;
transition: opacity .8s ease, scale 1.6s var(--sf-ease);
}
& .sf-programs-frame img.is-active { opacity: 1; scale: 1; }
& .sf-programs-frame::after {
content: "";
position: absolute;
inset: 55% 0 0;
z-index: 1;
background: linear-gradient(transparent, color-mix(in srgb, var(--sf-band) 70%, transparent));
pointer-events: none;
}
& .sf-programs-frame .sf-programs-index {
position: absolute;
left: 20px;
bottom: 18px;
z-index: 2;
margin: 0;
}
& .sf-programs-frame .sf-programs-index b {
color: #fff;
font-size: clamp(40px, 3.4vw, 60px);
-webkit-text-stroke: 0;
}
& .sf-programs-frame .sf-programs-index span { color: rgba(255, 255, 255, .75); }

/* inline images: shown on tablet/mobile, moved into the frame on desktop */
& .sf-program-img {
display: block;
width: 100% !important;
max-width: none !important;
aspect-ratio: 16 / 9;
object-fit: cover;
margin-bottom: 8px;
}
& .sf-program-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1025px) {
& .sf-programs-list.has-media .sf-program-img { display: none !important; }
}

& .sf-programs-list {
counter-reset: sfp;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
}

& .sf-program {
counter-increment: sfp;
position: relative;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: clamp(32px, 3.4vw, 52px) 0 clamp(32px, 3.4vw, 52px) clamp(44px, 4vw, 64px) !important;
border-top: 1px solid var(--sf-line);
}
& .sf-program:last-child { border-bottom: 1px solid var(--sf-line); }

/* small counter label */
& .sf-program::before {
content: counter(sfp, decimal-leading-zero);
position: absolute;
left: 0;
top: calc(clamp(32px, 3.4vw, 52px) + .5em);
color: var(--sf-accent);
font: 700 13px/1 Yantramanav, sans-serif;
letter-spacing: .12em;
}

/* accent line that sweeps across the active program */
& .sf-program::after {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--sf-accent);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .9s var(--sf-ease);
}

& :is(.sf-program-title, .sf-program-title :is(h3, h4, h5)) {
margin: 0 !important;
color: var(--sf-ink) !important;
font-size: clamp(24px, 2vw, 38px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: -.005em !important;
}

& :is(.sf-program-desc, .sf-program-desc p) {
max-width: 50ch;
margin: 0 !important;
color: var(--sf-text) !important;
font-size: clamp(17px, 1.1vw, 21px) !important;
line-height: 1.6 !important;
}

/* focus on the active program, only once the script has run */
@media (min-width: 1025px) {
& .sf-programs-list.sf-js .sf-program > * {
  opacity: var(--sf-dim-program);
  transition: opacity .6s ease, translate .8s var(--sf-ease);
}
& .sf-programs-list.sf-js .sf-program.is-active > * { opacity: 1; }
& .sf-programs-list.sf-js .sf-program.is-active .sf-program-title { translate: 6px 0; }
}
@media (min-width: 1025px) {
& .sf-programs-list.sf-js .sf-program:not(.is-active) { cursor: pointer; }
& .sf-programs-list.sf-js .sf-program:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 6px; }
& .sf-programs-list.sf-js .sf-program:not(.is-active):focus-visible > * { opacity: .7; }
}
@media (min-width: 1025px) and (hover: hover) {
& .sf-programs-list.sf-js .sf-program:not(.is-active):hover > * { opacity: .7; }
& .sf-programs-list.sf-js .sf-program:not(.is-active):hover .sf-program-title { translate: 4px 0; }
& .sf-program:hover::after { transform: scaleX(.12); }
& .sf-programs-list.sf-js .sf-program.is-active:hover::after { transform: scaleX(1); }
}
& .sf-programs-list.sf-js .sf-program.is-active::after { transform: scaleX(1); }

@media (max-width: 1024px) {
flex-direction: column !important;
& .sf-programs-side { position: relative !important; top: auto; flex: 0 0 auto !important; }
& .sf-programs-index, & .sf-programs-frame { display: none; }
}

@media (prefers-reduced-motion: reduce) {
& .sf-program::after, & .sf-program > * { transition: none !important; translate: none !important; }
}\n}.elementor .sf-feature{--sf-media-ratio: 16 / 11;
--sf-media-share: 54%;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: clamp(40px, 6vw, 120px) !important;
padding: var(--sf-pad-y) max(var(--sf-side), calc((100% - var(--sf-max)) / 2)) !important;

& .sf-feature-media {
flex: 0 0 var(--sf-media-share) !important;
overflow: hidden;
aspect-ratio: var(--sf-media-ratio);
max-height: 82vh;
padding: 0 !important;
}
& .sf-feature-media :is(.elementor-widget-container, a) { display: block; height: 100%; }
& .sf-feature-media img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
}

& .sf-feature-body {
flex: 1 1 auto !important;
padding: 0 !important;
}

& :is(.sf-feature-text, .sf-feature-text p) {
max-width: 44ch;
margin: 28px 0 0 !important;
color: var(--sf-text) !important;
font-size: clamp(18px, 1.25vw, 22px) !important;
line-height: 1.65 !important;
}
& .sf-feature-text p { margin: 0 !important; }
& .sf-feature-text p + p { margin-top: 1em !important; }

/* the script opens and drifts the photo; keep it smooth */
& .sf-feature-media.sf-js { will-change: clip-path; }
& .sf-feature-media.sf-js img { will-change: transform; }

@media (max-width: 1024px) {
flex-direction: column !important;
align-items: stretch !important;
& .sf-feature-media { flex: 0 0 auto !important; width: 100% !important; }
}\n}.elementor .sf-experts{background-image:url("https://erwco.com/wp-content/uploads/2026/10/contact-1024x544.png");background-repeat:repeat;background-attachment:scroll;background-size:auto auto;background-position:0% 0%;--sf-icon: clamp(44px, 3.6vw, 60px);
--sf-band-mix: 88%;
position: relative;
isolation: isolate;
overflow: clip;
flex-direction: column !important;
gap: clamp(40px, 5vw, 72px) !important;
padding: var(--sf-pad-y) max(var(--sf-side), calc((100% - var(--sf-max)) / 2)) !important;
background-color: var(--sf-band);

/* slow pan of the section background image */
&::after {
content: "";
position: absolute;
inset: -6%;
z-index: -2;
background-image: inherit;
background-color: inherit;
background-size: cover !important;
background-position: center !important;
pointer-events: none;
}

/* navy overlay */
&::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
background: linear-gradient(180deg,
  color-mix(in srgb, var(--sf-band) var(--sf-band-mix), transparent) 0%,
  color-mix(in srgb, var(--sf-band) calc(var(--sf-band-mix) - 14%), transparent) 50%,
  color-mix(in srgb, var(--sf-band) calc(var(--sf-band-mix) + 2%), transparent) 100%) !important;
pointer-events: none;
}

& .sf-title { color: #fff !important; }
& .sf-bar { background: rgba(255, 255, 255, .25) !important; }
& .sf-bar::after { background: #fff; }

& .sf-experts-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
align-items: end;
gap: 24px clamp(32px, 6vw, 120px) !important;
padding: 0 !important;
}
& .sf-experts-head > :not(.sf-experts-intro) { grid-column: 1; }
& .sf-experts-intro { grid-column: 2; grid-row: 1 / span 2; }
/* works whether the credentials sit inside the head or after it */
& .sf-experts-head > .sf-creds { grid-column: 1 / -1; grid-row: auto; margin-top: clamp(24px, 3vw, 48px) !important; }

& :is(.sf-experts-intro, .sf-experts-intro p) {
max-width: 56ch;
margin: 0 !important;
color: rgba(255, 255, 255, .78) !important;
font-size: clamp(17px, 1.2vw, 20px) !important;
line-height: 1.6 !important;
}

& .sf-creds {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100% !important;
padding: 0 !important;
}

& .sf-cred {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 22px !important;
padding: clamp(32px, 3vw, 48px) 14px !important;
text-align: center;
background-color: rgba(255, 255, 255, 0);
transition: background-color .6s ease, opacity .5s ease, transform .7s var(--sf-ease);
}
& .sf-cred + .sf-cred { box-shadow: -1px 0 0 rgba(255, 255, 255, .14); }

/* white line on hover */
& .sf-cred::after {
content: "";
position: absolute;
top: 0;
left: 18%;
right: 18%;
height: 2px;
background: #fff;
opacity: .9;
transform: scaleX(0);
transition: transform .8s var(--sf-ease);
pointer-events: none;
}

& .sf-cred-icon,
& .sf-cred-icon :is(.elementor-icon, svg, i) {
width: var(--sf-icon) !important;
height: var(--sf-icon) !important;
font-size: var(--sf-icon) !important;
line-height: 1;
}
& .sf-cred-icon {
flex: 0 0 auto !important;
color: #fff !important;
transition: transform .8s var(--sf-ease);
}
& .sf-cred-icon svg { overflow: visible; }
& .sf-cred-icon svg:not([stroke]) { fill: currentColor; }
& .sf-cred-icon svg[stroke] { stroke: currentColor; fill: none; }
& .sf-cred-icon svg :is([stroke]:not([stroke="none"])) { stroke: currentColor; }
& .sf-cred-icon svg :is([fill]:not([fill="none"])) { fill: currentColor; }
& span.sf-cred-icon { display: block; }
/* uploaded image icons can't take a color, so turn them white */
& :is(img.sf-cred-icon, .sf-cred-icon img) {
display: block;
object-fit: contain;
filter: brightness(0) invert(1);
}
& img.sf-cred-icon { width: var(--sf-icon) !important; height: var(--sf-icon) !important; }
& .sf-cred-icon img { width: 100% !important; height: 100% !important; }

& :is(.sf-cred-name, .sf-cred-name :is(h4, h5, h6)) {
max-width: 18ch;
margin: 0 !important;
color: rgba(255, 255, 255, .88) !important;
font-size: clamp(14px, 1vw, 17px) !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: .16em !important;
text-transform: uppercase;
transition: transform .8s var(--sf-ease), color .5s ease;
}

@media (hover: hover) {
& .sf-cred:hover {
  background-color: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  transform: translateY(-6px);
}
& .sf-cred:hover::after { transform: scaleX(1); }
& .sf-cred:hover .sf-cred-icon { transform: translateY(-4px) scale(1.06); }
& .sf-cred:hover .sf-cred-name { transform: translateY(-2px); color: #fff !important; }
& .sf-creds:has(.sf-cred:hover) .sf-cred:not(:hover) { opacity: .5; }

/* icons with pathLength="1" redraw their strokes on hover */
@media (prefers-reduced-motion: no-preference) {
  & .sf-cred:hover .sf-cred-icon svg [pathLength] {
    stroke-dasharray: 1;
    animation: sf-stroke 1.2s cubic-bezier(.65, 0, .35, 1) both;
  }
}
}

@media (prefers-reduced-motion: no-preference) {
&::after { animation: sf-pan 48s ease-in-out infinite alternate; }
}

@media (max-width: 1024px) {
& .sf-experts-head { grid-template-columns: minmax(0, 1fr); }
& .sf-experts-intro { grid-column: 1; grid-row: auto; }
& .sf-experts-head > .sf-creds { grid-column: 1; }
& .sf-creds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
& .sf-cred:nth-child(odd) { box-shadow: none; }
& .sf-cred:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
}\n}.elementor .sf-cta{background-image:url("https://erwco.com/wp-content/uploads/2026/10/news-1024x544.png");background-repeat:repeat;background-attachment:scroll;background-size:auto auto;background-position:0% 0%;--sf-link-icon: 48px;
--sf-band-mix: 78%;
position: relative;
isolation: isolate;
overflow: clip;
min-height: clamp(440px, 64vh, 720px);
flex-direction: row !important;
align-items: flex-end !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 40px clamp(32px, 6vw, 120px) !important;
padding: var(--sf-pad-y) max(var(--sf-side), calc((100% - var(--sf-max)) / 2)) !important;
background-color: var(--sf-band);

/* slow pan of the section background image */
&::after {
content: "";
position: absolute;
inset: -6%;
z-index: -2;
background-image: inherit;
background-color: inherit;
background-size: cover !important;
background-position: center !important;
pointer-events: none;
}

/* dark navy overlay, a little lighter toward the top-right so the photo still reads */
&::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
background: linear-gradient(20deg,
  color-mix(in srgb, var(--sf-band) var(--sf-band-mix), transparent) 0%,
  color-mix(in srgb, var(--sf-band) calc(var(--sf-band-mix) - 8%), transparent) 55%,
  color-mix(in srgb, var(--sf-band) calc(var(--sf-band-mix) - 22%), transparent) 100%) !important;
pointer-events: none;
}

& :is(.sf-cta-title, .sf-cta-title :is(h2, h3)) {
max-width: 16ch;
margin: 0 !important;
color: #fff !important;
font-size: clamp(38px, 5vw, 92px) !important;
font-weight: 700 !important;
line-height: 1.02 !important;
letter-spacing: -.01em !important;
text-wrap: nowrap;
}

& .sf-cta-links {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2.5em !important;
width: auto !important;
padding: 0 !important;
}

& .sf-cta-link {
position: relative;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
width: auto !important;
min-width: 260px;
justify-content: space-between !important;
padding: 14px 0 !important;
background: none !important;
color: #fff !important;
text-decoration: none !important;
}

/* underline that wipes in on hover */
& .sf-cta-link::after,
& .sf-cta-link::before {
content: "" !important;
position: absolute !important;
left: 0;
right: 0;
bottom: 0;
height: 1px !important;
}
& .sf-cta-link::after { background: rgba(255, 255, 255, .3) !important; }
& .sf-cta-link::before {
z-index: 1;
background: #fff !important;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .7s var(--sf-ease) !important;
}

& .sf-cta-link-text,
& .sf-cta-link-text * {
margin: 0 !important;
color: inherit !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: .06em !important;
text-transform: uppercase;
}

& .sf-cta-link-icon {
display: grid !important;
place-items: center;
flex: 0 0 auto !important;
width: var(--sf-link-icon) !important;
height: var(--sf-link-icon) !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 50%;
color: #fff !important;
box-shadow: inset 0 0 0 0 #fff;
transition: box-shadow .55s var(--sf-ease), color .45s var(--sf-ease), border-color .45s var(--sf-ease);
}
& .sf-cta-link-icon :is(svg, i) {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
transition: transform .6s var(--sf-ease);
}
& .sf-cta-link-icon svg:not([stroke]) { fill: currentColor; }

& .sf-cta-link:is(:hover, :focus-visible)::before { transform: scaleX(1); transform-origin: 0 50%; }
& .sf-cta-link:is(:hover, :focus-visible) .sf-cta-link-icon {
border-color: #fff;
box-shadow: inset 0 0 0 calc(var(--sf-link-icon) / 2 + 1px) #fff;
color: var(--sf-band) !important;
}
& .sf-cta-link:is(:hover, :focus-visible) .sf-cta-link-icon :is(svg, i) { transform: translateX(3px); }
& .sf-cta-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
& .sf-cta-link-icon svg[stroke] { stroke: currentColor; fill: none; }

@media (prefers-reduced-motion: no-preference) {
&::after { animation: sf-pan 48s ease-in-out infinite alternate; }
}

@media (max-width: 767px) {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-end !important;
& .sf-cta-links, & .sf-cta-link { width: 100% !important; }
}\n}