/* =============================================================================
   9senses Landing — engine styles (v1.0.0)
   Ported 1:1 from the approved prototype (v24). All selectors are namespaced
   (ns-) and target CSS classes set on Divi modules, so no Divi defaults are
   overridden globally. No translatable text lives in this file.
   ========================================================================== */

/* site link blue — change here if your brand blue differs */
:root{
  --ns-blue:#0c71c3;
  --ns-ink:#e6e6e6;
  --ns-label:#f3f3f3;
  --ns-arc:rgba(255,255,255,.34);
  --ns-muted:rgba(255,255,255,.58);
  --ns-faint:rgba(255,255,255,.30);
  --ns-green:#30ce7c;
  --ns-indigo:#3b4fd8;
  --ns-gray:#cfcfcf;
  --ns-tw:'Special Elite','Courier New',monospace;
  --ns-body:'Open Sans',Arial,sans-serif;
}

/* ---------- headline + the living "Work" ---------------------------------- */
.ns-headline{max-width:100%}
.ns-headline h1{
  font-family:var(--ns-tw) !important;font-weight:400 !important;color:#dcdcdc;
  font-size:clamp(30px,4.4vw,56px);line-height:1.18 !important;letter-spacing:.04em;
  max-width:min(100%,640px);   /* never reach into the neighbouring column */
}
.ns-work{
  position:relative;display:inline-block;white-space:nowrap;cursor:pointer;
  background:linear-gradient(100deg,#dcdcdc 38%,#aee9c8 50%,#b9c4f0 56%,#dcdcdc 68%);
  background-size:320% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nsWorkLive 16s linear infinite;
}
@keyframes nsWorkLive{
  0%{background-position:0 0}
  13%{background-position:-320% 0}    /* one ~2s sweep ... */
  100%{background-position:-320% 0}   /* ... then idle: no repaint for ~14s */
}

/* ---------- orbit container (Divi column with class ns-orbit) -------------- */
.ns-orbit{position:relative;aspect-ratio:1/1;max-width:680px}
.ns-orbit .ns-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ns-rings canvas{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  margin:0 !important;display:block !important;
}

/* the faint center words breathe up to ~60% of the 9's gray (24s cycle) */
.ns-why,.ns-senses{
  position:absolute !important;left:50%;transform:translateX(-50%);
  pointer-events:none;z-index:1;width:auto;
}
.ns-why.ns-why.ns-why,.ns-senses.ns-senses.ns-senses{
  font-family:var(--ns-tw) !important;font-size:clamp(40px,6.4vw,72px) !important;line-height:1 !important;
  /* the fade animates OPACITY, not color: color rules from Divi (even !important
     ones) cannot interfere, and we may pin the color itself with !important */
  color:#c9c9c9 !important;
  opacity:.08;
  animation:nsWordFadeO 24s ease-in-out infinite !important;
}
.ns-why{top:27%}
.ns-senses{top:60%}
@keyframes nsWordFadeO{0%,100%{opacity:.08}50%{opacity:.58}}
.ns-orbit.ns-inside .ns-why.ns-why.ns-why,
.ns-orbit.ns-inside .ns-senses.ns-senses.ns-senses{
  animation:none !important;opacity:.58;transition:opacity 1.4s ease;
}

/* the 9 — optically centered on the circle */
.ns-nine{position:absolute !important;left:50%;top:50%;transform:translate(-50%,-36%);z-index:2;width:auto}
.ns-nine{
  font-family:var(--ns-tw) !important;font-size:clamp(84px,13.5vw,148px) !important;line-height:1 !important;color:#c9c9c9;
  transition:text-shadow .4s,color .4s;
}
.ns-nine a{color:inherit;text-decoration:none}
.ns-orbit.ns-inside .ns-nine{color:#fff !important;text-shadow:0 0 26px rgba(48,206,124,.45)}

/* ---------- orbit labels (Divi text modules, classes ns-olabel ns-pos1..8) - */
.ns-olabel{
  position:absolute !important;transform:translate(-50%,-50%);z-index:5;width:max-content !important;
  margin:0 !important;padding:0 !important;
}
.ns-olabel{
  font-family:var(--ns-tw) !important;font-size:clamp(15px,1.7vw,21px) !important;line-height:1.6 !important;
  color:var(--ns-label);text-align:center !important;
  transition:color .7s,filter .7s;
}
.ns-olabel a{color:inherit;text-decoration:none}
.ns-pos1{left:50%;top:11%}   /* What actually is AI? */
.ns-pos2{left:79%;top:25%}   /* AI Strategy */
.ns-pos3{left:85%;top:50%}   /* AI Ethics and Governance */
.ns-pos4{left:76%;top:76%}   /* AI Business Transformation */
.ns-pos5{left:49%;top:90%}   /* About Us */
.ns-pos6{left:22%;top:76%}   /* Control and Automation */
.ns-pos7{left:14%;top:50%}   /* Data and Knowledge Management */
.ns-pos8{left:22%;top:25%}   /* Customer Interaction */

/* hidden source texts (translated by TranslatePress, read by the JS) */
.ns-tip{display:none}                     /* before the engine runs */
.ns-bubble .ns-tip{display:inline}        /* inside the bubble it is the content */
.ns-bubble .ns-blink,
.ns-bubble .ns-blink:hover,
.ns-bubble .ns-blink:focus,
.ns-bubble .ns-blink:visited{
  color:inherit !important;text-decoration:none !important;
  cursor:pointer;display:block;
  /* a real <a> attracts the theme's link styling — pin every typographic
     property to the bubble's own, in every state */
  font-family:inherit !important;font-size:inherit !important;
  font-weight:inherit !important;font-style:inherit !important;
  letter-spacing:inherit !important;line-height:inherit !important;
  text-transform:none !important;
}


/* active label: slow gradient shimmer */
.ns-olabel:hover,
.ns-olabel.ns-bubbling,
.ns-work:hover, .ns-work.ns-bubbling{
  color:transparent;
  background:linear-gradient(100deg,#cfeede 10%,#f2f8ff 35%,#bdc6f5 60%,#cfeede 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:nsShimmer 11s linear infinite;
}
@keyframes nsShimmer{
  0%{background-position:0 0}
  22%{background-position:-220% 0}
  100%{background-position:-220% 0}
}
.ns-olabel:hover,.ns-olabel.ns-bubbling{z-index:12}

/* the line: draws in 1.1s; on exit it waits for rectangle + dot, then withdraws */
.ns-anchor{position:relative}
.ns-anchor::after{
  content:"";position:absolute;left:6%;bottom:-7px;width:88%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(207,207,207,.25),#cfcfcf);
  /* drawn via transform (compositor-only): a width animation would force a
     layout pass every frame and stall everything else on the page */
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1) 1.9s;
  box-shadow:0 0 7px rgba(207,207,207,.45);
}
.ns-anchor:hover::after,.ns-anchor.ns-bubbling::after{
  transform:scaleX(1);
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1) 0s;
}

/* the seed dot at the end of the line */
.ns-anchor::before{
  content:"";position:absolute;left:calc(94% - 4px);bottom:-10px;
  width:8px;height:8px;border-radius:50%;
  background:var(--ns-gray);
  box-shadow:0 0 9px 3px rgba(207,207,207,.65);
  opacity:0;transform:scale(.2);
  pointer-events:none;
}
.ns-anchor:hover::before,.ns-anchor.ns-bubbling::before{
  animation:nsSeedIn 3.4s ease .95s forwards;
}
@keyframes nsSeedIn{
  0%{opacity:0;transform:scale(.2)}
  32%{opacity:1;transform:scale(1)}
  58%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.55)}
}
/* close, act 2: the dot receives the rectangle, then shrinks away */
.ns-anchor.ns-closing::before{animation:nsSeedOut 1.85s ease forwards}
@keyframes nsSeedOut{
  0%{opacity:0;transform:scale(.5)}
  19%{opacity:1;transform:scale(1)}
  35%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.1)}
}

