/* Our work, by service — shared styles synced from home (index.html).
 * Load AFTER page-local base .ws styles. Cache: ws-home-sync-3
 */

/* ===== Our work, by service — home dark, clear hierarchy ===== */
.ws.ws-light{
  position:relative;
  /* Soft navy → purple wash (reference-style, no particles) */
  background-color:#1e2a4a;
  background-image:
    radial-gradient(70% 90% at 88% 35%, rgba(90, 40, 70, 0.45), transparent 58%),
    radial-gradient(55% 70% at 100% 0%, rgba(238, 61, 37, 0.14), transparent 68%),
    linear-gradient(115deg, #1a2744 0%, #233058 48%, #2a2548 100%);
  color:#fff;
  border-top:0;
  padding:6.4vw 0 6.8vw;
  overflow:hidden;
}
.ws.ws-light > .container{
  position:relative;
  z-index:2;
}
.ws.ws-light .ws-atmos{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.ws.ws-light .ws-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(28px);
  opacity:.55;
}
.ws.ws-light .ws-orb-1{
  width:22vw;
  height:22vw;
  right:8%;
  top:18%;
  background:radial-gradient(circle, rgba(120, 70, 110, 0.55) 0%, rgba(120, 70, 110, 0) 70%);
}
.ws.ws-light .ws-orb-2{
  width:16vw;
  height:16vw;
  right:22%;
  top:42%;
  background:radial-gradient(circle, rgba(238, 61, 37, 0.22) 0%, rgba(238, 61, 37, 0) 70%);
  opacity:.4;
}
.ws.ws-light .ws-line{
  position:absolute;
  left:-10%;
  width:70%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform-origin:left center;
  transform:rotate(-28deg);
  opacity:.7;
}
.ws.ws-light .ws-line-1{ bottom:28%; }
.ws.ws-light .ws-line-2{ bottom:22%; opacity:.4; }
.ws.ws-light:before{
  background:url(../img/b2-bg.svg) center/0.52083vw;
  opacity:.06;
  -webkit-mask-image:none;
  mask-image:none;
  z-index:0;
}
.ws.ws-light:after{
  display:none !important;
}
.ws.ws-light .ws-eyebrow{
  color:#fff;
  font-weight:700;
  font-size:.88vw;
  letter-spacing:.1em;
  padding:.45vw 1vw .45vw .8vw;
  border:1px solid rgba(255,255,255,.14);
  border-radius:3vw;
  background:rgba(255,255,255,.05);
  width:fit-content;
}
.ws.ws-light h2{color:#fff;font-weight:600;font-size:3.6vw}
.ws.ws-light h2 span{
  background:none;-webkit-background-clip:unset;background-clip:unset;
  color:#ee3d25;-webkit-text-fill-color:#ee3d25;
}
.ws.ws-light .ws-tab,.ws.ws-light .ws-grp{flex-shrink:0}
.ws.ws-light .ws-tx{min-width:0}
.ws.ws-light .ws-tabs{
  border-top:0;gap:.55vw;
  padding:.3vw 1vw .6vw 1.3vw;
  max-height:37vw;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none !important;
  -ms-overflow-style:none;
}
.ws.ws-light .ws-tabs::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
  background:transparent !important;
}
.ws.ws-light .ws-tabs::-webkit-scrollbar-track,
.ws.ws-light .ws-tabs::-webkit-scrollbar-thumb{
  background:transparent !important;
  display:none !important;
}

/* Group label — quiet, not shouting */
.ws.ws-light .ws-grp{
  display:flex;align-items:center;gap:.8vw;
  padding:1.2vw 0 .35vw;
  font-size:.68vw;font-weight:600;
  letter-spacing:.22em;
  color:rgba(255,255,255,.4);
}
.ws.ws-light .ws-grp:after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0));
}

