/* ===== NB-HERO-OMC =====================================================
   omc.com hero composition in the Midnight Signal system.
   Breakpoints follow omc.com's own: a single 767px switch, so tablets keep
   the desktop composition exactly as the reference does.
     desktop  >1024  copy full width, circle right of the headline
     tablet   768-1024  omc.com's rule: circle 100vh square, right:0, +15vw
     mobile   <=767     omc.com's rule: circle 150vw square, centred on the
                        right edge of the screen, 59% down the hero
   The frosted scrim behind the copy is omc.com's too, and is what keeps the
   text readable where the circle passes behind it.
   ====================================================================== */

.e-con.nb-herosec.omc-hero{
  /* never depend on Elementor's --display variable being present */
  display:flex!important;flex-direction:column!important;
  min-height:100vh;
  padding-top:0!important;
  padding-bottom:0!important;
  overflow:hidden;
  justify-content:center;
  align-items:center;
}
.omc-hero .elementor-widget{width:100%!important}

.omc-hero .omc-wrap{position:relative;width:100%;padding-inline:12.32%}
.omc-hero .omc-copy{
  position:relative;z-index:5;
  display:flex;flex-direction:column;gap:clamp(26px,3.09vw,60px);
  transform:translate3d(calc(var(--nbpx,0) * 6px), calc(var(--nbpy,0) * 4px + var(--nbsy,0) * -56px), 0);
  opacity:calc(1 - var(--nbsy,0) * .6);
  will-change:transform,opacity;
}
/* legibility scrim: softens whatever the circle puts behind the copy */
.omc-hero .omc-copy::before{
  content:"";position:absolute;inset:-12px -20px;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 78%,transparent);
  mask-image:linear-gradient(to right,#000 78%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}


.omc-h1{
  font-family:"DM Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(34px,5vw,96px);
  line-height:1.1;
  letter-spacing:-.022em;
  color:#fff;
  margin:0;
}
.omc-h1 em{
  font-style:italic;
  font-weight:700;
  background:linear-gradient(96deg,#2563EB 0%,#38BDF8 48%,#00D4FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* background-clip:text only paints inside the inline box, so the italic
     descender (g) and the right-hand overhang (g, h) get sliced off. Inline
     padding grows that box without changing the line height; the negative
     margin keeps the word spacing exactly as it was. */
  padding:.10em .14em .22em .02em;
  margin:0 -.10em 0 -.02em;
}

.omc-cols{display:flex;flex-direction:row;gap:5.5%;font-family:"DM Sans",system-ui,sans-serif}
.omc-cols .omc-c1{flex:0 0 17%;min-width:0}
.omc-cols .omc-c2{flex:0 0 35%;min-width:0}
.omc-cols p{margin:0}
.omc-cols .omc-c1 p{
  font-size:clamp(15px,1.1vw,21px);line-height:1.05;font-weight:700;color:#F1F5F9;
  padding-bottom:clamp(26px,3.1vw,59px);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#2563EB,#00D4FF 55%,rgba(0,212,255,0)) 1;
}
.omc-cols .omc-c2 p{font-size:clamp(15px,.95vw,18.5px);line-height:1.53;font-weight:400;color:#94A3B8}

.omc-cta{display:flex;flex-wrap:wrap;gap:14px}
.omc-hero a.omc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-family:"DM Sans",system-ui,sans-serif;
  font-weight:600;font-size:15px;line-height:1;padding:15px 27px;
  border:1px solid transparent;text-decoration:none;
  transition:transform .25s,box-shadow .3s,background .25s,border-color .25s;
}
.omc-hero a.omc-btn-solid{background:linear-gradient(90deg,#2563EB,#00D4FF);color:#fff;box-shadow:0 8px 26px rgba(37,99,235,.35)}
.omc-hero a.omc-btn-solid:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,212,255,.4)}
.omc-hero a.omc-btn-line{background:rgba(255,255,255,.03);border-color:#1E2A3C;color:#F1F5F9}
.omc-hero a.omc-btn-line:hover{transform:translateY(-2px);border-color:rgba(0,212,255,.45);background:rgba(0,212,255,.06)}

/* ---- the orbit (desktop) ---- */
.omc-orbit{
  position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none;
  /* height cap keeps the ring inside the hero, width cap keeps it clear of
     the body copy on shorter, squarer viewports */
  --os:min(104vh,58vw);
}
.omc-orbit::before{
  content:"";position:absolute;
  right:calc(18.1vw - var(--os) / 2);
  top:calc(50% - var(--os) / 2 - 2vh);
  width:var(--os);height:var(--os);border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.20),rgba(0,212,255,.07) 44%,transparent 66%);
  transform:translate3d(calc(var(--nbpx,0) * -14px), calc(var(--nbpy,0) * -10px + var(--nbsy,0) * 14px), 0);
}
.omc-orbit svg{
  position:absolute;
  right:calc(18.1vw - var(--os) / 2);
  top:calc(50% - var(--os) / 2 - 2vh);
  width:var(--os);height:var(--os);
  overflow:visible;
  transform:translate3d(calc(var(--nbpx,0) * -20px), calc(var(--nbpy,0) * -14px + var(--nbsy,0) * 16px), 0) scale(calc(1 - var(--nbsy,0) * .05));
  will-change:transform;
}
.omc-orbit .omc-track{fill:none;stroke:rgba(0,212,255,.16);stroke-width:1.5}
.omc-orbit .omc-track2{fill:none;stroke:rgba(37,99,235,.15);stroke-width:1.5}
.omc-orbit .omc-spin{
  transform-box:view-box;transform-origin:50% 50%;
  animation:omc-spin 88s linear infinite;
  filter:blur(6px) drop-shadow(0 0 20px rgba(0,212,255,.4));
}
.omc-orbit .omc-arc{fill:none;stroke:url(#omcArcGrad);stroke-width:54;stroke-linecap:round}
.omc-orbit .omc-dots circle{
  fill:#38BDF8;transform-box:fill-box;transform-origin:50% 50%;
  animation:omc-pulse 4.2s ease-in-out infinite;animation-delay:var(--dl,0s);
}
body.hero-paused .omc-orbit .omc-spin,
body.hero-paused .omc-orbit .omc-dots circle{animation-play-state:paused}
@keyframes omc-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes omc-pulse{0%,100%{opacity:.62;transform:scale(.88)}50%{opacity:1;transform:scale(1.1)}}

/* ---- laptop ---- */
@media(max-width:1280px){
  .omc-hero .omc-wrap{padding-inline:9%}
}

/* ---- tablet: omc.com keeps its desktop composition here ---- */
@media(min-width:768px) and (max-width:1024px){
  .e-con.nb-herosec.omc-hero{min-height:100vh!important;min-height:100svh!important;justify-content:center}
  .omc-hero .omc-wrap{padding-inline:7%}
  .omc-hero .omc-copy{gap:clamp(20px,3.2vh,38px);opacity:1;
    transform:translate3d(0,calc(var(--nbsy,0) * -30px),0)}
  .omc-hero .omc-h1{font-size:max(40px,5.6vw)!important}
  .omc-cols{flex-direction:row;gap:5.5%}
  .omc-cols .omc-c1{flex:0 0 clamp(15%,17vw,26%)}
  .omc-cols .omc-c2{flex:0 0 clamp(25%,28vw,46%)}
  .omc-cols .omc-c1 p{font-size:16px;padding-bottom:clamp(16px,3vw,30px)}
  .omc-cols .omc-c2 p{font-size:15.5px}
  /* circle: 100vh square, hard right, pushed 15vw past the edge */
  /* let the circle position against the hero, not the copy wrapper */
  .omc-hero .omc-wrap{position:static}
  .omc-hero .elementor-widget,.omc-hero .elementor-widget-container{position:static}
  .omc-orbit{position:absolute;inset:0;display:block}
  .omc-orbit::before{display:none}
  .omc-orbit svg{
    position:absolute;top:50%;right:0;bottom:auto;left:auto;
    width:100svh;height:100svh;
    transform:translate(15vw,-50%) translate3d(0,calc(var(--nbsy,0) * 34px),0);
  }
  .omc-orbit .omc-spin{filter:blur(5px) drop-shadow(0 0 20px rgba(0,212,255,.38))}
}

/* ---- mobile: omc.com's own phone rule ---- */
@media(max-width:767px){
  /* 10% trimmed off the bottom, 15% padding added at the top */
  .e-con.nb-herosec.omc-hero{min-height:90vh!important;min-height:90svh!important;padding-top:15vh!important;justify-content:center;align-items:normal}
  .omc-hero .omc-wrap{padding-inline:22px;padding-top:0;padding-bottom:0}
  /* centred, then lifted 10% of the hero height so it sits above the middle */
  .omc-hero .omc-copy{top:-10vh}
  .omc-hero .omc-copy{gap:24px;opacity:1;
    transform:translate3d(0,calc(var(--nbsy,0) * -20px),0)}
  .omc-hero .omc-h1{font-size:clamp(32px,8.8vw,44px)!important;max-width:min(340px,90vw)}
  .omc-hero .omc-h1 br{display:none}
  .omc-cols{flex-direction:column;gap:0}
  .omc-cols .omc-c1,.omc-cols .omc-c2{flex:1 1 auto;width:100%}
  .omc-cols .omc-c1 p{font-size:17px;border-bottom:0;border-image:none;padding-bottom:0}
  .omc-cols .omc-c2{margin-top:16px;padding-top:16px;
    border-top:2px solid transparent;
    border-image:linear-gradient(90deg,#2563EB,#00D4FF 55%,rgba(0,212,255,0)) 1}
  .omc-cols .omc-c2 p{font-size:15.5px}
  .omc-cta .omc-btn{width:100%}
  /* circle: 150vw square, centred on the right edge and vertically centred */
  /* let the circle position against the hero, not the copy wrapper */
  .omc-hero .omc-wrap{position:static}
  .omc-hero .elementor-widget,.omc-hero .elementor-widget-container{position:static}
  .omc-orbit{position:absolute;inset:0;display:block}
  .omc-orbit::before{display:none}
  .omc-orbit svg{
    position:absolute;top:50%;right:0;bottom:auto;left:auto;
    width:150vw;height:150vw;
    transform:translate(50%,-50%) translate3d(0,calc(var(--nbsy,0) * 26px),0);
  }
  .omc-orbit .omc-spin{filter:blur(6px) drop-shadow(0 0 16px rgba(0,212,255,.36))}
  /* omc.com switches the scrim to a vertical fade with a stronger blur */
  .omc-hero .omc-copy::before{
    inset:-16px -22px;
    -webkit-mask-image:linear-gradient(#000 80%,transparent);
    mask-image:linear-gradient(#000 80%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
}

/* ---- short phones: keep the copy top aligned so it clears the header ---- */
@media(max-width:767px) and (max-height:759px){
  .e-con.nb-herosec.omc-hero{padding-top:0!important;justify-content:flex-start}
  .omc-hero .omc-wrap{padding-top:96px;padding-bottom:40px}
  .omc-hero .omc-copy{top:0}
}

@media(prefers-reduced-motion:reduce){
  .omc-orbit .omc-spin,.omc-orbit .omc-dots circle{animation:none!important}
  .omc-hero .omc-copy{opacity:1!important}
}