/* ---------- the bubble: fuzzy gray cloud over the label -------------------- */
.ns-bubble{
  position:absolute;width:250px;max-width:74vw;
  left:50%;top:58%;
  transform:translate(-50%,-46%) scale(.032);
  background:transparent;border:none;border-radius:10px;
  padding:0;
  font-family:var(--ns-body);font-size:14px;line-height:1.6;color:#222b3f;
  letter-spacing:normal;text-align:left;white-space:normal;
  opacity:0;pointer-events:none;
  filter:blur(5px);
  /* exit, act 1: fast uniform shrink exactly onto the dot — no fade, no spin */
  transition:transform .45s cubic-bezier(.5,0,.7,.7) 0s,
             opacity 0s linear .43s,
             filter 0s linear .43s;
  z-index:9;
}
.ns-bubble .ns-bspin{display:block;position:relative;padding:9px 12px}
.ns-bubble .ns-bfog{
  position:absolute;inset:-9px;z-index:-1;
  background:rgba(207,207,207,.88);
  border-radius:14px;
  filter:blur(10px);
}
.ns-bubble b,.ns-bubble strong{color:#0d1530;font-weight:700}
.ns-mount{position:relative}
.ns-mount.ns-bubbling .ns-bubble,.ns-mount:hover .ns-work~.ns-bubble{ }
.ns-headline .ns-bubble{width:300px}
/* bubble on a mount opens when the mount carries the state */
.ns-mount.ns-bubbling .ns-bubble{
  opacity:1;pointer-events:auto;filter:blur(0);
  transform:translate(-50%,-46%) scale(1);
  transition:transform 1.9s cubic-bezier(.3,1.12,.35,1) 1.9s,
             opacity 1.1s ease 1.9s,
             filter 1.2s ease 2.1s;
}
/* entrance: line (0s) → dot slowly (≈1s) → bubble grows from the dot (≈2s) */
.ns-anchor.ns-bubbling .ns-bubble,.ns-anchor:hover .ns-bubble{
  opacity:1;pointer-events:auto;filter:blur(0);
  transform:translate(-50%,-46%) scale(1);
  transition:transform 1.9s cubic-bezier(.3,1.12,.35,1) 1.9s,
             opacity 1.1s ease 1.9s,
             filter 1.2s ease 2.1s;
}

/* ---------- vector map ------------------------------------------------------ */
.ns-vmap{position:relative;display:block;width:100%;overflow:hidden}
.ns-vmap canvas{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  margin:0 !important;display:block !important;
}
.ns-vmap-items{display:none}              /* before the engine mounts the items */
/* TranslatePress helper — visually hidden but in the accessibility/scan tree */
/* TranslatePress string source — off-screen but fully rendered so TP's
   visual editor can find, click and translate every label and excerpt */
.ns-trp-strings{
  position:absolute !important;
  left:-9999px !important;top:0 !important;
  width:200px !important;
  font-size:1px !important;color:transparent !important;
  pointer-events:auto !important;   /* TP needs to be able to click these */
  z-index:-1 !important;
}
.ns-vterm{
  position:absolute;font-family:var(--ns-tw) !important;font-size:13.5px;
  color:var(--ns-vmap-accent,#7df0b4);opacity:0;pointer-events:none;
  max-width:min(190px,72%);white-space:normal;text-align:center;line-height:1.35;
  transition:opacity 2s ease;text-shadow:0 0 8px rgba(0,9,30,.95);
  left:0;top:0;z-index:3;   /* placed via transform so wrapping isn't squeezed at edges */
}
.ns-vterm.ns-on{opacity:.94;pointer-events:auto}
.ns-vterm a{color:inherit !important;text-decoration:none !important;cursor:pointer}
.ns-vterm a:hover{color:var(--ns-blue) !important;text-decoration:none !important}
.ns-popup-link{cursor:pointer}
.ns-vexcerpt.ns-clickable{cursor:pointer}
.ns-vmap-panel-heading{
  /* font-family, font-size and color are set inline from the active term's
     computed style — so heading always matches the carousel label exactly */
  opacity:0;
  transition:opacity 2s ease;
  margin-bottom:8px;
  line-height:1.3;
  pointer-events:none;
  position:relative;
  z-index:1;
}
.ns-vmap-panel-heading.ns-on{ opacity:.94 }
.ns-vmap-detail{
  position:relative;margin-top:24px;
  background:transparent !important;
  background-color:transparent !important;
  overflow:visible;
}
.ns-vmap-detail .ns-vexcerpt{
  position:absolute !important;left:0;right:0;top:0;opacity:0;
  transition:opacity 2s ease;pointer-events:none;
  font-family:var(--ns-body);font-size:13.5px;line-height:1.6;color:var(--ns-muted);
  background:transparent !important;background-color:transparent !important;
  /* Clip to the Divi column width — prevents rightward overflow */
  max-width:100%;overflow:hidden;
}
.ns-vmap-detail .ns-vexcerpt.ns-on{opacity:1;pointer-events:auto}
.ns-vmap-detail .ns-vexcerpt .ns-blog-thumb{
  float:right;width:96px;height:74px;object-fit:cover;border-radius:0;
  margin:3px 0 8px 12px;
}
/* excerpt right/left: map and panel float side-by-side inside the Divi column.
   --ns-excol sets the panel width; map fills the remainder.
   Default: panel 36%, map 60% (gap 4%). */
.ns-vmap--right,
.ns-vmap--left  { float:left; width:calc(100% - var(--ns-excol, 36%) - 4%) }
.ns-vmap--right + .ns-vmap-detail { float:right; width:var(--ns-excol, 36%); margin-top:0; clear:none }
.ns-vmap--left  { float:right }
.ns-vmap--left  + .ns-vmap-detail { float:left;  width:var(--ns-excol, 36%); margin-top:0; clear:none }
/* excerpt right/left: map and panel float side-by-side inside the Divi column.
   padding-top reserves space for the heading; excerpts offset to match. */
.ns-vmap--right + .ns-vmap-detail,
.ns-vmap--left  + .ns-vmap-detail { padding-top:0; margin-top:0 }
.ns-vmap--right + .ns-vmap-detail .ns-vexcerpt,
.ns-vmap--left  + .ns-vmap-detail .ns-vexcerpt { top:28px }
.ns-vmap-clearfix::after { content:''; display:table; clear:both }
@media (max-width:640px){
  .ns-vmap--right,.ns-vmap--left { float:none !important; width:100% !important }
  .ns-vmap--right + .ns-vmap-detail,
  .ns-vmap--left  + .ns-vmap-detail { float:none !important; width:100% !important; margin-top:16px }
}

@media (max-width:980px){.ns-vmap{max-width:420px;margin-left:auto;margin-right:auto}}

/* ---------- right rail ------------------------------------------------------ */
.ns-rail{flex:0 0 270px !important;width:270px !important;max-width:270px !important;margin-left:auto}
@media (max-width:980px){
  .ns-rail{flex:1 1 auto !important;width:100% !important;max-width:560px !important;margin:0 auto}
}
.ns-synapse{position:relative;width:100%;aspect-ratio:5/4;max-height:210px}
.ns-synapse canvas{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  margin:0 !important;display:block !important;
}

.ns-blog{padding-top:10px}
.ns-blog-viewport{position:relative;height:308px;overflow:hidden}
.ns-blog-card{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;
  padding:4px 0;text-decoration:none;
  transform:translateY(105%);opacity:0;
  transition:transform 2.4s cubic-bezier(.3,.7,.3,1),opacity 1.6s ease;
}
.ns-blog-card.ns-cur{transform:translateY(0);opacity:1}
.ns-blog-card.ns-prev{transform:translateY(-105%);opacity:0}
.ns-blog-card:hover .ns-blog-title{color:var(--ns-blue)}
.ns-blog-title{
  font-family:var(--ns-tw);font-size:19px;font-weight:400;color:#fff;line-height:1.4;
  transition:color .3s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ns-blog-body{
  display:block;font-size:13.5px;line-height:1.6;color:var(--ns-muted);
  max-height:240px;overflow:hidden;
}
.ns-blog-more{
  font-family:var(--ns-tw) !important;font-size:14.5px;color:var(--ns-blue);
  float:right;margin:2px 0 0 10px;   /* rides the last text line if it fits, else drops to its own */
}
.ns-blog-card:hover .ns-blog-more{text-decoration:underline}
.ns-blog-thumb{
  float:right;width:96px;height:74px;object-fit:cover;
  border-radius:0;margin:3px 0 8px 12px;
  background:linear-gradient(135deg,var(--ns-green),var(--ns-indigo));opacity:.95;
}

/* ---------- responsive ------------------------------------------------------ */
@media (max-width:980px){
  /* stacked columns: never let flex math collapse the square orbit */
  .ns-orbit{max-width:560px;margin:0 auto;width:100% !important;flex:0 0 auto !important}
  .ns-bubble{width:240px}
  /* stacked columns: keep the network compact instead of stretching full width */
  .ns-synapse{max-width:420px;margin:0 auto}
}
@media (max-width:640px){
  /* mobile: keep the circle exactly as on desktop — only the right column goes */
  .ns-rail{display:none !important}
  .ns-orbit{max-width:100%;margin:0 auto}
  .ns-bubble{width:min(240px,72vw)}
  .ns-headline h1{font-size:clamp(30px,8.4vw,38px) !important}
}
@media (prefers-reduced-motion:reduce){
  .ns-work{animation:none}
  .ns-why.ns-why.ns-why,.ns-senses.ns-senses.ns-senses{animation:none !important}
  .ns-blog-card{transition:none}
}

/* ---------- Divi inheritance layer ------------------------------------------
   Typography lives on the module (with !important); every Divi wrapper in
   between must force-inherit — including .et_pb_text_inner, which exists in
   Divi 5 backward-compatibility mode and carries Divi's own Open Sans rule. */
.ns-why .et_pb_text_inner,.ns-senses .et_pb_text_inner,.ns-nine .et_pb_text_inner,
.ns-olabel .et_pb_text_inner,.ns-headline .et_pb_text_inner,
.ns-olabel h2,.ns-why h2,.ns-senses h2,
.ns-why p,.ns-senses p,.ns-nine p,.ns-olabel p,.ns-headline p{
  font:inherit !important;color:inherit !important;line-height:inherit !important;
  letter-spacing:inherit !important;text-align:inherit !important;
  margin:0 !important;padding:0 !important;
}
.ns-nine a,.ns-olabel a{color:inherit !important;text-decoration:none !important}
.ns-bubble,.ns-bubble *{font-family:var(--ns-body)}
.ns-bubble{color:#222b3f !important}
.ns-bubble p{font-size:inherit;color:inherit;margin:0;padding:0}
.ns-bubble b,.ns-bubble strong{color:#0d1530 !important}

/* ---------- footer (add a Text module with class ns-footer) ----------------- */
.ns-footer{
  max-width:680px;            /* matches the orbit width -> centers under the circle */
  font-size:13.5px;color:var(--ns-muted);text-align:center !important;
  padding:26px 0 30px;
}
.ns-footer p{font:inherit !important;color:inherit !important;margin:0 !important;padding:0 !important}
.ns-footer a{color:inherit !important;text-decoration:none}
.ns-footer a:hover{color:var(--ns-green) !important}