/* Idle — same glass as tech tabs (Web Platforms default) */
.ws.ws-light .ws-tab{
  grid-template-columns:2.5vw 1fr auto;
  align-items:center;gap:1vw;
  padding:1.05vw 1.15vw 1.05vw 1.25vw;
  color:#fff;
  background:linear-gradient(165deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:.85vw;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden;
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.ws.ws-light .ws-tab:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:.28vw;
  border-radius:0;
  background:#ee3d25;
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .3s ease,opacity .3s ease;
  box-shadow:none;
  opacity:1;
}
.ws.ws-light .ws-tx b{
  font-weight:600;font-size:1.34vw;
  color:rgba(255,255,255,.78);
  transition:color .3s ease;
}
.ws.ws-light .ws-tx em{color:rgba(255,255,255,.45)}
.ws.ws-light .ws-n{
  width:2.5vw;height:2.5vw;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:.75vw;font-weight:600;line-height:1;
  color:rgba(255,255,255,.55);
  transition:background .3s,color .3s,transform .3s,box-shadow .3s,border-color .3s;
}
.ws.ws-light .ws-c{
  display:inline-flex;align-items:center;gap:.35vw;
  padding:.32vw .72vw;border-radius:2vw;
  background:rgba(255,255,255,.08);
  font-size:.7vw;font-weight:600;line-height:1;
  color:rgba(255,255,255,.55);
  transition:background .3s,color .3s,border-color .3s;
}

/* Hover — brighter glass + clearer white border (Web Platforms hover) */
.ws.ws-light .ws-tab:hover:not(.active){
  background:linear-gradient(165deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.08) 100%);
  border-color:rgba(255,255,255,.4);
  transform:translateX(.35vw);
  box-shadow:0 .35vw 1vw rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.2);
}
.ws.ws-light .ws-tab:hover:not(.active) .ws-tx b{color:#fff}
.ws.ws-light .ws-tab:hover:not(.active) .ws-n{
  color:#fff;
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.14);
}
.ws.ws-light .ws-tab:hover:not(.active) .ws-c{color:#fff}
.ws.ws-light .ws-tab:hover:not(.active):before{
  transform:scaleY(1);
  opacity:1;
}

/* Selected — red fill + white text + white left edge (Solutions jaisa) */
.ws.ws-light .ws-tab.active{
  padding:1.2vw 1.15vw 1.2vw 1.25vw;
  background:#ee3d25;
  border:1px solid #ee3d25;
  border-left:.28vw solid #fff;
  box-shadow:0 .8vw 2vw rgba(238,61,37,.35);
  transform:none;
  border-radius:.85vw;
}
.ws.ws-light .ws-tab.active:before{transform:scaleY(0)}
.ws.ws-light .ws-tab.active .ws-tx b{color:#fff;text-shadow:none}
.ws.ws-light .ws-tab.active .ws-tx em{color:rgba(255,255,255,.85)}
.ws.ws-light .ws-tab.active .ws-n{
  background:rgba(255,255,255,.22);
  border-color:transparent;
  color:#fff;
  box-shadow:none;
}
.ws.ws-light .ws-tab.active .ws-c{
  background:rgba(255,255,255,.22);
  color:#fff;
}

/* Stage + thumbs — fit viewport, no hard right cut */
.ws.ws-light .container{
  max-width:min(77.54vw, calc(100% - 4vw));
  width:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
.ws.ws-light .ws-grid{
  grid-template-columns:minmax(0,23.5vw) minmax(0,1fr);
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.ws.ws-light .ws-side,
.ws.ws-light .ws-main{
  min-width:0;
  max-width:100%;
}
.ws.ws-light .ws-stage{
  padding:.85vw;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.14);
  border-radius:1vw;
  box-shadow:0 2.2vw 5vw rgba(0,0,0,.5),0 0 0 1px rgba(238,61,37,.08);
  max-width:100%;
  box-sizing:border-box;
}
.ws.ws-light .ws-stage i{display:none}
.ws.ws-light .ws-screen{border-radius:.55vw;background:#120e09;max-width:100%}
.ws.ws-light .ws-cap b{color:#fff}
.ws.ws-light .ws-cap em,.ws.ws-light .ws-count{color:rgba(255,255,255,.55)}
.ws.ws-light .ws-arr{
  color:#fff;
  border-color:rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.ws.ws-light .ws-arr:hover{
  background:#ee3d25;border-color:#ee3d25;color:#fff;
  transform:scale(1.06);
}
.ws.ws-light .ws-thumbs{
  display:none !important; /* only active panel — never stack all services */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1vw;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:3px; /* room for active red ring — no edge clip */
  margin-top:1.4vw;
  overflow:visible;
}
.ws.ws-light .ws-thumbs.active{
  display:grid !important;
}
.ws.ws-light .ws-th{color:#fff;min-width:0;max-width:100%}
.ws.ws-light .ws-th img,.ws.ws-light .ws-th video{
  display:block;
  width:100%;
  max-width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:.55vw;
  box-shadow:0 .5vw 1.2vw rgba(0,0,0,.4);
  transition:transform .3s,border-color .3s,box-shadow .3s,opacity .3s;
  opacity:.72;
  box-sizing:border-box;
}
.ws.ws-light .ws-th:hover img,.ws.ws-light .ws-th:hover video{
  transform:translateY(-.25vw);
  opacity:.95;
}
.ws.ws-light .ws-th.active img,.ws.ws-light .ws-th.active video{
  opacity:1;
  border-color:#ee3d25;
  box-shadow:0 0 0 1px #ee3d25,0 .7vw 1.6vw rgba(238,61,37,.35);
}
.ws.ws-light .ws-th em{color:rgba(255,255,255,.5)}

@media (max-width:700px){
  .ws.ws-light{padding:14vw 0}
  .ws.ws-light .ws-eyebrow{padding:1.2vw 3vw}
  .ws.ws-light h2{font-size:9vw}
  .ws.ws-light .ws-tabs{padding:0 0 2vw;gap:2vw}
  .ws.ws-light .ws-grp{font-size:2.4vw;padding:3vw 0 1vw}
  .ws.ws-light .ws-tab{
    grid-template-columns:none;display:inline-flex;gap:2vw;
    padding:2vw 3.4vw;border-radius:5vw;
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  }
  .ws.ws-light .ws-tab:hover:not(.active){transform:none}
  .ws.ws-light .ws-n{width:6.4vw;height:6.4vw;font-size:2.6vw}
  .ws.ws-light .ws-tx b{font-size:3.8vw}
  .ws.ws-light .ws-c{font-size:2.6vw;padding:1vw 2vw}
  .ws.ws-light .ws-tab.active{
    background:#ee3d25;
    border:1px solid #ee3d25;
    border-left:.7vw solid #fff;
    box-shadow:0 2vw 4vw rgba(238,61,37,.4);
    padding:2vw 3.4vw;
  }
  .ws.ws-light .ws-tab.active .ws-tx b,
  .ws.ws-light .ws-tab.active .ws-c{color:#fff;text-shadow:none}
  .ws.ws-light .ws-tab.active .ws-n{
    background:rgba(255,255,255,.22);border-color:transparent;box-shadow:none;color:#fff;
  }
  .ws.ws-light .ws-stage{padding:1.6vw;border-radius:3vw}
  .ws.ws-light .ws-screen,.ws.ws-light .ws-th img,.ws.ws-light .ws-th video{border-radius:2vw}
}

/* ===== Site-wide: match home (mad / prefixed ids) ===== */
.mad section.ws.ws-light:not(.hero):not(.cta),
[id^="work-by-service"].ws.ws-light {
  background-color:#1e2a4a !important;
  background-image:
    radial-gradient(70% 90% at 88% 35%, rgba(90, 40, 70, 0.45), transparent 58%),
    radial-gradient(55% 70% at 100% 0%, rgba(238, 61, 37, 0.14), transparent 68%),
    linear-gradient(115deg, #1a2744 0%, #233058 48%, #2a2548 100%) !important;
  color:#fff !important;
  border-top:0 !important;
}
.mad section.ws.ws-light:not(.hero):not(.cta):not(.svc-marquee) h2,
[id^="work-by-service"].ws.ws-light h2 {
  padding-top:0;
  position:static;
  color:#fff;
}
.mad section.ws.ws-light:not(.hero):not(.cta):not(.svc-marquee) h2:before {
  display:none; content:none;
}
.mad .ws.ws-light .ws-tx em,
.mad .ws.ws-light .ws-th em,
.mad .ws.ws-light .ws-cap em {
  animation:none; background:none; -webkit-text-fill-color:currentColor;
}
.mad .ws.ws-light .ws-tx b,
.mad .ws.ws-light .ws-th b,
.mad .ws.ws-light .ws-cap b { font-family:inherit; }

/* Prefixed Our work blocks inside services band = glass over dotted band */
.svc-band [id^="work-by-service"],
.svc-band [id^="work-by-service"].ws,
.svc-band [id^="work-by-service"].ws.ws-light {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}
.svc-band [id^="work-by-service"]:before,
.svc-band [id^="work-by-service"]:after,
.svc-band [id^="work-by-service"].ws:before,
.svc-band [id^="work-by-service"].ws:after,
.svc-band [id^="work-by-service"].ws.ws-light:before,
.svc-band [id^="work-by-service"].ws.ws-light:after {
  display: none !important;
  content: none !important;
}
.svc-band .ws-grp:after,
.svc-band .ws.ws-light .ws-grp:after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Hide red scrollbar */
#work-by-service .ws-tabs,
[id^="work-by-service"] .ws-tabs,
.ws .ws-tabs,
.ws.ws-light .ws-tabs {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#work-by-service .ws-tabs::-webkit-scrollbar,
[id^="work-by-service"] .ws-tabs::-webkit-scrollbar,
.ws .ws-tabs::-webkit-scrollbar,
.ws.ws-light .ws-tabs::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
#work-by-service .ws-tabs::-webkit-scrollbar-thumb,
[id^="work-by-service"] .ws-tabs::-webkit-scrollbar-thumb,
.ws .ws-tabs::-webkit-scrollbar-thumb,
.ws.ws-light .ws-tabs::-webkit-scrollbar-thumb {
  background: transparent !important;
  display: none !important;
}

@media (min-width: 701px) and (max-width: 1100px) {
  #work-by-service.ws .container,
  .ws#work-by-service .container,
  [id^="work-by-service"].ws .container {
    max-width: 92vw !important;
  }
  #work-by-service .ws-grid,
  .ws#work-by-service .ws-grid,
  [id^="work-by-service"] .ws-grid {
    grid-template-columns: minmax(200px, 0.95fr) 1.4fr !important;
    gap: 28px !important;
  }
  #work-by-service .ws-tabs,
  .ws#work-by-service .ws-tabs,
  [id^="work-by-service"] .ws-tabs {
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }
  #work-by-service h2,
  .ws#work-by-service h2,
  [id^="work-by-service"] h2 {
    font-size: 32px !important;
  }
}

@media (max-width: 700px) {
  #work-by-service.ws,
  .ws#work-by-service,
  [id^="work-by-service"].ws {
    padding: 12vw 0 14vw !important;
    z-index: 50 !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }
  .svc-band [id^="work-by-service"].ws {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  #work-by-service .container,
  .ws#work-by-service .container,
  [id^="work-by-service"] .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 4vw !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  #work-by-service .ws-grid,
  .ws#work-by-service .ws-grid,
  [id^="work-by-service"] .ws-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5vw !important;
  }
  #work-by-service .ws-side,
  #work-by-service .ws-main,
  .ws#work-by-service .ws-side,
  .ws#work-by-service .ws-main,
  [id^="work-by-service"] .ws-side,
  [id^="work-by-service"] .ws-main {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #work-by-service .ws-thumbs,
  [id^="work-by-service"] .ws-thumbs {
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2vw !important;
    margin-top: 4vw !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #work-by-service .ws-thumbs.active,
  [id^="work-by-service"] .ws-thumbs.active {
    display: grid !important;
  }
}