.elementor-kit-4{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;background-color:#030712;color:#F5F7FB;font-family:"Inter", Sans-serif;font-size:16px;line-height:1.6em;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* New Society Media — carve-out CSS.
   Everything else is native Elementor (kit + container/widget controls).
   Each rule below buys an effect Elementor has no control for. */

/* 1. Eyebrow leading dash (static: .eyebrow::before) */
.nsm-eyebrow{display:flex;align-items:center;gap:10px}
.nsm-eyebrow:before{content:"";width:18px;height:1px;background:currentColor;opacity:.8;flex:0 0 auto}

/* 2. Hero cyan grid overlay + animated scan line (static: .hero-bg .grid / .scan-line) */
.nsm-hero{position:relative;overflow:hidden}
.nsm-hero:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;
  background-image:linear-gradient(rgba(61,231,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(61,231,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%);
}
/* 2026-10-01: the line used to animate `top`, which the browser has to lay out and paint on every
   frame, for ever, on the main thread (PageSpeed: "non-composited animation"). The element now spans
   the hero and slides with a transform (compositor only); the visible 2px line is its ::before.
   Hidden on phones, where it crossed the headline. */
.nsm-scanline{
  position:absolute;left:0;right:0;top:0;height:100%!important;min-height:0!important;z-index:2;pointer-events:none;
  background:none;box-shadow:none;animation:nsm-scan 7s linear infinite;opacity:.65;
}
.nsm-scanline::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#5A7D9A,transparent);
  box-shadow:0 0 24px 4px rgba(61,231,255,.35);
}
@keyframes nsm-scan{0%{transform:translateY(8%);opacity:0}8%{opacity:.7}92%{opacity:.7}100%{transform:translateY(88%);opacity:0}}
@media (max-width:767px){.nsm-scanline{display:none!important}}
@media (prefers-reduced-motion:reduce){.nsm-scanline{display:none!important}}

/* 3. Phone mock is a 9/16 crop, not a full-bleed image (static: .phone-wrap) */
.nsm-phone img{aspect-ratio:9/16;max-height:460px;max-width:260px;width:100%;height:auto;object-fit:cover;object-position:center;margin:0 auto}
.nsm-phone .elementor-widget-container{display:flex;justify-content:center}
.nsm-phone{position:relative}

@media(max-width:1024px){.nsm-phone img{max-height:380px}}
.nsm-phone:after{
  content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(3,7,18,.85) 100%);
}

.nsm-phonecap{margin-top:-52px;position:relative;z-index:1;pointer-events:none;padding:0 38px}

/* 4. Infinite client marquee (static: @keyframes marquee) */
.nsm-marquee{overflow:hidden;width:100%;max-width:100%}
.nsm-marquee p{width:max-content;white-space:nowrap;margin:0;animation:nsm-marquee 32s linear infinite}
@keyframes nsm-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* 5. Card hover lift + arrow nudge (static: .svc:hover / .work-card:hover img) */
.nsm-card{transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
.nsm-card:hover{transform:translateY(-6px);border-color:rgba(61,231,255,.4);box-shadow:0 24px 60px rgba(61,231,255,.1)}
.nsm-tile img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.nsm-tile:hover img{transform:scale(1.05)}

/* 6. Utility bar is pinned to the viewport bottom on every screen (static: .utilbar) */
.nsm-utilbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;width:100%;max-width:100%;
  padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom));overflow-x:hidden}

/* 7. Team portrait sits in a 4/5 framed card (static: .team-photo) */
.nsm-teamphoto img{aspect-ratio:4/5;width:100%;object-fit:cover;object-position:center top;
  border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#122038;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}

/* 8. Selected goal card carries a check badge (static: .sel-opt.active .check) */
.nsm-goal-active{position:relative}
.nsm-goal-active:after{
  content:"\2713";position:absolute;top:16px;right:16px;width:22px;height:22px;
  border-radius:50%;background:#5A7D9A;color:#030712;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}

/* 9. Client logo marquee (replaces the placeholder text marquee, 2026-09-03) */
.nsm-logomarquee{overflow:hidden;width:100%;max-width:100%}
.nsm-logotrack{width:max-content!important;flex-wrap:nowrap!important;animation:nsm-marquee 22s linear infinite}
/* 2026-09-24: logos in their real colours on white chips (chip = native widget background) */
.nsm-logotrack img{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.nsm-logotrack{animation:none}}

/* 10. Google review carousel: horizontal snap scroller + arrow buttons */
.nsm-rev-track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
.nsm-rev-track::-webkit-scrollbar{display:none}
.nsm-rev-card{scroll-snap-align:start}
.nsm-rev-prev .elementor-button,.nsm-rev-next .elementor-button{min-width:96px}

/* 11. White header: navy wordmark, navy nav, navy dropdown panel */
.nsm-header-desktop .elementor-nav-menu .elementor-item,
.nsm-header-mobile .elementor-nav-menu .elementor-item{font-weight:700}
.nsm-header-mobile .elementor-menu-toggle{color:#121B3D}
.elementor-nav-menu--dropdown{background:#fff;box-shadow:0 18px 50px rgba(18,27,61,.14)}

.nsm-rev-nav-hidden{display:none!important}/* End custom CSS */