/* S J Consulting motion identity - precise orthogonal construction */
.brand-modal-card{width:min(1260px,100%)}
.brand-modal-body{grid-template-columns:.78fr 1.22fr}
.brand-meaning-panel{padding:22px 24px}
.brand-meaning-lead{font-size:21px;margin-bottom:14px}
.brand-value-system{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:176px 176px 176px;
  gap:18px;
  min-height:564px;
  isolation:isolate;
}
.brand-value-connectors{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.brand-value-connectors path{
  fill:none;
  stroke:#8ba1b3;
  stroke-width:2;
  stroke-linecap:round;
}
.brand-value-connectors circle{fill:#0e4f8a;stroke:#fff;stroke-width:1.5}
.brand-value-card{
  position:relative;
  z-index:1;
  width:100%;
  height:176px;
  padding:15px 16px 13px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(7,17,31,.11);
  border-top:5px solid var(--value-colour);
  box-shadow:0 8px 24px rgba(7,17,31,.06);
  overflow:hidden;
}
.brand-value-card b{display:block;font-size:14.5px;color:#07182f}
.brand-value-card span{
  display:block;
  margin:2px 0 6px;
  color:#657384;
  font-size:8.3px;
  font-weight:700;
  letter-spacing:.065em;
  line-height:1.3;
  text-transform:uppercase;
}
.brand-value-card p{margin:0;color:#4f6072;font-size:10px;line-height:1.4}
.brand-value-card em{display:block;margin-top:6px;color:#07182f;font-size:9.3px;font-style:normal;font-weight:650;line-height:1.36}
.brand-value-card.strategy{--value-colour:#A02B93;grid-column:2;grid-row:1}
.brand-value-card.architecture{--value-colour:#BFBFBF;grid-column:1;grid-row:2}
.brand-value-card.ai{--value-colour:#46B1E1;grid-column:3;grid-row:2}
.brand-value-card.transformation{--value-colour:#FFD347;grid-column:2;grid-row:3}
.brand-value-logo{
  position:relative;
  z-index:2;
  grid-column:2;
  grid-row:2;
  align-self:center;
  display:grid;
  place-items:center;
  min-height:105px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.brand-value-logo img{width:105px;height:105px;object-fit:contain}
.brand-value-narrative{
  margin:14px 0 0;
  color:#415468;
  font-size:10.8px;
  line-height:1.55;
}
.brand-animation-panel{
  position:relative;
  justify-content:flex-start;
  gap:8px;
  overflow:hidden;
  --bm-duration:15s;
}
.brand-animation-panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg,transparent,black 20%,black 78%,transparent);
}
.brand-motion-stage{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  flex:1;
  min-height:540px;
}
.brand-motion-stage svg{
  width:100%;
  height:auto;
  max-height:540px;
  overflow:visible;
}
.brand-animation-controls{
  position:relative;
  z-index:1;
  justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:11px;
}

/* Shared geometry and precise line behaviour */
.bm-identity-grid{
  transform-box:fill-box;
  transform-origin:center;
}
.bm-block{
  opacity:.13;
  transform:scale(.965);
  transform-box:fill-box;
  transform-origin:center;
  filter:saturate(.9);
}
.bm-block-label{
  opacity:0;
  transform:translateY(5px);
  transform-box:fill-box;
  transform-origin:center;
}
.bm-draw,
.bm-drop{
  fill:none;
  stroke-dasharray:var(--bm-len);
  stroke-dashoffset:var(--bm-len);
  opacity:0;
  vector-effect:non-scaling-stroke;
}
.bm-draw{
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bm-s-path{stroke:#A02B93}
.bm-j-path{
  stroke:#BFBFBF;
  stroke-width:4.25;
}
.bm-c-path{
  stroke:#46B1E1;
  stroke-width:4.25;
}
.bm-drop{
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bm-drop-s{stroke:#A02B93}
.bm-drop-j{stroke:#BFBFBF}
.bm-drop-c{stroke:#46B1E1}
.bm-dot,
.bm-drop-dot{
  opacity:0;
  transform:scale(.45);
  transform-box:fill-box;
  transform-origin:center;
  stroke:#07182F;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.bm-dot-s-start,.bm-dot-s-end,.bm-drop-dot-s-start,.bm-drop-dot-s-end{fill:#A02B93}
.bm-dot-j-start,.bm-dot-j-end,.bm-drop-dot-j-start,.bm-drop-dot-j-end{fill:#BFBFBF}
.bm-dot-c-start,.bm-dot-c-end,.bm-drop-dot-c-start,.bm-drop-dot-c-end{fill:#46B1E1}
.bm-final-word > *,
.bm-final-tagline{
  opacity:0;
  transform:translateY(7px);
  transform-box:fill-box;
  transform-origin:center;
}
.bm-cinematic-sheen{
  opacity:0;
  pointer-events:none;
}
.bm-s-path{--bm-len:1110px}
.bm-j-path{--bm-len:764px}
.bm-c-path{--bm-len:784px}
.bm-drop-s{--bm-len:206px}
.bm-drop-j{--bm-len:120px}
.bm-drop-c{--bm-len:344px}

/* Master construction timeline */
.brand-modal.playing .bm-s-path{animation:bmSLine var(--bm-duration) cubic-bezier(.4,0,.2,1) both}
.brand-modal.playing .bm-j-path{animation:bmJLine var(--bm-duration) cubic-bezier(.4,0,.2,1) both}
.brand-modal.playing .bm-c-path{animation:bmCLine var(--bm-duration) cubic-bezier(.4,0,.2,1) both}
.brand-modal.playing .bm-dot-s-start{animation:bmDotSStart var(--bm-duration) ease-out both}
.brand-modal.playing .bm-dot-s-end{animation:bmDotSEnd var(--bm-duration) ease-out both}
.brand-modal.playing .bm-dot-j-start{animation:bmDotJStart var(--bm-duration) ease-out both}
.brand-modal.playing .bm-dot-j-end{animation:bmDotJEnd var(--bm-duration) ease-out both}
.brand-modal.playing .bm-dot-c-start{animation:bmDotCStart var(--bm-duration) ease-out both}
.brand-modal.playing .bm-dot-c-end{animation:bmDotCEnd var(--bm-duration) ease-out both}
.brand-modal.playing .bm-purple-block{animation:bmPurpleBlock var(--bm-duration) ease-out both}
.brand-modal.playing .bm-grey-block{animation:bmGreyBlock var(--bm-duration) ease-out both}
.brand-modal.playing .bm-cyan-block{animation:bmCyanBlock var(--bm-duration) ease-out both}
.brand-modal.playing .bm-gold-block{animation:bmGoldBlock var(--bm-duration) ease-out both}
.brand-modal.playing .bm-strategy-label{animation:bmStrategyLabel var(--bm-duration) ease both}
.brand-modal.playing .bm-architecture-label{animation:bmArchitectureLabel var(--bm-duration) ease both}
.brand-modal.playing .bm-ai-label{animation:bmAILabel var(--bm-duration) ease both}
.brand-modal.playing .bm-transformation-label{animation:bmTransformationLabel var(--bm-duration) ease both}
.brand-modal.playing .bm-drop-s{animation:bmDropS var(--bm-duration) ease-in-out both}
.brand-modal.playing .bm-drop-j{animation:bmDropJ var(--bm-duration) ease-in-out both}
.brand-modal.playing .bm-drop-c{animation:bmDropC var(--bm-duration) ease-in-out both}
.brand-modal.playing .bm-drop-dot-s-start{animation:bmDropSDotStart var(--bm-duration) ease-out both}
.brand-modal.playing .bm-drop-dot-s-end{animation:bmDropSDotEnd var(--bm-duration) ease-out both}
.brand-modal.playing .bm-drop-dot-j-start{animation:bmDropJDotStart var(--bm-duration) ease-out both}
.brand-modal.playing .bm-drop-dot-j-end{animation:bmDropJDotEnd var(--bm-duration) ease-out both}
.brand-modal.playing .bm-drop-dot-c-start{animation:bmDropCDotStart var(--bm-duration) ease-out both}
.brand-modal.playing .bm-drop-dot-c-end{animation:bmDropCDotEnd var(--bm-duration) ease-out both}
.brand-modal.playing .bm-word-s{animation:bmWordS var(--bm-duration) ease-out both}
.brand-modal.playing .bm-word-j{animation:bmWordJ var(--bm-duration) ease-out both}
.brand-modal.playing .bm-word-c{animation:bmWordC var(--bm-duration) ease-out both}
.brand-modal.playing .bm-word-rest{animation:bmWordRest var(--bm-duration) ease-out both}
.brand-modal.playing .bm-final-tagline{animation:bmTagline var(--bm-duration) ease-out both}
.brand-modal.playing .bm-identity-grid{animation:bmGridSettle var(--bm-duration) ease-in-out both}
.brand-modal.playing .bm-cinematic-sheen{animation:bmSheen var(--bm-duration) ease-in-out both}

@keyframes bmSLine{
  0%,8%{opacity:0;stroke-dashoffset:var(--bm-len)}
  9%{opacity:1;stroke-dashoffset:var(--bm-len)}
  31%,84%{opacity:1;stroke-dashoffset:0}
  91%,100%{opacity:.72;stroke-dashoffset:0}
}
@keyframes bmJLine{
  0%,33%{opacity:0;stroke-dashoffset:var(--bm-len)}
  34%{opacity:1;stroke-dashoffset:var(--bm-len)}
  49%,84%{opacity:1;stroke-dashoffset:0}
  91%,100%{opacity:.78;stroke-dashoffset:0}
}
@keyframes bmCLine{
  0%,49%{opacity:0;stroke-dashoffset:var(--bm-len)}
  50%{opacity:1;stroke-dashoffset:var(--bm-len)}
  65%,84%{opacity:1;stroke-dashoffset:0}
  91%,100%{opacity:.86;stroke-dashoffset:0}
}
@keyframes bmDotSStart{0%,8%{opacity:0;transform:scale(.45)}9%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDotSEnd{0%,30%{opacity:0;transform:scale(.45)}31%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDotJStart{0%,33%{opacity:0;transform:scale(.45)}34%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDotJEnd{0%,48%{opacity:0;transform:scale(.45)}49%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDotCStart{0%,49%{opacity:0;transform:scale(.45)}50%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDotCEnd{0%,64%{opacity:0;transform:scale(.45)}65%,100%{opacity:1;transform:scale(1)}}
@keyframes bmPurpleBlock{0%,8%{opacity:.13;transform:scale(.965)}16%,100%{opacity:1;transform:none;filter:none}}
@keyframes bmGreyBlock{0%,20%{opacity:.13;transform:scale(.965)}29%,100%{opacity:1;transform:none;filter:none}}
@keyframes bmCyanBlock{0%,34%{opacity:.13;transform:scale(.965)}43%,100%{opacity:1;transform:none;filter:none}}
@keyframes bmGoldBlock{0%,50%{opacity:.13;transform:scale(.965)}60%,100%{opacity:1;transform:none;filter:none}}
@keyframes bmStrategyLabel{0%,17%{opacity:0;transform:translateY(5px)}24%,81%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes bmArchitectureLabel{0%,29%{opacity:0;transform:translateY(5px)}36%,81%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes bmAILabel{0%,43%{opacity:0;transform:translateY(5px)}50%,81%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes bmTransformationLabel{0%,59%{opacity:0;transform:translateY(5px)}66%,81%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes bmDropS{0%,64%{opacity:0;stroke-dashoffset:var(--bm-len)}65%{opacity:1}72%,100%{opacity:.82;stroke-dashoffset:0}}
@keyframes bmDropJ{0%,69%{opacity:0;stroke-dashoffset:var(--bm-len)}70%{opacity:1}77%,100%{opacity:.82;stroke-dashoffset:0}}
@keyframes bmDropC{0%,74%{opacity:0;stroke-dashoffset:var(--bm-len)}75%{opacity:1}82%,100%{opacity:.82;stroke-dashoffset:0}}
@keyframes bmDropSDotStart{0%,64%{opacity:0;transform:scale(.45)}65%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDropSDotEnd{0%,71%{opacity:0;transform:scale(.45)}72%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDropJDotStart{0%,69%{opacity:0;transform:scale(.45)}70%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDropJDotEnd{0%,76%{opacity:0;transform:scale(.45)}77%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDropCDotStart{0%,74%{opacity:0;transform:scale(.45)}75%,100%{opacity:1;transform:scale(1)}}
@keyframes bmDropCDotEnd{0%,81%{opacity:0;transform:scale(.45)}82%,100%{opacity:1;transform:scale(1)}}
@keyframes bmWordS{0%,71%{opacity:0;transform:translateY(7px)}75%,100%{opacity:1;transform:none}}
@keyframes bmWordJ{0%,76%{opacity:0;transform:translateY(7px)}80%,100%{opacity:1;transform:none}}
@keyframes bmWordC{0%,80%{opacity:0;transform:translateY(7px)}84%,100%{opacity:1;transform:none}}
@keyframes bmWordRest{0%,83%{opacity:0;transform:translateX(-7px)}89%,100%{opacity:1;transform:none}}
@keyframes bmTagline{0%,87%{opacity:0;transform:translateY(7px)}93%,100%{opacity:1;transform:none}}
@keyframes bmGridSettle{0%,82%{transform:none}91%,100%{transform:translateY(-9px) scale(.985)}}

@keyframes bmSheen{
  0%,84%{opacity:0;transform:translateX(-310px)}
  88%{opacity:.75}
  96%{opacity:.55;transform:translateX(370px)}
  100%{opacity:0;transform:translateX(420px)}
}

@media(max-width:980px){
  .brand-modal-body{grid-template-columns:1fr}
  .brand-value-system{width:min(680px,100%);margin-inline:auto}
  .brand-motion-stage{min-height:420px}
  .brand-motion-stage svg{max-height:470px}
}
@media(max-width:720px){
  .brand-motion-stage{min-height:330px}
  .brand-value-system{display:flex;flex-direction:column;min-height:0;gap:10px}
  .brand-value-connectors{display:none}
  .brand-value-logo{order:-1;width:110px;min-height:105px;align-self:center}
  .brand-value-card,.brand-value-card.strategy,.brand-value-card.transformation{max-width:none;height:auto;min-height:130px}
}
@media(prefers-reduced-motion:reduce){
  .brand-modal .bm-block{opacity:1!important;transform:none!important;filter:none!important}
  .brand-modal .bm-block-label{opacity:0!important}
  .brand-modal .bm-draw{opacity:.75!important;stroke-dashoffset:0!important}
  .brand-modal .bm-drop{opacity:.82!important;stroke-dashoffset:0!important}
  .brand-modal .bm-dot,.brand-modal .bm-drop-dot{opacity:1!important;transform:none!important}
  .brand-modal .bm-final-word>*{opacity:1!important;transform:none!important}
  .brand-modal .bm-final-tagline{opacity:1!important;transform:none!important}
  .brand-modal .bm-identity-grid{transform:translateY(-9px) scale(.985)!important}
  .brand-modal .bm-cinematic-sheen{display:none!important}
}