/* Abelica Join Hero v1.0.5 — content-driven height, transparent background, corner hatches. */
.abg-join-hero-widget,
.abg-join-hero-widget *{box-sizing:border-box}

.abg-join-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  background:transparent;
  color:#fff;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.abg-join-hero::before{display:none}

.abg-join-hero__inner{
  position:relative;
  z-index:1;
  width:min(100%,1600px);
  margin:0 auto;
  padding:84px 28px 96px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.abg-join-hero__content,.abg-join-hero__media{min-width:0}
.abg-join-hero__content{width:100%}
.abg-join-hero__media{width:100%;max-width:720px;justify-self:end}

.abg-join-hero__eyebrow{
  display:inline-block;
  margin:0 0 28px;
  font-size:18px;
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
  color:#7CC9EA;
  letter-spacing:2.2px;
}
.abg-join-hero__heading{
  margin:0 0 28px;
  padding:0;
  font-size:clamp(46px,4.25vw,78px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-1.8px;
  color:#fff;
}
.abg-join-hero__heading-before,.abg-join-hero__accent{display:inline}
.abg-join-hero__accent{color:#29ABE2}

.abg-join-hero__description,
.abg-join-hero__description p{
  margin:22px 0 34px;
  max-width:32rem;
  color:#C7D8E6;
  font-size:21px;
  font-weight:400;
  line-height:1.58;
}
.abg-join-hero__description p{margin:0}
.abg-join-hero__description p+p{margin-top:14px}

.abg-join-hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:0;align-items:center}
.abg-join-hero__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:14px 22px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:16px;
  font-weight:700;
  line-height:1.15;
  text-decoration:none!important;
  cursor:pointer;
  transition:transform .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.abg-join-hero__button:hover{transform:translateY(-2px)}
.abg-join-hero__button--primary{background:#00A651;color:#fff;box-shadow:0 8px 24px rgba(0,166,81,.18)}
.abg-join-hero__button--primary:hover{background:#009248;color:#fff}
.abg-join-hero__button--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.abg-join-hero__button--secondary:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}

.abg-join-hero__video-card{
  width:100%;
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 35px rgba(0,0,0,.14);
  padding:22px;
  border:1px solid #DCE5EB;
}
.abg-join-hero__intro{
  margin:0 0 16px;
  color:#496987;
  font-size:.92rem;
  line-height:1.5;
}
.abg-join-hero__video-frame{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#063755;
  padding:12px;
}
.abg-join-hero__video-screen{
  position:relative;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(135deg,#B9D4E8,#DCEAF4 60%,#EFF6FA);
  display:flex;
  align-items:center;
  justify-content:center;
}
.abg-join-hero__video-trigger{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
}
.abg-join-hero__poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.abg-join-hero__play{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#fff;
  color:#00A651;
  font-size:0;
  line-height:1;
  padding:0;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  transition:transform .2s ease;
}
.abg-join-hero__play:hover{transform:scale(1.08)}
.abg-join-hero__play::after{
  content:"";
  margin-left:4px;
  border-left:18px solid #00A651;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.abg-join-hero__inline-video{
  position:absolute;
  inset:0;
  z-index:5;
  background:#000;
}
.abg-join-hero__inline-video iframe,.abg-join-hero__inline-video video{
  display:block;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}
.abg-join-hero__video-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#fff;
  font-size:.82rem;
  padding:12px 4px 2px;
}
.abg-join-hero__video-title{
  font-weight:700;
  color:#fff;
  font-size:.82rem;
  line-height:1.3;
}
.abg-join-hero__video-caption{
  color:#9FBBD1;
  font-size:.82rem;
  line-height:1.3;
  text-align:right;
}

.abg-join-hero__hatch{
  position:fixed;
  z-index:0;
  width:340px;
  height:340px;
  opacity:.16;
  pointer-events:none;
  background:repeating-linear-gradient(45deg,#7CC9EA 0 2px,transparent 2px 12px);
  transition:opacity .2s ease;
}
.abg-join-hero__hatch--tl{top:0;left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.abg-join-hero__hatch--br{right:0;bottom:0;clip-path:polygon(100% 100%,100% 0,0 100%)}
.abg-join-hero__hatch.is-outside-hero{opacity:0}

@keyframes abgJoinHerofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes abgJoinHeropulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}

@media (max-width:1100px){
  .abg-join-hero__inner{grid-template-columns:1fr 1fr;gap:40px;padding:72px 28px 80px}
  .abg-join-hero__heading{font-size:clamp(42px,5vw,64px)}
  .abg-join-hero__description,.abg-join-hero__description p{font-size:19px}
}
@media (max-width:900px){
  .abg-join-hero__inner{grid-template-columns:1fr;gap:42px}
  .abg-join-hero__media{max-width:760px;justify-self:start}
}
@media (max-width:767px){
  .abg-join-hero__inner{padding:56px 20px 64px;gap:36px}
  .abg-join-hero__eyebrow{font-size:14px;margin-bottom:18px;letter-spacing:1.7px}
  .abg-join-hero__heading{font-size:clamp(38px,11vw,56px);letter-spacing:-1px;line-height:1.08;margin-bottom:22px}
  .abg-join-hero__description,.abg-join-hero__description p{font-size:17px;line-height:1.55;margin-bottom:28px}
  .abg-join-hero__actions{gap:12px}
  .abg-join-hero__button{width:auto;min-height:46px;padding:13px 20px;font-size:15px}
  .abg-join-hero__video-card{padding:22px}
  .abg-join-hero__intro{font-size:.92rem;margin-bottom:16px}
  .abg-join-hero__video-meta{gap:8px;padding-top:12px}
  .abg-join-hero__video-caption{font-size:.82rem}
  .abg-join-hero__hatch{width:190px;height:190px}
}
